Cursor rule

1---
2alwaysApply: false
3---
4 
5## Use GestureDetector for Animated Press States
6 
7For animated press states (scale, opacity on press), use `GestureDetector` with
8`Gesture.Tap()` and shared values instead of Pressable's
9`onPressIn`/`onPressOut`. Gesture callbacks run on the UI thread as worklets—no
10JS thread round-trip for press animations.
11 
12**Incorrect (Pressable with JS thread callbacks):**
13 
14```tsx
15import { Pressable } from 'react-native'
16import Animated, {
17  useSharedValue,
18  useAnimatedStyle,
19  withTiming,
20} from 'react-native-reanimated'
21 
22function AnimatedButton({ onPress }: { onPress: () => void }) {
23  const scale = useSharedValue(1)
24 
25  const animatedStyle = useAnimatedStyle(() => ({
26    transform: [{ scale: scale.value }],
27  }))
28 
29  return (
30    <Pressable
31      onPress={onPress}
32      onPressIn={() => (scale.value = withTiming(0.95))}
33      onPressOut={() => (scale.value = withTiming(1))}
34    >
35      <Animated.View style={animatedStyle}>
36        <Text>Press me</Text>
37      </Animated.View>
38    </Pressable>
39  )
40}
41```
42 
43**Correct (GestureDetector with UI thread worklets):**
44 
45```tsx
46import { Gesture, GestureDetector } from 'react-native-gesture-handler'
47import Animated, {
48  useSharedValue,
49  useAnimatedStyle,
50  withTiming,
51  interpolate,
52  runOnJS,
53} from 'react-native-reanimated'
54 
55function AnimatedButton({ onPress }: { onPress: () => void }) {
56  // Store the press STATE (0 = not pressed, 1 = pressed)
57  const pressed = useSharedValue(0)
58 
59  const tap = Gesture.Tap()
60    .onBegin(() => {
61      pressed.set(withTiming(1))
62    })
63    .onFinalize(() => {
64      pressed.set(withTiming(0))
65    })
66    .onEnd(() => {
67      runOnJS(onPress)()
68    })
69 
70  // Derive visual values from the state
71  const animatedStyle = useAnimatedStyle(() => ({
72    transform: [
73      { scale: interpolate(withTiming(pressed.get()), [0, 1], [1, 0.95]) },
74    ],
75  }))
76 
77  return (
78    <GestureDetector gesture={tap}>
79      <Animated.View style={animatedStyle}>
80        <Text>Press me</Text>
81      </Animated.View>
82    </GestureDetector>
83  )
84}
85```
86 
87Store the press **state** (0 or 1), then derive the scale via `interpolate`.
88This keeps the shared value as ground truth. Use `runOnJS` to call JS functions
89from worklets. Use `.set()` and `.get()` for React Compiler compatibility.
90 
91Reference:
92[Gesture Handler Tap Gesture](https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/tap-gesture)
93