Comments (3)
wcandillon
commented on May 25, 2024
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.
from react-native-skia.
chiefchief
commented on May 25, 2024
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.
- 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;
};
- 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);
};- 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).
from react-native-skia.
chiefchief
commented on May 25, 2024
useTouchHandler works properly without modal on android
from react-native-skia.
Related Issues (20)
- Dev works but main/prod environment broken/have different behaviors on android HOT 1
- App Crashes When Scrolling with FlatList HOT 1
- Create driving animations HOT 3
- Dashed line HOT 1
- Height and width constant of a canvas
- Path dash return SkPath HOT 3
- Cannot read properties of undefined (reading 'Path') TypeError: Cannot read properties of undefined (reading 'Path') HOT 7
- "Hello world" example code in Atlas document runs blank View, whereas "Animations" functions properly. HOT 1
- The useTexture function throws an error on Android: "Cannot read property 'getCanvas' of null" . HOT 6
- The Atlas API's transform exhibits random anomalies. HOT 3
- property opacity not working in some Element. include: <Group/>; <Picture/> HOT 1
- <Group matrix={...(Matrix4)}/> not working HOT 8
- makeImageFromView. Android crash when attempting to create an image from a view that is outside the viewport. HOT 1
- Please can useSharedValueEffect be brought back? HOT 1
- Canva path is transparent when react-native-svg elements are next to it.
- Text component doesn't re-render on value change HOT 6
- VisionOS Support
- useTexture and drawAsImage crash android app HOT 1
- Web Support Doc on Firefox not rendering HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-skia.