react-nativereact-native-reanimated

Expo Go crashes after trying to call a function within the Reanimated Gesture Handler


I am using react-native-animated library for the gesture handling.

const pan = Gesture.Pan()
      .onChange((e)=>{
        offSetX.value = e.translationX
        
      })
      .onEnd((e)=>{
        if (e.translationX>0){
          screenStore.handleSwipeRight(); //here
        }else if(e.translationX<0){
          screenStore.handleSwipeLeft(); //here
        }
      })
      

When either of the two marked functions are called it crashes my Expo Go simulation. In fact no function works.

I have specific logic I'd wish to call after certain gesture ends. Any ideas how I should proceed?


Solution

  • Use runOnJS

        import { runOnJS } from "react-native-reanimated";
    
        const pan = Gesture.Pan()
          .onChange((e) => {
            offSetX.value = e.translationX
          })
          .onEnd((e) => {
            if (e.translationX > 0) {
              runOnJS(screenStore.handleSwipeRight)(); // <----
            } else if(e.translationX < 0) {
              runOnJS(screenStore.handleSwipeLeft)(); // <----
            }
          })