react-native-gesture-handler

What is react-native-gesture-handler?

react-native-gesture-handler is a library that provides native-driven gesture management APIs for building smooth and responsive gesture-based interactions in React Native applications. It offers a wide range of gesture handlers and components to handle touch and gesture events more efficiently than the default gesture system in React Native.

What are react-native-gesture-handler's main functionalities?

Tap Gesture

This feature allows you to detect tap gestures on a component. The code sample demonstrates how to use the TapGestureHandler to detect a tap on a View component.

import { TapGestureHandler, State } from 'react-native-gesture-handler';
import { View, Text } from 'react-native';

function MyComponent() {
  const onHandlerStateChange = (event) => {
    if (event.nativeEvent.state === State.ACTIVE) {
      console.log('Tap gesture detected');
    }
  };

  return (
    <TapGestureHandler onHandlerStateChange={onHandlerStateChange}>
      <View style={{ width: 100, height: 100, backgroundColor: 'blue' }}>
        <Text>Tap me</Text>
      </View>
    </TapGestureHandler>
  );
}

Pan Gesture

This feature allows you to detect and respond to pan gestures, which involve dragging a component. The code sample demonstrates how to use the PanGestureHandler to move a View component based on user drag gestures.

import { PanGestureHandler, State } from 'react-native-gesture-handler';
import { View, Animated } from 'react-native';

function MyComponent() {
  const translateX = new Animated.Value(0);
  const translateY = new Animated.Value(0);

  const onGestureEvent = Animated.event([
    {
      nativeEvent: {
        translationX: translateX,
        translationY: translateY,
      },
    },
  ], { useNativeDriver: true });

  const onHandlerStateChange = (event) => {
    if (event.nativeEvent.state === State.END) {
      translateX.setValue(0);
      translateY.setValue(0);
    }
  };

  return (
    <PanGestureHandler
      onGestureEvent={onGestureEvent}
      onHandlerStateChange={onHandlerStateChange}
    >
      <Animated.View style={{ transform: [{ translateX }, { translateY }] }}>
        <View style={{ width: 100, height: 100, backgroundColor: 'red' }} />
      </Animated.View>
    </PanGestureHandler>
  );
}

Pinch Gesture

This feature allows you to detect pinch gestures, which involve two fingers moving closer together or further apart. The code sample demonstrates how to use the PinchGestureHandler to scale a View component based on pinch gestures.

import { PinchGestureHandler, State } from 'react-native-gesture-handler';
import { View, Animated } from 'react-native';

function MyComponent() {
  const scale = new Animated.Value(1);

  const onGestureEvent = Animated.event([
    {
      nativeEvent: { scale: scale },
    },
  ], { useNativeDriver: true });

  const onHandlerStateChange = (event) => {
    if (event.nativeEvent.state === State.END) {
      Animated.spring(scale, {
        toValue: 1,
        useNativeDriver: true,
      }).start();
    }
  };

  return (
    <PinchGestureHandler
      onGestureEvent={onGestureEvent}
      onHandlerStateChange={onHandlerStateChange}
    >
      <Animated.View style={{ transform: [{ scale }] }}>
        <View style={{ width: 100, height: 100, backgroundColor: 'green' }} />
      </Animated.View>
    </PinchGestureHandler>
  );
}

Other packages similar to react-native-gesture-handler

react-native-reanimated

react-native-reanimated is a library that provides a more powerful and flexible way to create animations in React Native. It allows for complex gesture interactions and animations to be defined in JavaScript and executed on the native thread, resulting in smoother performance. While it focuses more on animations, it can be used in conjunction with gesture handlers to create advanced gesture-based animations.

react-native-swipe-gestures

react-native-swipe-gestures is a library that provides easy-to-use swipe gesture detection for React Native applications. It is simpler and more limited in scope compared to react-native-gesture-handler, focusing primarily on detecting swipe gestures in four directions (up, down, left, right). It is suitable for applications that need basic swipe gesture detection without the complexity of handling multiple types of gestures.

react-native-draggable

react-native-draggable is a library that provides draggable components for React Native applications. It allows you to make any component draggable with minimal setup. While it is more focused on drag-and-drop interactions, it does not offer the same breadth of gesture handling capabilities as react-native-gesture-handler.

README

The README file is missing