Enable gesture on navigator avoid to scroll horizontally on sub screen scrollview

[TomCorvus]

Current behavior

On a sub screen, when I enable gestureEnabled on Navigator, I can't scroll on a horizontal ScrollView.

• Swiping right to left does nothing
• Swiping left to right on whole area ScrollView goes to the previous screen, but this same gesture don't do this on View, just only at the very left on the View (Normal)

This problem occurs only on Android.

Expected behavior

Get the same behavior of View.
Can scroll on horizontal ScrollView and go to the previous screen if I swipe to the very left of the screen.

Reproduction

https://github.com/TomCorvus/RNavigationScroll.git

Platform

• Android
• iOS
• Web
• Windows
• MacOS

Packages

• @react-navigation/​bottom-tabs
• @react-navigation/​drawer
• @react-navigation/​material-bottom-tabs
• @react-navigation/​material-top-tabs
• @react-navigation/​stack
• @react-navigation/​native-stack

Environment

• I've removed the packages that I don't use

package	version
@react-navigation/native	^6.0.13
@react-navigation/material-top-tabs	^6.2.4
@react-navigation/stack	^6.3.1
react-native-safe-area-context	^4.4.1
react-native-screens	^3.17.0
react-native-gesture-handler	^2.6.2
react-native-tab-view	^3.1.1
react-native-pager-view	^6.0.0
react-native	0.70.1
node	v16.16.0
npm or yarn	1.22.10

[Emptyuu]

I had the same problem

[oskargotte]

I had a similar problem. I fixed the scrolling by using another ScrollView -
import { ScrollView } from 'react-native-gesture-handler'
However, without any other actions, you'd lose the ability to navigate back by swiping left to right.

[fizhy37]

I have this same issue, but I'm using gestureDirection: 'vertical' and a FlatList instead of ScrollView. Also only happening on Android.

[vadamk]

It is really important for me

[TomCorvus]

@vadamk did you try oskargotte solution?

[nikolal]

All StackNavigator modals suffer from this issue on Android.

1. If gestureEnabled={true} --> Swiping down will close the modal but the ScrollView doesn't scroll.

2. if gestureEnabled={false} --> ScrollView works but you cannot swipe down to close the modal.

3. if import { ScrollView } from 'react-native-gesture-handler' --> ScrollView works but you cannot swipe down to close the modal even with gestureEnabled={true}. It seems that this import completely overwrites gestureEnabled prop.

I upgraded everything to latest versions:

  "react-native": "0.71.6",
  "@react-navigation/bottom-tabs": "^6.5.7",
  "@react-navigation/native": "^6.1.6",
  "@react-navigation/native-stack": "^6.9.12",
  "@react-navigation/stack": "^6.3.16",
  "react-native-screens": "^3.20.0",
  "react-native-safe-area-context": "^4.5.0",
  "react-native-gesture-handler": "^2.9.0",

[IcyHarka]

This worked for me:
import { ScrollView, FlatList } from 'react-native-gesture-handler'
After i used the scrollview / flatlist from 'react-native-gesture-handler' i had no problems with scrolls within the gestureEnabled={true}

[jtvargas]

Any updates?

All StackNavigator modals suffer from this issue on Android.

1. If gestureEnabled={true} --> Swiping down will close the modal but the ScrollView doesn't scroll.
2. if gestureEnabled={false} --> ScrollView works but you cannot swipe down to close the modal.
3. if import { ScrollView } from 'react-native-gesture-handler' --> ScrollView works but you cannot swipe down to close the modal even with gestureEnabled={true}. It seems that this import completely overwrites gestureEnabled prop.

I upgraded everything to latest versions:

  "react-native": "0.71.6",
  "@react-navigation/bottom-tabs": "^6.5.7",
  "@react-navigation/native": "^6.1.6",
  "@react-navigation/native-stack": "^6.9.12",
  "@react-navigation/stack": "^6.3.16",
  "react-native-screens": "^3.20.0",
  "react-native-safe-area-context": "^4.5.0",
  "react-native-gesture-handler": "^2.9.0",

I have the same issue

[JuEunSung]

I was facing the same problem

Apply the code below

The dependent module react-native-tab-view has been modified.

node_modules/react-native-tab-view/src/TabView.tsx

before
import { Pager } from './Pager';

after
import { PanResponderAdapter as Pager } from './PanResponderAdapter';

node_modules/react-native-tab-view/src/PanResponderAdapter.tsx

before
const DEAD_ZONE = 12;

after
const DEAD_ZONE = 100;

if necessary, use patch-package

[seba1342]

I have this same issue, but I'm using gestureDirection: 'vertical' and a FlatList instead of ScrollView. Also only happening on Android.

@fizhy37 I have found the following patch to somewhat fix this issue on Android:

diff --git a/node_modules/@react-navigation/stack/src/views/Stack/Card.tsx b/node_modules/@react-navigation/stack/src/views/Stack/Card.tsx
index 64a551e..70908f2 100755
--- a/node_modules/@react-navigation/stack/src/views/Stack/Card.tsx
+++ b/node_modules/@react-navigation/stack/src/views/Stack/Card.tsx
@@ -391,13 +391,15 @@ export default class Card extends React.Component<Props> {
 
     if (gestureDirection === 'vertical') {
       return {
+        activeOffsetY: Platform.OS === 'android' ? [-50, 50] : undefined,
         maxDeltaX: 15,
         minOffsetY: 5,
         hitSlop: { bottom: -layout.height + distance },
         enableTrackpadTwoFingerGesture,
-      };
+      }
     } else if (gestureDirection === 'vertical-inverted') {
       return {
+        activeOffsetY: Platform.OS === 'android' ? [-50, 50] : undefined,
         maxDeltaX: 15,
         minOffsetY: -5,
         hitSlop: { top: -layout.height + distance },

You can use patch-package to fix this

[bloggerklik]

Did you find a solution?

[talal-tilted]

Hello did someone find a solution ? I am use gestureEnabled: true with gestureDirection: 'vertical', I tried using ScrollView from gesture-handler also but not working even on ios