Introduction

Configuration

• setGestureState Boolean
• Whether the decorator should pass the current pan state to the decorated child. If you only use the callbacks to react to panning, then you can set this to false.
• Default: true

Props

• onPanBegin({ originX, originY }) Function
• Gets called once at the begin of the gesture.
• onPan({ absoluteChangeX, absoluteChangeY, changeX, changeY }) Function
• Gets called whenever the touch moves.
• onPanEnd() Function
• Gets called when the gesture is released or terminated. (The user ended the touch or it was forcefully interrupted)
• panDecoratorStyle Object
• A custom style object, which will be applied to the wrapper view.
• resetPan Boolean
• When true is passed, it will reset the state of the panning decorator. This can be useful if you want to reset the absolute change values, since these stay stored until you reset them.

swipeable

Configuration

• setGestureState Boolean
• Whether the decorator should pass the current pan state to the decorated child. If you only use the callbacks to react to panning, then you can set this to false.
• horizontal Boolean
• Whether horizontal swipes should be detected.
• Default: false
• vertical Boolean
• Whether vertical swipes should be detected.
• Default: false
• left Boolean
• Whether left swipes should be detected.
• Default: false
• right Boolean
• Whether right swipes should be detected.
• Default: false
• up Boolean
• Whether upward swipes should be detected.
• Default: false
• up Boolean
• Whether downward swipes should be detected.
• Default: false
• continuous Boolean
• If true, then you will receive an update each time the touch moves. If false you will only receive a single notification about the touch.
• Default: true
• initialVelocityThreshold Number
• Defines the initial velocity necessary for the swipe to be registered.
• Default: 0.7
• verticalThreshold Number
• Defines how far the touch can stray from the x-axis in y-direction when detecting horizontal touches.
• Default: 10
• horizontalThreshold Number
• Defines how far the touch can stray from the y-axis in x-direction when detecting vertical touches.
• Default: 10

Props

• onSwipeBegin({ direction, distance, velocity }) Function
• Gets called once at the begin of the gesture.
• onSwipe({ direction, distance, velocity }) Function
• Gets called whenever the touch moves, if continuous is true.
• onSwipeEnd({ direction }) Function
• Gets called when the gesture is released or terminated. (The user ended the touch or it was forcefully interrupted)
• swipeDecoratorStyle Object
• A custom style object, which will be applied to the wrapper view.

Installation

npm i react-native-gesture-recognizers

Example

import React, { useRef, useState } from 'react';
import { View, Image, StyleSheet } from 'react-native';
import { PinchGestureHandler } from 'react-native-gesture-handler';

export default function App() {
  const pinchRef = useRef(null);
  const imageRef = useRef(null);

  const [scale, setScale] = useState(1);

  const onPinchGestureEvent = ({ nativeEvent }) => {
    setScale(nativeEvent.scale);
    imageRef.current.setNativeProps({
      style: {
        transform: [{ scale: nativeEvent.scale }],
      },
    });
  };

  return (
    <View style={styles.container}>
      <PinchGestureHandler
        ref={pinchRef}
        onGestureEvent={onPinchGestureEvent}
        onHandlerStateChange={({ nativeEvent }) => {
          if (nativeEvent.oldState === 4) {
            setScale(1);
            imageRef.current.setNativeProps({
              style: {
                transform: [{ scale: 1 }],
              },
            });
          }
        }}
      >
        <Image
          ref={imageRef}
          source={{ uri: 'https://media-cldnry.s-nbcnews.com/image/upload/t_fit-560w,f_auto,q_auto:best/rockcms/2022-01/210602-doge-meme-nft-mb-1715-8afb7e.jpg' }}
          style={{ width: 200, height: 200, transform: [{ scale: scale }] }}
        />
      </PinchGestureHandler>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

Tutorial

Coming Soon…