Conflicts when nesting PagerView inside of Material Top/Bottom Tab navigator

[ConorEB]

Environment

• Using Expo Router V2
• Using React Navigation Material Top Tabs

Description

I have a vertical view pager nested inside of a material top tab screen. The vertical view pager works perfectly fine, however, I am no longer able to swipe horizontally across screens.

The nested ViewPager within the screen seems to hog all the swipe events and prevents me from swiping horizontally between screens of my navigator, which I believe is built on top of react-native-pager-view as well.

Ideally, the screen would register vertical swiping for my nested ViewPager and horizontal swiping for my navigator. Is there some way to allow my nested ViewPager to register just vertical swipes and pass through horizontal swipes to the parent?

[samiullah452]

Did you find any solution?

[ConorEB]

Unfortunately not

[sant3001]

I'm facing the same issue. Please help 🙏🏻

[samiullah452]

@sant3001 are you facing issue of black screen or not able to move? Also what version are you using? I was able to fix this using a patch which basically enable nested scroll. Let me know how I can help you

[sant3001]

@samiullah452 I was using version 6.3.3 and that version does not allow panning gestures in iOS for the bottom sheet I'm using. So I'm not able to close the bottom sheet if the PagerView is displayed inside that bottom sheet.

Then I reverted to version 6.1.4 and that fixed it for iOS. Then in Android I'm able to close the bottom sheet but I'm not able to navigate to the other pages.

So no matter what version I'm in it seems to conflict between vertical and horizontal panning gestures.

What version are you using? Can you please provide the patch you mentioned?

Thanks in advance.

[samiullah452]

@sant3001 I was using pager view v6.2.0 and fix I mentioned is #734
This basically enabled me to swipe between tabs and also enabled vertical scrolling. Yours might be a different problem. Have you tried using the next version on IOS?

[sant3001]

Thanks @samiullah452 I got tired of dealing with these version issues and patches, so I just used a basic implementation similar to what @hewad-mubariz did in their implementation of Wiggling cards (without the wiggling animations): https://github.com/hewad-mubariz/reactnative-50-days/blob/main/wiggling-cards/src/components/WigglingCards.tsx#L65

[samiullah452]

@sant3001 glad you found a way around.

[troZee]

Could you check, if this PR #933 resolves this issue? Thank you 🙏