Module '"@shopify/react-native-skia"' has no exported member 'useTouchHandler'.

[proparnaampit]

Description

import {
Canvas,
Path,
SkPath,
Skia,
TouchInfo,
useTouchHandler,
Image as SkiaImage,
useImage,
BlendMode,
PaintStyle,
Paint,
} from '@shopify/react-native-skia';

previously this useTouchHandler and TouchInfo was working but suddenly it is showing Module '"@shopify/react-native-skia"' has no exported member 'useTouchHandler'.Module '"@shopify/react-native-skia"' has no exported member 'TouchInfo'.

the version I was using is "@shopify/react-native-skia": "^1.3.11",

what was the issue? I didn't even changed the version.

React Native Skia Version

1.3.11

React Native Version

0.74.1

Using New Architecture

• Enabled

Steps to Reproduce

import {
Canvas,
Path,
SkPath,
Skia,
TouchInfo,
useTouchHandler,
Image as SkiaImage,
useImage,
BlendMode,
PaintStyle,
Paint,
} from '@shopify/react-native-skia';

const touchHandler = useTouchHandler(
{
onActive: onDrawingActive,
onStart: onDrawingStart,
},
[onDrawingActive, onDrawingStart],
);

{paths.map((p, index) => (

))}

both showing

Type '{ children: (Element | Element[])[]; style: { width: "100%"; height: "100%"; }; ref: RefObject; onTouch: any; }' is not assignable to type 'IntrinsicAttributes & CanvasProps & RefAttributes'.
Property 'onTouch' does not exist on type 'IntrinsicAttributes & CanvasProps & RefAttributes'.

Snack, Code Example, Screenshot, or Link to Repository

import {
Canvas,
Path,
SkPath,
Skia,
TouchInfo,
useTouchHandler,
Image as SkiaImage,
useImage,
BlendMode,
PaintStyle,
Paint,
} from '@shopify/react-native-skia';

const touchHandler = useTouchHandler(
{
onActive: onDrawingActive,
onStart: onDrawingStart,
},
[onDrawingActive, onDrawingStart],
);

{paths.map((p, index) => (

))}

both showing

Type '{ children: (Element | Element[])[]; style: { width: "100%"; height: "100%"; }; ref: RefObject; onTouch: any; }' is not assignable to type 'IntrinsicAttributes & CanvasProps & RefAttributes'.
Property 'onTouch' does not exist on type 'IntrinsicAttributes & CanvasProps & RefAttributes'.

[wcandillon]

this API has been deprecated unfortunately, please use react native gesture handler instead: https://shopify.github.io/react-native-skia/docs/animations/gestures/ Sorry for the inconvenience, hope you can easily migrate to it.

…

On Mon, Feb 24, 2025 at 11:47 AM Proparna Das ***@***.***> wrote: Description import { Canvas, Path, SkPath, Skia, TouchInfo, useTouchHandler, Image as SkiaImage, useImage, BlendMode, PaintStyle, Paint, } from ***@***.***/react-native-skia'; previously this useTouchHandler and TouchInfo was working but suddenly it is showing Module ***@***.***/react-native-skia"' has no exported member 'useTouchHandler'.Module ***@***.***/react-native-skia"' has no exported member 'TouchInfo'. the version I was using is ***@***.***/react-native-skia": "^1.3.11", what was the issue? I didn't even changed the version. React Native Skia Version 1.3.11 React Native Version 0.74.1 Using New Architecture Enabled Steps to Reproduce import { Canvas, Path, SkPath, Skia, TouchInfo, useTouchHandler, Image as SkiaImage, useImage, BlendMode, PaintStyle, Paint, } from ***@***.***/react-native-skia'; const touchHandler = useTouchHandler( { onActive: onDrawingActive, onStart: onDrawingStart, }, [onDrawingActive, onDrawingStart], ); {paths.map((p, index) => ( ))} both showing Type '{ children: (Element | Element[])[]; style: { width: "100%"; height: "100%"; }; ref: RefObject; onTouch: any; }' is not assignable to type 'IntrinsicAttributes & CanvasProps & RefAttributes'. Property 'onTouch' does not exist on type 'IntrinsicAttributes & CanvasProps & RefAttributes'. Snack, Code Example, Screenshot, or Link to Repository import { Canvas, Path, SkPath, Skia, TouchInfo, useTouchHandler, Image as SkiaImage, useImage, BlendMode, PaintStyle, Paint, } from ***@***.***/react-native-skia'; const touchHandler = useTouchHandler( { onActive: onDrawingActive, onStart: onDrawingStart, }, [onDrawingActive, onDrawingStart], ); {paths.map((p, index) => ( ))} both showing Type '{ children: (Element | Element[])[]; style: { width: "100%"; height: "100%"; }; ref: RefObject; onTouch: any; }' is not assignable to type 'IntrinsicAttributes & CanvasProps & RefAttributes'. Property 'onTouch' does not exist on type 'IntrinsicAttributes & CanvasProps & RefAttributes'. — 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.

[wcandillon]

I'm closing this for now but please let us know if you have any questions, here is a tutorial on how to use advanced gestures: https://www.youtube.com/watch?v=5yM4NPcTwY4