App crashes when reloading the Metro server

[devsales]

Describe the bug Importing the draggable list component somewhere into the app causes it to crash when I reload the Metro server (press "r" in the terminal). This happens even if the component is not used anywhere, just the import statement is enough.

import DraggableFlatList from "react-native-draggable-flatlist";

The list itself works as expected when the app is loaded, so there are no issues there. But the app crash is really annoying. Each time it produces a crash report I can send to apple (which of course I ignore) and then I have to start the app again in the simulator so that the Metro server can connect to it.

Has anyone else had/has this issue?

Platform & Dependencies Please list any applicable dependencies in addition to those below (react-navigation etc).

• react-native-draggable-flatlist version: 3.1.2
• Platform: React Native
• React Native or Expo version: 0.69.1 (react: 18.0.0)
• Reanimated version: 2.10.0
• React Native Gesture Handler version: 2.5.0

[devsales]

I just tried out some animations with Reanimated and apparently importing import Animated, { SlideInRight } from 'react-native-reanimated' also causes the app to crash when reloading the Metro server. Since this library depends on Reanimated I guess the issue is may be coming from there. I'll create an issue on the Reanimated page, but I'll keep this open for now.

[liunian-zy]

same issue.

[liunian-zy]

Did you install realm? see https://github.com/software-mansion/react-native-reanimated/issues/1424

[liunian-zy]

if you use realm, install rc version. see https://github.com/realm/realm-js/issues/4957 it solved my problem.

[devsales]

@liunian-zy yes, I'm using realm. Thanks for the suggestion. I tried installing the rc version - 11.0.0-rc.2, but sadly it didn't help. The app crashes even on the initial start...

[kamiranoff]

I experience the issue too. And I am not using Realm. The issue for me is related to this reanimated issue

A workaround as explained in the thread would be to add .runOnJs(true) in the end of Gesture.Pan() inside DraggableFlatList.tsx line 293.

 const panGesture = Gesture.Pan()
    // .... 
    .onTouchesUp(() => {
      // Turning this into a worklet causes timing issues. We want it to run
      // just after the finger lifts.
      runOnJS(onContainerTouchEnd)();
    })
    .runOnJS(true);

That might be detrimental to the performances though but might improve the local development experience.

I haven't tried with Reanimated v3 yet.

[jaycho1214]

OMG, you saved my life! Thank you so much. I've been struggling this for a day, and now It works like magic. As you suggested for addressing performance issues, I have made the following modification and used patch-package.

const panGesture = Gesture.Pan()
    // .... 
    .onTouchesUp(() => {
      // Turning this into a worklet causes timing issues. We want it to run
      // just after the finger lifts.
      runOnJS(onContainerTouchEnd)();
    })
    .runOnJS(__DEV__);

hope this is helpful to others