Tried to synchronously call function {w} from a different thread - React Native Reanimated

Question

I have a problem with runOnJS in my swipe function. All the time Im gets error:

java.lang.RuntimeException: Tried to synchronously call function {w} from a different thread.

Im gets the error in panGesture function when its called finishAnimation.

Code is here:

https://pastebin.com/YaQs4bN6

Answer 1

You're calling "finishAnimation" from the onEnd callback. That could be a problem, since finishAnimation isn't a worklet.

So you have two options:

1. finishAnimation can be marked with the "worklet" keyword

    const finishAnimation = (swipe_down) => {
        "worklet";
        // This logger can't be here anymore since it's a JS function 
        // Logger.bool(swipe_down, { swipe_down });

 
        if (swipe_down) {
            offset.value = withTiming(height.value, { duration: 100 }, () =>
                runOnJS(props.onSwipeComplete)()
            );
        } else {
            offset.value = withTiming(0, { duration: 200 });
        }
    };

2. finishAnimation can be called async on the JS Thread:

     runOnJS(finishAnimation)(
                e.velocityY > swipeOutVelocity || offset.value > calculateThreshold()
            );

Hopefully it's going to work.

Answer 2

As you are using Reanimated 2. you can add the Worklet directive to onSwipeComplete then you can run this function in both UI and JavaScript` threads.

More about worklet here - https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/worklets