When am I supposed to use runOnJS??

[chen-rn]

I have an app where I am using the Pan Gesture, and is mapping the user's translateY to camera zoom(similar to how snapchat camera zoom works)

I am changing the cameraZoomLevel on onUpdate and that seems to be causing the app to freeze.
In fact, it seems that whenever I use runOnJS(), even for a simple setState in onBegin(), it occasionally freezes the entire app.

I have looked into the documentation and have seen a few StackOverflow questions regarding runOnJS and runOnUI but can't find a satisfactory explanation on how exactly they work.

Would love to know when I'm supposed to be using runOnJS.

[j-piasecki]

Reanimated's worklets are executed on the UI thread and not the JS one. You can use runOnJS and runOnUI to schedule execution of a function on a different thread than you currently are, i.e. you should use runOnUI on the JS thread when you want some code to execute on the UI thread and similarly, you should use runOnJS on the UI thread when you want some code to execute on the JS thread. Keep in mind that only worklets can be executed on the UI thread, that's why you need to use runOnJS when changing state.

As a sidenote, if you don't want the callbacks of a gesture running on the UI thread, you can use .runOnJS(true) modifier, i.e.:

const pan = Gesture.Pan().runOnJS(true);

[chen-rn]

Ahh. I tried .runOnJS(true) but it seems to have made the draggable aspect of my button a little laggy.

Another thing you could do is try to move to shared values from state if possible.

Is it possible to trigger an update with sharedValue on non Animated. elements?
I tried to use useDerivedValue but I'm not sure if I used it wrong or if that wasn't the intended usecase.

To my understanding, sharedValue is shared between the "UI JS Thread" and the "UI Native" thread? Which are both in different contexts from where "React" lies right?

[chen-rn]

Also, is it possible to have "stack" two pan gesture handlers?
One for animation and one for the state change?

[j-piasecki]

Is it possible to trigger an update with sharedValue on non Animated. elements?
I tried to use useDerivedValue but I'm not sure if I used it wrong or if that wasn't the intended usecase.

I think useAnimatedProps would do the trick here.

To my understanding, sharedValue is shared between the "UI JS Thread" and the "UI Native" thread? Which are both in different contexts from where "React" lies right?

That's almost correct, there's no UI JS Thread, simply JS thread and that's exactly where React is, the UI thread is responsible for actually drawing on the screen. Shared values are shared between them, but on the UI thread access to them is synchronous while on the JS thread it's asynchronous.

Also, is it possible to have "stack" two pan gesture handlers?
One for animation and one for the state change?

I think you should be able to do it, but since you will be making gestures on different threads Gesture.Simultaneous won't work in this case. You will need to make two gesture detectors and use simultaneousWithExternalGesture modifier.

[chen-rn]

Gotcha, appreciate the explanation!

[vkukade-altir]

@j-piasecki Your explanation helped. Thanks