search

callstack / react-native-pager-view

React Native wrapper for the Android ViewPager and iOS UIPageViewController.
MIT License
2.74k stars 420 forks source link

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

Open ConorEB opened 1 year ago

ConorEB commented 1 year ago

Environment

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 commented 1 year ago

Did you find any solution?

ConorEB commented 1 year ago

Unfortunately not

sant3001 commented 3 months ago

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

samiullah452 commented 3 months ago

@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 commented 3 months ago

@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 commented 3 months ago

@sant3001 I was using pager view v6.2.0 and fix I mentioned is https://github.com/callstack/react-native-pager-view/pull/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 commented 3 months ago

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 commented 3 months ago

@sant3001 glad you found a way around.