Error raised by FlingGestureHandler (react-native-gesture-handler)

[carbonatedcoder]

Update + Fix

To maintainers: The component in src/lib/StackItem.tsx needs to be wrapped with GestureHandlerRootView from react-native-gesture-handler. Reference.

Other users: It seems you can temporarily resolve this issue by either locally patching the library (using something like yarn patch) or, likely easier, import and wrap your entire App component with:

<GestureHandlerRootView style={{ flex: 1 }}>
    <App />
</GestureHandlerRootView>

---

Original Post

There appears to be an issue with react-native-modalfy's usage of FlingGestureHandler from within react-native-gesture-handler. As soon as a modal is opened, an error occurs and the app crashes. In case it matters, this is a managed project via Expo. This behavior was only seen after upgrading from react-native-gesture-handler 2.9.0 to 2.12.1.

Error: Error: FlingGestureHandler must be used as a descendant of GestureHandlerRootView. Otherwise the gestures will not be recognized. See https://docs.swmansion.com/react-native-gesture-handler/docs/installation for more details.

The error location trace specifically mentions that the error is located: in FlingGestureHandler (created by StackItem)

The error is being encountered with project packages on these versions:

• react: 18.2.0, react-native: 0.72.4, react-native-modalfy: 3.5.2, react-native-gesture-handler: 2.12.1

This error was not seen with with project packages on these versions:

• react: 18.2.0, react-native: 0.71.8, react-native-modalfy: 3.5.2, react-native-gesture-handler: 2.9.0

[CharlesMangwa]

@carbonatedcoder hi! as you've mentioned in your update, you need to use GestureHandlerRootView. but as mentioned in the docs: that's being done either by a library or by yourself at your app entry point.

that's why modalfy has always opted for letting you add it yourself in case you didn't have a library that did it. since GestureHandlerRootView is simply View, you may have styles or methods you'd like to pass to it.

[carbonatedcoder]

@CharlesMangwa thanks for your reply! Perhaps it would be a good idea to specifically callout this additional step in the react-native-modalfy installation instructions? After looking into the issue a bit more, I've seen other libraries mention adding the GestureHandlerRootView as a required step.

The react-native-gesture-handler docs do mention: "If you're using gesture handler in your component library, you may want to wrap your library's code in the GestureHandlerRootView component. This will avoid extra configuration for the user."

Given that modalfy has opted for the user to add it themselves, and it is required for modalfy to work, it's probably helpful to mention in the installation steps.

[CharlesMangwa]

@carbonatedcoder sure thing! and indeed, libraries like reanimated do mention this step is needed from the user.

my mistake! i was certain we did mention it in our docs as well but that was not indeed not the case, the installation guide has been updated to reflect that now.

thanks again for the feedback and i hope modalfy is being of some assistance in whatever you're building!