stack/packages/mosaic/framework/skills/vercel-react-native-skills/rules/animation-gesture-detector-press.md at 0ca192baaaa8797520aba1ff85f706cf5ba0cc7a

Files

T

fargo 1a822493ba format: apply repo prettier (3.8.1) to the folded skills tree

963 markdown files reformatted with the repository's pinned prettier so
pnpm format:check covers the folded tree like every other repo file.

The formatter's embedded-language pass also normalized code fences
(TS semicolons, closed HTML tags in examples, lowercased CSS hex colors,
one renumbered list that skipped an index). Alphanumeric token deltas vs
the fold commit were audited file-by-file; all are formatter-equivalent
markup normalizations plus the four sanitized skills.

2026-08-19 14:37:17 -05:00

2.5 KiB

Raw Blame History

title, impact, impactDescription, tags

title	impact	impactDescription	tags
Use GestureDetector for Animated Press States	MEDIUM	UI thread animations, smoother press feedback	animation, gestures, press, reanimated

Use GestureDetector for Animated Press States

For animated press states (scale, opacity on press), use GestureDetector with Gesture.Tap() and shared values instead of Pressable's onPressIn/onPressOut. Gesture callbacks run on the UI thread as worklets—no JS thread round-trip for press animations.

Incorrect (Pressable with JS thread callbacks):

import { Pressable } from 'react-native';
import Animated, { useSharedValue, useAnimatedStyle, withTiming } from 'react-native-reanimated';

function AnimatedButton({ onPress }: { onPress: () => void }) {
  const scale = useSharedValue(1);

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ scale: scale.value }],
  }));

  return (
    <Pressable
      onPress={onPress}
      onPressIn={() => (scale.value = withTiming(0.95))}
      onPressOut={() => (scale.value = withTiming(1))}
    >
      <Animated.View style={animatedStyle}>
        <Text>Press me</Text>
      </Animated.View>
    </Pressable>
  );
}

Correct (GestureDetector with UI thread worklets):

import { Gesture, GestureDetector } from 'react-native-gesture-handler';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withTiming,
  interpolate,
  runOnJS,
} from 'react-native-reanimated';

function AnimatedButton({ onPress }: { onPress: () => void }) {
  // Store the press STATE (0 = not pressed, 1 = pressed)
  const pressed = useSharedValue(0);

  const tap = Gesture.Tap()
    .onBegin(() => {
      pressed.set(withTiming(1));
    })
    .onFinalize(() => {
      pressed.set(withTiming(0));
    })
    .onEnd(() => {
      runOnJS(onPress)();
    });

  // Derive visual values from the state
  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ scale: interpolate(withTiming(pressed.get()), [0, 1], [1, 0.95]) }],
  }));

  return (
    <GestureDetector gesture={tap}>
      <Animated.View style={animatedStyle}>
        <Text>Press me</Text>
      </Animated.View>
    </GestureDetector>
  );
}

Store the press state (0 or 1), then derive the scale via interpolate. This keeps the shared value as ground truth. Use runOnJS to call JS functions from worklets. Use .set() and .get() for React Compiler compatibility.

Reference: Gesture Handler Tap Gesture

2.5 KiB Raw Blame History

Use GestureDetector for Animated Press States

2.5 KiB

Raw Blame History