Skip to content

Instantly share code, notes, and snippets.

@tanner-west

tanner-west/med-9797f5f7b9b4_gesture-demo.tsx

Created August 25, 2022 12:12
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save tanner-west/e4b5aa9c9bede2337c580065d66b48a2 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save tanner-west/e4b5aa9c9bede2337c580065d66b48a2 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. tanner-west created this gist Aug 25, 2022.
    125 changes: 125 additions & 0 deletions med-9797f5f7b9b4_gesture-demo.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,125 @@
    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>
    );
    }