Canvas onTouch Android

[chiefchief]

Description

When user tap and hold, triggers - "onStart" but no "onActive" on move, immediately after start moving triggers "onEnd"

Version

0.1.240

Steps to reproduce

Code provided below

Snack, code example, screenshot, or link to a repository

import { Canvas, Path, Skia, useCanvasRef, useTouchHandler } from '@shopify/react-native-skia';
import React, { forwardRef, useEffect, useImperativeHandle } from 'react';

const activePath = Skia.Path.Make();

export const SignaturePad = forwardRef<SignaturePad, SignaturePadProps>(({ height, width, onUpdate }, ref) => {
  const canvasRef = useCanvasRef();

  useEffect(() => {
    return () => {
      activePath.reset();
    };
  }, []);

  useImperativeHandle(ref, () => ({
    clear: () => {
      activePath.reset();
      onUpdate?.('');
    },
  }));

  const onTouch = useTouchHandler({
    onStart: ({ x, y }) => {
      activePath.moveTo(x, y);
    },
    onActive: ({ x, y }) => {
      activePath.lineTo(x, y);
    },
    onEnd: () => {
      console.log('END', Date.now());
    },
  });

  return (
    <Canvas ref={canvasRef} style={{ height, width, backgroundColor: 'white' }} onTouch={onTouch}>
      <Path path={activePath} />
    </Canvas>
  );
});

type SignaturePadProps = {
  width: number;
  height: number;
  onUpdate?: (img: string) => void;
};

export type SignaturePad = {
  clear: () => void;
};

[wcandillon]

I strongly recommend to use gesture-handler for such scenario. We are not really supporting this API anymore: https://shopify.github.io/react-native-skia/docs/animations/gestures Based on the code you provided you will reanimated if want to update the path on the UI thread and have it shown directly onto the canvas. I hope this helps. William

…

On Fri, Feb 23, 2024 at 3:12 PM Silver O ***@***.***> wrote: Description When user tap and hold, triggers - "onStart" but no "onActive" on move, immediately after start moving triggers "onEnd" Version 0.1.240 Steps to reproduce Code provided below Snack, code example, screenshot, or link to a repository import { Canvas, Path, Skia, useCanvasRef, useTouchHandler } from ***@***.***/react-native-skia'; import React, { forwardRef, useEffect, useImperativeHandle } from 'react'; const activePath = Skia.Path.Make(); export const SignaturePad = forwardRef<SignaturePad, SignaturePadProps>(({ height, width, onUpdate }, ref) => { const canvasRef = useCanvasRef(); useEffect(() => { return () => { activePath.reset(); }; }, []); useImperativeHandle(ref, () => ({ clear: () => { activePath.reset(); onUpdate?.(''); }, })); const onTouch = useTouchHandler({ onStart: ({ x, y }) => { activePath.moveTo(x, y); }, onActive: ({ x, y }) => { activePath.lineTo(x, y); }, onEnd: () => { console.log('END', Date.now()); }, }); return ( <Canvas ref={canvasRef} style={{ height, width, backgroundColor: 'white' }} onTouch={onTouch}> <Path path={activePath} /> </Canvas> ); }); type SignaturePadProps = { width: number; height: number; onUpdate?: (img: string) => void; }; export type SignaturePad = { clear: () => void; }; — Reply to this email directly, view it on GitHub or unsubscribe. You are receiving this email because you are subscribed to this thread. Triage notifications on the go with GitHub Mobile for iOS or Android.

[chiefchief]

