react-native-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 [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,
  }
});

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,
  }
});