react-native-gesture-handler

React Native Gesture Handler is a declarative API for handling complex gestures and touch interactions in React Native applications. It provides a more powerful and customizable alternative to the built-in touch system, allowing developers to create smooth, native-like gesture experiences across both iOS and Android platforms.

Pros

• Improved performance compared to React Native's built-in gesture system
• Supports a wide range of gestures, including pan, pinch, rotation, and more
• Provides a unified API for both iOS and Android platforms
• Allows for complex gesture compositions and interactions

Cons

• Steeper learning curve compared to React Native's built-in touch system
• May require additional setup and configuration
• Some advanced features might not be fully supported on all devices or OS versions
• Documentation can be overwhelming for beginners

Code Examples

1. Basic tap gesture:

import { Gesture, GestureDetector } from 'react-native-gesture-handler';

const tap = Gesture.Tap()
  .onStart(() => {
    console.log('Tap gesture started');
  })
  .onEnd(() => {
    console.log('Tap gesture ended');
  });

return (
  <GestureDetector gesture={tap}>
    <View style={styles.box} />
  </GestureDetector>
);

2. Pan gesture with animation:

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

const translateX = useSharedValue(0);
const translateY = useSharedValue(0);

const pan = Gesture.Pan()
  .onUpdate((event) => {
    translateX.value = event.translationX;
    translateY.value = event.translationY;
  });

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

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

3. Pinch gesture:

import { Gesture, GestureDetector } from 'react-native-gesture-handler';

const pinch = Gesture.Pinch()
  .onUpdate((event) => {
    console.log('Scale:', event.scale);
  });

return (
  <GestureDetector gesture={pinch}>
    <View style={styles.container} />
  </GestureDetector>
);

Getting Started

1. Install the library:

   npm install react-native-gesture-handler
   

2. For iOS, run:

   cd ios && pod install
   

3. Wrap your app's root component with GestureHandlerRootView:

import { GestureHandlerRootView } from 'react-native-gesture-handler';

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      {/* Your app content */}
    </GestureHandlerRootView>
  );
}

4. Start using gestures in your components as shown in the code examples above.