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