I strongly recommend to use gesture-handler for such scenario. We are not really supporting this API anymore: https://shopify.github.io/react-native-skia/docs/animations/gestures Based on the code you provided you will reanimated if want to update the path on the UI thread and have it shown directly onto the canvas. I hope this helps. William
…
On Fri, Feb 23, 2024 at 3:12 PM Silver O @.> wrote: Description When user tap and hold, triggers - "onStart" but no "onActive" on move, immediately after start moving triggers "onEnd" Version 0.1.240 Steps to reproduce Code provided below Snack, code example, screenshot, or link to a repository import { Canvas, Path, Skia, useCanvasRef, useTouchHandler } from @./react-native-skia'; import React, { forwardRef, useEffect, useImperativeHandle } from 'react'; const activePath = Skia.Path.Make(); export const SignaturePad = forwardRef<SignaturePad, SignaturePadProps>(({ height, width, onUpdate }, ref) => { const canvasRef = useCanvasRef(); useEffect(() => { return () => { activePath.reset(); }; }, []); useImperativeHandle(ref, () => ({ clear: () => { activePath.reset(); onUpdate?.(''); }, })); const onTouch = useTouchHandler({ onStart: ({ x, y }) => { activePath.moveTo(x, y); }, onActive: ({ x, y }) => { activePath.lineTo(x, y); }, onEnd: () => { console.log('END', Date.now()); }, }); return ( <Canvas ref={canvasRef} style={{ height, width, backgroundColor: 'white' }} onTouch={onTouch}> ); }); type SignaturePadProps = { width: number; height: number; onUpdate?: (img: string) => void; }; export type SignaturePad = { clear: () => void; }; — Reply to this email directly, view it on GitHub or unsubscribe. You are receiving this email because you are subscribed to this thread. Triage notifications on the go with GitHub Mobile for iOS or Android.

1. on ios throw error

import { Canvas, Path, Skia, useCanvasRef } from '@shopify/react-native-skia';
import React, { forwardRef, useEffect, useImperativeHandle } from 'react';
import { Gesture, GestureDetector } from 'react-native-gesture-handler';

const activePath = Skia.Path.Make();

const onBeginWorklet = (e) => {
  'worklet';
  activePath.moveTo(e.x, e.y);
};
const onChangeWorklet = (e) => {
  'worklet';
  activePath.lineTo(e.x, e.y);
};

export const SignaturePad = forwardRef<SignaturePad, SignaturePadProps>(({ height, width, onUpdate }, ref) => {
  const canvasRef = useCanvasRef();

  useEffect(() => {
    return () => {
      activePath.reset();
    };
  }, []);

  useImperativeHandle(ref, () => ({
    clear: () => {
      activePath.reset();
      onUpdate?.('');
    },
  }));

  const gesture = Gesture.Pan().onBegin(onBeginWorklet).onChange(onChangeWorklet);

  return (
    <GestureDetector gesture={gesture}>
      <Canvas ref={canvasRef} style={{ height, width, backgroundColor: 'white' }}>
        <Path path={activePath} style={'stroke'} strokeWidth={2} />
      </Canvas>
    </GestureDetector>
  );
});

type SignaturePadProps = {
  width: number;
  height: number;
  onUpdate?: (img: string) => void;
};

export type SignaturePad = {
  clear: () => void;
};

2. if run on JS the app just crash and no error

const onBeginWorklet = (e) => {
  runOnJS(activePath.moveTo)(e.x, e.y);
};
const onChangeWorklet = (e) => {
  runOnJS(activePath.lineTo)(e.x, e.y);
};

3. on Android these actions don't trigger at all

---

The only way on Android that works almost correctly is this one.

import { Canvas, Path, Skia, useCanvasRef } from '@shopify/react-native-skia';
import React, { forwardRef, useEffect, useImperativeHandle } from 'react';

const activePath = Skia.Path.Make();

export const SignaturePad = forwardRef<SignaturePad, SignaturePadProps>(({ height, width, onUpdate }, ref) => {
  const canvasRef = useCanvasRef();

  useEffect(() => {
    return () => {
      activePath.reset();
    };
  }, []);

  useImperativeHandle(ref, () => ({
    clear: () => {
      activePath.reset();
      onUpdate?.('');
    },
  }));

  return (
    <Canvas
      ref={canvasRef}
      style={{ height, width, backgroundColor: 'white' }}
      onTouchStart={(e) => {
        activePath.moveTo(e.nativeEvent.locationX, e.nativeEvent.locationY);
      }}
      onTouchMove={(e) => {
        activePath.lineTo(e.nativeEvent.locationX, e.nativeEvent.locationY);
      }}
    >
      <Path path={activePath} style={'stroke'} strokeWidth={2} />
    </Canvas>
  );
});

type SignaturePadProps = {
  width: number;
  height: number;
  onUpdate?: (img: string) => void;
};

export type SignaturePad = {
  clear: () => void;
};

However, the line appears on the next tap (for example, when the user taps and moves, nothing appears, but on the next tap, the previous line will appear).

[chiefchief]

useTouchHandler works properly without modal on android