react-native-signature

app.tsx

import { StatusBar } from "expo-status-bar";
import { useCallback, useState, useMemo } from "react";
import "react-native-reanimated";
import { GestureHandlerRootView } from "react-native-gesture-handler";

import { SafeAreaView, View } from "react-native";
import { Gesture, GestureDetector } from "react-native-gesture-handler";
import { Canvas, Circle, Path, Skia, SkPath } from "@shopify/react-native-skia";
import { runOnJS, useSharedValue } from "react-native-reanimated";

export default function RootLayout() {
  const [paths, setPaths] = useState<string[]>([]);
  const currentPath = useSharedValue<SkPath>(Skia.Path.Make());
  const pointX = useSharedValue(0);
  const pointY = useSharedValue(0);

  const addPath = useCallback((newPath: string) => {
    setPaths((currentPaths) => [...currentPaths, newPath]);
  }, []);

  const tap = useMemo(
    () =>
      Gesture.Pan()
        .maxPointers(1)
        .onStart((event) => {
          const path = Skia.Path.Make();
          path.moveTo(event.x, event.y);
          currentPath.value = path;
          pointX.value = event.x;
          pointY.value = event.y;
        })
        .onUpdate((event) => {
          currentPath.value.lineTo(event.x, event.y);
          pointX.value = event.x;
          pointY.value = event.y;
        })
        .onEnd(() => {
          runOnJS(addPath)(currentPath.value.toSVGString());
        }),
    []
  );

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <SafeAreaView style={{ flex: 1 }}>
        <StatusBar style="auto" />
        <View style={{ flex: 1 }}>
          <GestureDetector gesture={tap}>
            <Canvas style={{ flex: 1, backgroundColor: "white" }}>
              <Circle cx={pointX} cy={pointY} r={1} color="transparent" />
              {paths.map((path, index) => (
                <Path
                  key={index}
                  path={path}
                  color={"black"}
                  style="stroke"
                  strokeWidth={1}
                />
              ))}
              <Path
                key="currentPath"
                path={currentPath}
                color={"black"}
                style="stroke"
                strokeWidth={1}
              />
            </Canvas>
          </GestureDetector>
        </View>
      </SafeAreaView>
    </GestureHandlerRootView>
  );
}