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

[Dark-knight-a]

Description

Hi , I am using Skia with react-native-reanimated , but whenever i use a hook , it throws an error . I tried to use runOnJs or worklet declerative but it didn't work. and this is my code :
`
import {StyleSheet, Text, View} from 'react-native';
import React from 'react';
import {Canvas, Circle, Shadow} from '@shopify/react-native-skia';
import {Easing, useSharedValue, withTiming} from 'react-native-reanimated';
import {ReText} from 'react-native-redash';

const NeumorphicButton = () => {
const isPressed = useSharedValue(false);
const blur = useSharedValue(4);
const statusText = useSharedValue('OFF');

const animateButton = () => {
'worklet';
blur.value = withTiming(
1.5,
{
duration: 500,
easing: Easing.linear,
},
() => {
isPressed.value = !isPressed.value;
(blur.value = withTiming(!isPressed.value ? 7 : 4, {
duration: 500,
easing: Easing.linear,
})),
() => {
statusText.value = isPressed.value ? 'ON' : 'OFF';
console.log(isPressed);
};
},
);
};

return (


<Canvas style={styles.canvas} onTouch={() => animateButton()}>
<Circle cx={135} cy={135} r={100} color={'white'}>
<Shadow dx={1} dy={1} blur={5} color={'#d3d3d3'} inner={true} />

<Circle cx={135} cy={135} r={70} color={'white'}>
<Shadow
dx={1}
dy={1}
blur={blur}
color={'#d3d3d3'}
inner={isPressed}
/>
<Shadow
dx={-1}
dy={-1}
blur={blur}
color={'#d3d3d3'}
inner={isPressed}
/>



);
};
and this is the error: ERROR ReanimatedError: [Reanimated] Tried to synchronously call a non-worklet function on the UI thread. Seehttps://docs.swmansion.com/react-native-reanimated/docs/guides/troubleshooting#tried-to-synchronously-call-a-non-worklet-function-on-the-ui-thread` for more details., js engine: reanimated
Error: ENOENT: no such file or directory, open 'D:\Bare_React_Native\React_native\AwesomeProject\installValueUnpacker' at Object.openSync (node:fs:585:3)
at Object.readFileSync (node:fs:453:35)
at getCodeFrame (D:\Bare_React_Native\React_native\AwesomeProject\node_modules\metro\src\Server.js:879:18)
at Server._symbolicate (D:\Bare_React_Native\React_native\AwesomeProject\node_modules\metro\src\Server.js:962:22)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async Server._processRequest (D:\Bare_React_Native\React_native\AwesomeProject\node_modules\metro\src\Server.js:418:7) {
errno: -4058,
syscall: 'open',
code: 'ENOENT',
path: 'D:\Bare_React_Native\React_native\AwesomeProject\installValueUnpacker'

Version

^0.1.222

Steps to reproduce

.

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

.

[supriyoMondal]

try adding "worklet" inside the callback function you are passing as third argument in the useTiming.

[Dark-knight-a]

try adding "worklet" inside the callback function you are passing as third argument in the useTiming.

Dude , but i am doing it right now , look...

const animateButton = () => {
'worklet';
blur.value = withTiming(
1.5,
{
duration: 500,
easing: Easing.linear,
},
() => {
isPressed.value = !isPressed.value;
(blur.value = withTiming(!isPressed.value ? 7 : 4, {
duration: 500,
easing: Easing.linear,
})),
() => {
statusText.value = isPressed.value ? 'ON' : 'OFF';
};
},
);
};

I mean it throws exactly the same error even for the skia's example in this link.
https://shopify.github.io/react-native-skia/docs/animations/animations/

[NiccoloCase]

why the issue was closed