Using setState inside onActive of gestureEvent crashes the whole app

[luciomoriconi]

I have the following setup inside a component (using Android in AndroidStudio)

const panGestureEvent =
    useAnimatedGestureHandler<PanGestureHandlerGestureEvent>({
      onStart: () => {},
      onActive: e => {
        if (e.translationX) {
          moveDot(0, 0.001);
        }
      },
      onEnd: () => {},
    });

const startStyle = useAnimatedStyle(() => ({
    width: `${start * 100}%`,
  }));

return (
  <>
       <DotOffset style={startStyle} />
       <GestureHandlerRootView>
          <PanGestureHandler onGestureEvent={panGestureEvent}>
            <Dot />
          </PanGestureHandler>
        </GestureHandlerRootView>
   </>
)

Where moveDot is a handler for a setState that changes the start value used startStyle. I need to handle the state out of this component because it's part of the overall value of a form.

Whenever I use moveDot inside of the gesture handler (which only happens when I drag out of my Animated.View), the app just crashes with no error message. Any idea why this happens?

Thanks in advance for any help

[hirbod]

I think It's crashing because you're trying to access a JS Function from the native thread.

import { runOnJS } from 'react-native-reanimated'

And change your call like this:

      onActive: e => {
        if (e.translationX) {
          runOnJS(moveDot)(0, 0.001);
        }
      },

I think it should work

[luciomoriconi]

Worked perfectly, thanks!

[jameskim917]

Helped me too, thanks!