GestureHandlerRootView in Modal does not register touch events when the modal is used inside a Stack Navigator (Android Only)

[thomas-coldwell]

Current behavior

Currently, I have a modal that uses a PanGestureHandler within for my library expo-image-editor that let's users move a frame around to crop images. I have followed the guide to set this up from the RNGH docs https://docs.swmansion.com/react-native-gesture-handler/docs/#for-library-authors - wrapping the content of the modal in a <GestureHandlerRootView>, however, this does not register any touch events to the PanGestureHandler on Android (on iOS it's stated that this will just be evaluated as a <View> as per the docs).

I had a hunch it might have something to do with projects using my library using react-navigation as I know RNGH is a dep of it. I set up some test snacks to see if this was the case and it looks like the only difference is that it produces this behavior when wrapped in a Stack Navigator and works as expected without the Stack Navigator. See the below demos that showcase this behavior:

• WITH a Stack Navigator (current behavior): https://snack.expo.dev/@thomascoldwell/react-navigation---rngh-root-view-bug-android
• WITHOUT a Stack Navigator (expected behavior): https://snack.expo.dev/@thomascoldwell/react-navigation---rngh-root-view-bug-android---no-stack-navigator

Also the behavior is identical both in the managed and bare Expo workflow's following the installation steps for each as per the docs.

Expected behavior

The use of a <GestureHandlerRootView> inside a modal should pass gesture events to it's child RNGH components when using a Stack Navigator.

Reproduction

https://snack.expo.dev/@thomascoldwell/react-navigation---rngh-root-view-bug-android

Platform

• Android
• iOS
• Web
• Windows
• MacOS

Packages

• @react-navigation/bottom-tabs
• @react-navigation/drawer
• @react-navigation/material-bottom-tabs
• @react-navigation/material-top-tabs
• @react-navigation/stack

Environment

package	version
@react-navigation/native	5.9.4
@react-navigation/stack	5.14.5
react-native-safe-area-context	3.2.0
react-native-screens	3.4.0
react-native-gesture-handler	1.10.2
react-native-reanimated	2.2.0
react-native	(Expo SDK 42)
expo	42.0.0
node	12.22.1
yarn	1.22.10
@react-navigation/bottom-tabs	N/A
@react-navigation/drawer	N/A
@react-navigation/material-bottom-tabs	N/A
@react-navigation/material-top-tabs	N/A

[github-actions]

Couldn't find version numbers for the following packages in the issue:

• @react-navigation/bottom-tabs
• @react-navigation/drawer
• @react-navigation/material-bottom-tabs
• @react-navigation/material-top-tabs

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

[thomas-coldwell]

So it works fine if we use a stack modal as described in https://reactnavigation.org/docs/modal/ : https://snack.expo.dev/@thomascoldwell/react-navigation---rngh-root-view-bug-android---stack-modal

Can be worked around at least with this, but ideally would love to be able to launch it just from the built in RN modal. Will do some more digging and see if I can find a way for it work like that 😀

[thomas-coldwell]

Appears to be linked to this issue on RNGH and there seems to be a PR pending that likely resolves this:

• Doesn't work in a modal software-mansion/react-native-gesture-handler#139
• Render nested GestureHandlerRootView software-mansion/react-native-gesture-handler#1493

[thomas-coldwell]

Okay turns out using react-native-portalize from https://github.com/jeremybarbet/react-native-portalize fixes this! If you set a <Host /> as a wrapper for the whole app and then wherever you have a <Modal /> if you wrap this in a <Portal /> component and have anything involving RNGH inside the Modal wrapped in the <GestureHandlerRootView /> it will work perfectly! See the example below of this in action:

https://snack.expo.dev/@thomascoldwell/react-navigation---rngh-root-view-bug-android---portal-fix

[andresliu-mks]

Okay turns out using react-native-portalize from https://github.com/jeremybarbet/react-native-portalize fixes this! If you set a <Host /> as a wrapper for the whole app and then wherever you have a <Modal /> if you wrap this in a <Portal /> component and have anything involving RNGH inside the Modal wrapped in the <GestureHandlerRootView /> it will work perfectly! See the example below of this in action:

https://snack.expo.dev/@thomascoldwell/react-navigation---rngh-root-view-bug-android---portal-fix

As a side note: I used react-native-portal instead of react-native-portalize and this also works perfectly!

[satya164]

It happens because Stack Navigator already uses GestureHandlerRootView, and since there's a wrapper at root, this check prevents wrapping the modal again: https://github.com/software-mansion/react-native-gesture-handler/blob/297070cc80b078bfe7f10575400f8543f4d48162/src/GestureHandlerRootView.android.tsx#L17

Probably there needs to be prop to wrap it regardless, or maybe it should wrap regardless of parent. Please open an issue in gesture handler repo so that they can decide what to do here.

[github-actions]

Hey! This issue is closed and isn't watched by the core team. You are welcome to discuss the issue with others in this thread, but if you think this issue is still valid and needs to be tracked, please open a new issue with a repro.