search

software-mansion / react-native-gesture-handler

Declarative API exposing platform native touch and gesture system to React Native.
https://docs.swmansion.com/react-native-gesture-handler/
MIT License
6.11k stars 980 forks source link

Android Overlays with Wix React Native Navigation swallow touch events #1321

Closed gp3gp3gp3 closed 3 weeks ago

gp3gp3gp3 commented 3 years ago

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

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

mrousavy commented 3 years ago

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 commented 3 years ago

@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 commented 3 years ago

hi @gp3gp3gp3 any solution?

srfaytkn commented 3 years ago

any solutions?

gp3gp3gp3 commented 3 years ago

@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 commented 3 years ago

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

MANTENN commented 2 years ago

@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 commented 1 year ago

any solutions?

j-piasecki commented 3 weeks ago

If this is still a problem, please open a new issue with a self-contained reproducer using the newest versions of dependencies.