Android Overlays with Wix React Native Navigation swallow touch events

[gp3gp3gp3]

Description

When using React Native Gesture Handler with Overlays in the Wix React Native Navigation library, background touch events are swallowed up by the gestureHandlerRootHOC component when positioning with flex.

In our repo we are manually moving the overlay using margin instead, and calculating that margin height has been extremely complicated while accounting for android soft heights and safe areas. Not to mention blocking using animations for the layout of the overlay container, but the HOC is required for some touch events animating inside the overlay.

Screenshots

Steps To Reproduce

1. Open example code linked below on Android.
2. Click header image to open overlay. See interceptTouchOutside value correctly passed to overlay option here
3. Notice background events are not responding and the user cannot scroll
4. Remove the gestureHandlerRootHOC from the const Overlay on line 8.
5. Notice touch events work again.

Expected behavior

Touch events to work with overlays positioned using flex

Actual behavior

Touch events are not registering

Snack or minimal code example

https://github.com/gp3gp3gp3/rnnSandbox

Package versions

• React: 16.13.1
• React Native: 0.63.4
• React Native Gesture Handler: 1.9.0
• React Native Navigation: 7.8.4

Thanks for all the great work you do at software-mansion. I hope you can help me resolve this issue.

[mrousavy]

gestureHandlerRootHoC has a second argument for style, which is { flex: 1 } per default. You want to manually override the flex with { flex: undefined } and let the child (the page itself) render absolute sizes (height, width instead of flexbox system).

[gp3gp3gp3]

@mrousavy Positioning via absolute position and margin and direct heights does not help me. I am looking to use the HOC with flex layouts, since this is supported on iOS, and positioning it similar to flex-end layout with android soft heights discrepancies per phone is not sustainable.

[tnghia944]

hi @gp3gp3gp3 any solution?

[srfaytkn]

any solutions?

[gp3gp3gp3]

@tnghia944 @srfaytkn Unfortunately no, and with the latest update to reanimated 2, this has become enough of a problem that we've decided to pull out the wix navigation library and re-write it with react-navigation. This is just one of many issues we've had trying to use Wix's navigation.

[phuongwd]

@gp3gp3gp3 it may help you, for refer there https://github.com/software-mansion/react-native-gesture-handler/pull/822/files

[MANTENN]

@tnghia944 @srfaytkn Unfortunately no, and with the latest update to reanimated 2, this has become enough of a problem that we've decided to pull out the wix navigation library and re-write it with react-navigation. This is just one of many issues we've had trying to use Wix's navigation.

Im not using react navigation from wix but am encountering a similar problem with absolute positioned views. The events don't get triggered.

[erennyuksell]

any solutions?