ReanimatedError: [Reanimated] Tried to synchronously call a non-worklet function `addPointToPath` on the UI thread.

[GerardoGarciaR]

On what kind of device are you using this library?

• Android
• iOS
• Web

Environment

- OS: macOS Sonoma
- react-native: 0.74.5
- @benjeau/react-native-draw: 0.8.3
- react-native-gesture-handler: 2.16.1
- react-native-reanimated: 3.10.1
- react-native-svg: 15.2.0

Current Behavior

I 'm facing that error when I try to run the project on iOS and android:
ERROR ReanimatedError: [Reanimated] Tried to synchronously call a non-worklet function bound dispatchSetState on the UI thread.

Even I tried to the same on a new project but without success, The Canvas works perfectly on WEB, but I doesnt work neither iOS neither android.
And this error happens when I pressed the canvas in order to try to draw..

Thats my code just as I have as this moment:

import 'react-native-reanimated';

import React, { useRef } from 'react';

import { Text, View, Pressable } from "react-native";

import { Canvas, CanvasRef } from '@benjeau/react-native-draw';

export default function Index() {
  const canvasRef = useRef<CanvasRef>(null);

  const handleUndo = () => {
    canvasRef.current?.undo();
  };

  const handleClear = () => {
    canvasRef.current?.clear();
  };


  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      

      <Canvas
        ref={canvasRef}
        height={600}
        width={300}
        color="black"
        thickness={2}
        opacity={0.6}
        style={{ backgroundColor: 'papayawhip', borderColor: 'black', borderWidth: 5, borderRadius: 20}}
      />
      <Pressable onPress={handleUndo} style={{margin: 20}} >
        <Text style={{fontWeight: 'bold', fontSize: 15}}>Undo</Text>
      </Pressable>
      
      <Pressable onPress={handleClear} >
        <Text style={{fontWeight: 'bold', fontSize: 15}}>Clear</Text>
      </Pressable>

    </View>
  );
}

Also I followed the instructions that React-Native-Reanimated says about a similar error, before start:
They say:

**_In short, the Reanimated babel plugin automatically converts special JavaScript functions (called worklets) to allow them to be passed and run on the UI thread.

To learn more about the plugin head onto to Reanimated babel plugin section._**

So, I decided to edit babel.config.js as this:

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      'react-native-reanimated/plugin',
    ],
  };
};

So then when I ran in it "npx expo run:ios", Throws me an error that I needed to put the library that I put on Babel Plugins as a devDependency on package.json.

So I added as this:

"devDependencies": {
    "@babel/core": "^7.20.0",
    "react-native-reanimated": "^3.15.0"
  },

That error dissapeared, but again its showing me the main errror:
ERROR ReanimatedError: [Reanimated] Tried to synchronously call a non-worklet function addPointToPath on the UI thread.

Expected Behavior

I expected that the Canvas works well on all platforms: Web, iOS and android

Steps To Reproduce

1. I installed SVG and gesture handler for expo, even in another project the npm version of that libraries.
2. Then I do: npx expo prebuild, in order to make the ios and android folders
3. Then I do: cd ios && pod install && cd ..
4. Then I run the project: npx expo run:ios

Anything else?

No response

[ShreyZervio]

@GerardoGarciaR Go to the file Canvas.tsx and at the end of panGesture add
.runOnJS(true)

This worked for me.