Unable to use swipe gesture to back on `TabView` scenes

[mtflud]

Current behavior

React Navigation's navigation swipe gestures are not being recognized inside the TabView scene content, but they are being properly recognized inside the TabBar itself.

Because of this, users are unable to use the "swipe back" gesture commonly used on iOS.

Everything seems to be working normally on v2.16.0

Expected behavior

Users should be able to swipe from left to right if on the first tab in order to navigate to the previous screen while on a TabView scene

Reproduction

https://github.com/mtflud/react-native-tab-view-swipe-back-repro

Platform

• [ ] Android
• [X] iOS
• [ ] Web
• [ ] Windows
• [ ] MacOS

Environment

package	version
react-native-tab-view	3.1.1
react-native-pager-view	5.4.7
react-native	0.64.2
expo	n/a
node	14.17.3
npm or yarn	1.22.11
react-navigation	6

[github-actions[bot]]

Hey! Thanks for opening the issue. The issue doesn't seem to contain a link to a repro (a snack.expo.dev link or link to a GitHub repo under your username).

Can you provide a minimal repro which demonstrates the issue? A repro will help us debug the issue faster. Please try to keep the repro as small as possible and make sure that we can run it without additional setup.

[github-actions[bot]]

Couldn't find version numbers for the following packages in the issue:

• expo

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• react-native (found: 0.64.2, latest: 0.66.1)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[JoniVR]

Can confirm that this is an issue, same here. Happens since React Navigation 6 upgrade.

Version	Package
react-native-pager-view	5.4.8
react-native-tab-view	3.1.1
@react-navigation/material-top-tabs	6.0.6
react-native	0.66.1

[JoniVR]

FYI, downgrading react-native-tab-view to v2.16.0 seems to resolve the issue for now (probably related to https://github.com/react-navigation/react-navigation/issues/10083), for those who are running into the same issue...

[RajeshSFS]

Hi Everyone,

I am using the top material tab bar, and one tab contains a stack navigator, like: Category Screen -> Sub-Category screen -> Details page

When I goes to Sub-category or Details screen, then iOS swipe back is not working. Everything working fine in Android. Also tried @JoniVR solution, it is also not working.

From package.json "react-native-tab-view": "^3.1.1" "react": "17.0.2" "react-native": "0.66.4" "react-native-pager-view": "^5.4.9" "@react-navigation/drawer": "^6.1.8" "@react-navigation/material-top-tabs": "^6.0.6" "@react-navigation/native": "^6.0.6" "@react-navigation/native-stack": "^6.2.5"

Ant other suggestions to fix this?

[hirbod]

I can confirm this. While I try to swipe gesture back, I just receive "Sending onAnimatedValueUpdate with no listeners registered.

[JoniVR]

@RajeshSFS Have you done a pod install after removing your Podfile.lock and Pods folder? You need to clean and reinstall pods for this iirc.

[RajeshSFS]

Yes @JoniVR I tried removing podfile.lock and Pods folder. Even also tried removing node_modules folder.

~~There are little change, before I am getting this warning Sending onAnimatedValueUpdate with no listeners registered on swipe. But now this warning is not coming.~~

This warning Sending onAnimatedValueUpdate with no listeners registered on swipe, is still coming some times.

[achuinard]

Try using the regular, non-native stack navigator. I think it’ll return the swipe gesture, but I’m unsure of other pros / cons on using native vs. non-native.

[nateguy]

Any updates on this bug?

[bintoll]

Also face this issue

[itsramiel]

same here. can not swipe back when inside stack navigator

[itsramiel]

FYI, downgrading react-native-tab-view to v2.16.0 seems to resolve the issue for now (probably related to react-navigation/react-navigation#10083), for those who are running into the same issue...

Downgrading works, but I really hope it can be improved in further releases. I dont want to stay at an old version

[intergalacticspacehighway]

Created a PR in pager view. I think it should fix this issue since it uses pager-view under the hood. Can someone please verify? https://github.com/callstack/react-native-pager-view/pull/500

[giangpro93]

I tested it and it doesn't seem to work.

[adelbeke]

Any updates about that ?

[itsramiel]

@intergalacticspacehighway still can not swipe back

[intergalacticspacehighway]

@ramiel1999 updating pager view to 5.4.24 fixes the issue in @mtflud repo. Also created the PR in original repro here. https://github.com/mtflud/react-native-tab-view-swipe-back-repro/pull/1

https://user-images.githubusercontent.com/23293248/173184580-d3d62194-a752-4b3a-b46d-d3feaaad5309.mov

@mtflud can you please confirm?

@ramiel1999 Are you using expo? If yes, updating pager-view might not work as it uses the previous version. You can switch to expo dev client if you have to use new version. Are you using fullScreenSwipeEnabled in Screens? It won't work with that.

[itsramiel]

I am using expo-dev-client, but I am using stack instead of native-stack which doesnt seem to work. I can confirm that native-stack does work but not stack

[okwasniewski]

After upgrading to expo v46 and react-native-pager-view to 5.4.24 issue is solved. Here is a snack: https://snack.expo.dev/TGFrSAyUkq

[IngyuTae]

After upgrading to expo v46 and react-native-pager-view to 5.4.24 issue is solved. Here is a snack: https://snack.expo.dev/TGFrSAyUkq

Are you using @react-navigation/stack or @react-navigation/native-stack?

[mikefogg]

@IngyuTae I'm seeing the same issue and using @react-navigation/stack.