react-native-gesture-handler - Amazon Vega Docs

The @amazon-devices/react-native-gesture-handler library is a declarative API, exposing platform native touch and gesture system to React Native. React Native Gesture Handler provides native-driven gesture management APIs for building best possible touch-based experiences in React Native. With this library, the JavaScript responder system no longer controls gestures, but instead, gestures are recognized and tracked in the UI thread. This library makes touch interactions and gesture tracking not only smooth, but also dependable and deterministic. This library is system-deployed and available to React Native for Vega apps without a separate installation process. The library is autolinking, which your app links to at runtime. The library is guaranteed to be compatible only with the version of React Native for Vega for which it’s built. When you uplevel your app’s version of React Native for Vega, consider the best practice of upleveling its library dependencies. For more information about this library and its API, see https://docs.swmansion.com/react-native-gesture-handler/docs/ in the official Software Mansion documentation.

Installation

Add the JavaScript library dependency in the package.json file. Select the tab for your React Native version.

React Native 0.72
React Native 0.83

"dependencies": {
      ...
      "@amazon-devices/react-native-gesture-handler": "~2.0.0+2.13.0"
}

"dependencies": {
      ...
      "@amazon-devices/react-native-gesture-handler": "~4.0.0+2.29.0"
}

Reinstall package-lock.json file using the npm install command.

Examples

Detecting single and double tapping.

import { Gesture, GestureDetector, GestureHandlerRootView } from '@amazon-devices/react-native-gesture-handler';
import React, { useEffect, useRef, useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';

export const App: React.FC = () => {
  const [message, setMessage] = useState("");
  const ref = useRef<View>(null);

  useEffect(() => {
    ref.current?.focus();
  }, [])

  const singleTap = Gesture.Tap().onStart(() => {
    setMessage("Single tap");
  });

  const doubleTap = Gesture.Tap().numberOfTaps(2).onStart(() => {
    setMessage("Double tap")
  });

  return (
    <GestureHandlerRootView style={{flex: 1}}>
      <View style={styles.container}>
        <Text>Tap the box once or twice</Text>
        <GestureDetector gesture={Gesture.Exclusive(doubleTap, singleTap)}>
          <View style={styles.box} focusable ref={ref} />
        </GestureDetector>
        <Text>{message}</Text>
      </View>
    </GestureHandlerRootView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    alignItems: 'center',
    justifyContent: 'center'
  },
  box: {
    width: 200,
    height: 200,
    backgroundColor: 'plum',
    margin: 20,
  }
});

Moving the box with Pan gesture handler.

import { Gesture, GestureDetector, GestureHandlerRootView } from '@amazon-devices/react-native-gesture-handler';
import React, { useEffect, useRef, useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';

export const App: React.FC = () => {
  const [posX, setPosX] = useState(0);
  const [posY, setPosY] = useState(0);
  const ref = useRef<View>(null);

  useEffect(() => {
    ref.current?.focus();
  }, [])

  const pan = Gesture.Pan().onChange((e) => {
    setPosX((x) => x + e.changeX);
    setPosY((y) => y + e.changeY);
  })

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <View style={styles.container}>
        <Text>Drag the box across the screen</Text>
        <GestureDetector gesture={pan}>
          <View style={[styles.box, { top: posY, left: posX }]} focusable ref={ref} />
        </GestureDetector>
      </View>
    </GestureHandlerRootView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    alignItems: 'center',
    justifyContent: 'center'
  },
  box: {
    width: 200,
    height: 200,
    backgroundColor: 'plum',
    margin: 20,
  }
});

Supported APIs

Gesture-Handler library on Vega adds a support for all gesture types and native components listed in the official documentation.

Gesture types

Gesture type	Description
Pan	A continuous gesture handler that can recognize a panning (dragging) gesture and track its movement.
Tap	A discrete gesture handler that recognizes one or many taps.
Long press	A discrete gesture handler that activates when the corresponding view is pressed for a sufficiently long time.
Rotation	A continuous gesture handler that can recognize a rotation gesture and track its movement.
Pinch	A continuous gesture handler that recognizes pinch gesture. This handler tracks the distance between two fingers and uses that information to scale or zoom your content.
Fling	A discrete gesture handler that activates when the movement is sufficiently long and fast.
Manual	A plain gesture that has no specific activation criteria nor event data set. The app developers must handle the state programmatically in their application logic using a gesture state manager.

Native components

Native component	Description
RNGestureHandlerButton	Gesture handler library that provides native components that can act as buttons. These components can be a replacement to `TouchableHighlight` or `TouchableOpacity` from the RN core.

Supported versions

NPM package version	Vega SDK version	Vega OS version	React Native version
~2.0.x+2.13.0	0.23 and earlier	`OS 1.1 (1401010009820)` and earlier	0.72
~4.0.0+2.29.0	0.24	`OS 1.2 (2101020054720)`	0.72, 0.83

Additional Resources

For information on more libraries, see Supported Third-Party Libraries and Services.

​Installation

​Examples

​Supported APIs

​Gesture types

​Native components

​Supported versions

​Additional Resources