React-native-gesture-handler: Gesture handler conflicted with other modules such as react-navigation

[tikkichan4]

In react-navigation, it provides a swipe to left gesture.
Also, i am using PanGestureHandler / DrawerLayout which provided by react-native-gesture-handler to make a right side menu (Because it is customizable rather than the drawer provided in react-navigation)

For my use case, i am turning the responding distance to full width for easier triggering in both component.

There is a conflict that when i opened the drawer and try to swipe to close the drawer, the swipe to left gesture from react-navigation will be triggered at the same time (Actually i don't want to trigger the gesture from react-navigation).

Any workaround to solve this ? I tried to use redux to map the state in react-navigation, so the swipe to left gesture will not be trigger when the drawer is being opened. It works but it causes the drawer animation laggy.

[kmagiera]

Hey @tikkichan4 thanks for reaching out!
What is that react-navigation use left swipe for?

[tikkichan4]

Sorry for pressing the wrong button to close the issue.

@kmagiera it is used for pop the current scene and go back to the previous scene.
The gesture is usually enabled for IOS user in my app since they don't have other convenient way to go back (Android user can press hardware back button). So it is a must to solving this issue for me. Hope the information helps. Thanks a lot !

[martsie]

Having the same issue unfortunately - even when PanGestureHandler is disabled native gesture handlers that are in child views are blocked

taking this back - by default react-navigation disabled back swipe gestures on Android stack navigators which is what confused me

[pyankoff]

What's the best way to disable left-right swipe direction in Swipable? Having conflict with react-navigation swipe to go back gesture too.

[yalopov]

anyone got a workaround for this?

[filiptdz]

I don't know how much customisation you need, but you can customize the react-navigation drawer with the contentComponent prop, as such:
const DrawerNavigation = createDrawerNavigator( { /* navigators setup */ }, { contentComponent: Drawer, }, );

[donni106]

I also cannot swipe back on iOS in components using react-native-gesture-handler, in detail react-native-largelist.

I will try to give it a marginLeft of 1. Maybe than the swipe trigger "under" the problematic component.

Edit: Yes, with marginLeft: Platform.OS === 'ios' ? 1 : 0 the "swipe back" is working. Not 100%, but better than nothing. So this could be a dirty hack for others also.

[LeviDeng]

I just added hitSlop={{ left: -20 }} property to the PanGestureHandler, works fine for me

[brentvatne]

going to close this, if someone wants to share a reproducible example in a new issue that'd be excellent.