Integration with Animated

Using hook API allows for smooth integration with the Animated API by allowing for passing an Animated.event as the argument to the onUpdate callback. The event mapping of Animated.event depends on the useNativeDriver property.

When using Animated API, remember to set useAnimated property to true.

Mixing Reanimated and Animated

It is not possible to mix Reanimated and Animated within any of the gesture detectors.

export default function App() {
const value = useAnimatedValue(0);

const event = Animated.event(
  [{ nativeEvent: { handlerData: { translationX: value } } }],
  {
    useNativeDriver: true,
  }
);

const gesture = usePanGesture({
  onUpdate: event,
  useAnimated: true,
});

return (
  <GestureHandlerRootView>
    <GestureDetector gesture={gesture}>
      <Animated.View
        style={[styles.box, { transform: [{ translateX: value }] }]}
      />
    </GestureDetector>
  </GestureHandlerRootView>

useNativeDriver

When using Animated.event with useNativeDriver set to false, it is required to set disableReanimated to true in the gesture configuration.

Mapping of Animated.event depends on the value of useNativeDriver property. When set to true, event data can be accessed through nativeEvent.handlerData property:

  const value = useAnimatedValue(0);

  const event = Animated.event(
    [{ nativeEvent: { handlerData: { /* translationX: value, ... */ } } }],
    { useNativeDriver: true }
  );

In case of useNativeDriver set to false, event data is accessed directly:

  const value = useAnimatedValue(0);

  const event = Animated.event(
    [ { /* translationX: value, ... */ } ],
    { useNativeDriver: false }
  );

Usage with VirtualGestureDetector

Using Animated.event with VirtualGestureDetector is possible only when useNativeDriver is set to false.

} from 'react-native-gesture-handler';

export default function App() {
const value = useAnimatedValue(0);
const event = Animated.event([{ translationX: value }], {
  useNativeDriver: false,
});

const panGesture = usePanGesture({
  onUpdate: event,
  disableReanimated: true,
});

return (
  <GestureHandlerRootView style={styles.container}>
    <InterceptingGestureDetector>
      <View style={styles.outerBox}>
        <VirtualGestureDetector gesture={panGesture}>
          <Animated.View
            style={[styles.innerBox, { transform: [{ translateX: value }] }]}
          />
        </VirtualGestureDetector>
      </View>
    </InterceptingGestureDetector>
  </GestureHandlerRootView>
);