Skip to content

Instantly share code, notes, and snippets.

@tanner-west
Created August 25, 2022 12:12
Show Gist options
  • Save tanner-west/e4b5aa9c9bede2337c580065d66b48a2 to your computer and use it in GitHub Desktop.
Save tanner-west/e4b5aa9c9bede2337c580065d66b48a2 to your computer and use it in GitHub Desktop.
import React, { useState } from "react";
import { SafeAreaView, Text } from "react-native";
import {
Gesture,
GestureDetector,
GestureHandlerRootView,
} from "react-native-gesture-handler";
export default function GestureDemo() {
const [tGestureStart, setTGestureStart] = useState<undefined | string>();
const [tGestureMove, setTGestureMove] = useState<undefined | string>();
const [tGestureUpdate, setTGestureUpdate] = useState<undefined | string>();
const [tGestureEnd, setTGestureEnd] = useState<undefined | string>();
const pan = Gesture.Pan()
.onStart((g) => {
// Start gesture looks like this
// {
// "absoluteX": 178,
// "absoluteY": 484,
// "handlerTag": 2,
// "numberOfPointers": 1,
// "oldState": 2,
// "state": 4,
// "target": 115,
// "translationX": -4.3333282470703125,
// "translationY": 0,
// "velocityX": -172.0102558333448,
// "velocityY": 0,
// "x": 178,
// "y": 484,
// }
setTGestureStart(`${Math.round(g.x)}, ${Math.round(g.y)}`);
})
.onTouchesMove((g) => {
// Move gesture looks like this
// {
// "allTouches": Array [
// {
// "absoluteX": 123.33332824707031,
// "absoluteY": 449,
// "id": 0,
// "x": 123.33332824707031,
// "y": 449,
// },
// ],
// "changedTouches": Array [
// {
// "absoluteX": 123.33332824707031,
// "absoluteY": 449,
// "id": 0,
// "x": 123.33332824707031,
// "y": 449,
// },
// ],
// "eventType": 2,
// "handlerTag": 2,
// "numberOfTouches": 1,
// "state": 4,
// "target": 115,
// }
setTGestureMove(
`${Math.round(g.changedTouches[0].x)}, ${Math.round(
g.changedTouches[0].y
)}`
);
})
.onUpdate((g) => {
// Update gesture looks like
// {
// "absoluteX": 229,
// "absoluteY": 400.3333282470703,
// "handlerTag": 2,
// "numberOfPointers": 1,
// "state": 4,
// "target": 115,
// "translationX": 0,
// "translationY": 1.6666717529296875,
// "velocityX": 0,
// "velocityY": 24.111687246989227,
// "x": 229,
// "y": 400.3333282470703,
// }
setTGestureUpdate(`${Math.round(g.x)}, ${Math.round(g.y)}`);
})
.onEnd((g) => {
// End gesture looks like this
// {
// "absoluteX": 213.3333282470703,
// "absoluteY": 542.6666564941406,
// "handlerTag": 2,
// "numberOfPointers": 0,
// "oldState": 4,
// "state": 5,
// "target": 115,
// "translationX": -66,
// "translationY": 172,
// "velocityX": -71.28075141720757,
// "velocityY": 567.0058445795321,
// "x": 213.3333282470703,
// "y": 542.6666564941406,
// }
setTGestureEnd(`${Math.round(g.x)}, ${Math.round(g.y)}`);
});
return (
<GestureHandlerRootView style={{ flex: 1 }}>
<GestureDetector gesture={pan}>
<SafeAreaView style={{ flex: 1, backgroundColor: "black" }}>
<Text
style={{ color: "white", fontSize: 24 }}
>{`Gesture started at: ${tGestureStart}`}</Text>
<Text
style={{ color: "white", fontSize: 24 }}
>{`Gesture moved to: ${tGestureMove}`}</Text>
<Text
style={{ color: "white", fontSize: 24 }}
>{`Gesture updated to: ${tGestureUpdate}`}</Text>
<Text
style={{ color: "white", fontSize: 24 }}
>{`Gesture ended at: ${tGestureEnd}`}</Text>
</SafeAreaView>
</GestureDetector>
</GestureHandlerRootView>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment