How do you combine React Native Gesture Handler (RNGH) with Reanimated for immediate touch gesture interactions?

Short answer

Use Gesture.Pan() or Gesture.Tap() and pass animation event handlers (onUpdate, onEnd) that modify Shared Values directly on the UI thread without touch latency.

Explanation

RNGH intercepts touch interactions through the operating system's native touch handlers, without going through React's traditional event system. Combined with Reanimated, drag and fling/pan gestures use physics calculations directly on the UI Thread, giving users a fast experience without latency.

Code example

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

function DraggableBall() {
  const translationX = useSharedValue(0);

  const pan = Gesture.Pan()
    .onChange((event) => {
      translationX.value += event.changeX;
    })
    .onEnd(() => {
      translationX.value = withSpring(0);
    });

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

  return (
    <GestureDetector gesture={pan}>
      <Animated.View style={[styles.ball, animatedStyle]} />
    </GestureDetector>
  );
}

Common mistakes

• Forgetting to wrap the entire app root in <GestureHandlerRootView>, which prevents gestures from working on Android.

Follow-up questions

• What are Shared Values in Reanimated, and how do they differ from useState?
• Why is the built-in Animated API slow, and why is React Native Reanimated the industry standard?

Sources

• React Native Gesture Handler docs — Introduction
• Reanimated docs — Handling gestures