React Native Gestures: Building Smooth Interactions with Gesture Handler

Upgrade your mobile UI from static to fluid. A guide to implementing pinch, swipe, and pan gestures with Reanimated.

zahid ansari

Building scalable systems by applying mental models to code and architecture.

General

Website

Resources

Install this app to stay connected and in the loop.

Building meaningful experiences one pixel at a time 😉.

Made with by Zahid

views

React Native Gestures: Building Smooth Interactions

Static mobile apps feel boring. Users expect to swipe, drag, and pinch. To achieve 60fps animations that respond to touch, we combine React Native Gesture Handler with Reanimated.

The Problem I Faced

I tried building a "swipe to delete" feature using the built-in React Native PanResponder. It was janky, blocked the JS thread, and stuttered on older Android devices. I needed a solution that ran on the UI thread.

Understanding Reanimated Worklets

Reanimated allows us to declare animation logic that runs entirely on the native UI thread, bypassing the React Native Javascript bridge bottleneck.

Code Example: Draggable Card

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

export default function DraggableCard() {
  const translateX = useSharedValue(0);
  const translateY = useSharedValue(0);

  const gesture = Gesture.Pan()
    .onUpdate((event) => {
      translateX.value = event.translationX;
      translateY.value = event.translationY;
    })
    .onEnd(() => {
      // Snap back to center
      translateX.value = withSpring(0);
      translateY.value = withSpring(0);
    });

  const rStyle = useAnimatedStyle(() => {
    return {
      transform: [
        { translateX: translateX.value },
        { translateY: translateY.value },
      ],
    };
  });

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

const styles = StyleSheet.create({
  box: { height: 100, width: 100, backgroundColor: '#E63946', borderRadius: 20 },
});

Common Pitfalls

Mistake 1: Forgetting
1GestureHandlerRootView
.
- Don't: Wrap your component without the root provider.
- Do: Add
  1GestureHandlerRootView
  at the very top of your App entry point (or
  1app/_layout.tsx
  in Expo Router).

Pro Tips

Spring vs Timing: Use
1withSpring
for natural, physics-based interaction. Use
1withTiming
for linear, predictable movement.
Context: Use
1useSharedValue
to persist state between gesture events (like preserving the offset after a drag).

Wrapping Up

Fluid gestures make your app feel native and high-quality. With the declarative API of Gesture Handler 2.0, it's easier than ever.

Tech Stack: React Native, Expo, Reanimated, Gesture Handler