Search code examples
react-nativereact-navigation-v5react-navigation-stackreact-navigation-v6react-native-gesture-handler

react-navigation 6 swipe from top to bottom closes current stack screen android 9

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:

first image when drag started

second drag image

See attached video: https://drive.google.com/file/d/1Xt08w7S-bFXcOMx01WAzHGwLvLLwAl7e/view

Solution

  • 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 from react-native-gesture-handler library instead of react-native.