I have upgraded from react-navigation 5 to 6:
- "@react-navigation/bottom-tabs": "^5.10.6",
- "@react-navigation/material-top-tabs": "^5.3.15",
- "@react-navigation/native": "^5.8.6",
- "@react-navigation/routers": "^5.6.0",
- "@react-navigation/stack": "^5.12.3",
- "react-native-gesture-handler": "1.10.3",
NEW DEPS:
+ "react-native-gesture-handler": "^2.7.0",
+ "@react-navigation/bottom-tabs": "^6.2.4",
+ "@react-navigation/material-top-tabs": "^6.3.0",
+ "@react-navigation/native": "^6.0.13",
+ "@react-navigation/routers": "^6.1.3",
+ "@react-navigation/stack": "5.14.9",
After the upgrade I noticed that on Android 8 and 9 some stack screens have some strage feature of closing current screen with swipe from top to bottom.
Adding gestureEnabled: false
as navigator or screen option doesn’t seem to have any effect.
Screenshots with close on swipe top to bottom:
See attached video:
https://drive.google.com/file/d/1Xt08w7S-bFXcOMx01WAzHGwLvLLwAl7e/view
2
Answers
In my case the root navigator had
gestureEnabled: true
and for some reason the nested stack navigators could not overwrite that value on Android 8 and 9.I had to set that to
false
in the root stack navigator to make it work for nested navigators too.Note: there are multiple issues reported in github related to how that property works for Android. Some people applied as an workaround a huge swipe threshold.
Take a look at the content of the stack screens that has issues.
Check if the view is using a
ScrollView
component.If it is, try to use the
ScrollView
fromreact-native-gesture-handler
library instead of react-native.