callstack / react-native-pager-view

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

6.2.0 breaks gestures in other components that use PanResponder #713

Open efstathiosntonas opened 1 year ago

efstathiosntonas commented 1 year ago

Environment

Description

After upgrading to 6.2.0 it broke pan gesture handler in other components eg. sortable/draggable lists. I have no clue how it's possible as I've never encountered such a thing before but downgrading to 6.1.4 the drag and drop worked as it should. The draggable list is this one: https://github.com/SHISME/react-native-draggable-grid and it's using PanResponder from react-native.

deps:

"resolutions": {
    "react-native-pager-view": "6.2.0",
  },
  "dependencies": {
    "react-native-gesture-handler": "^2.9.0",
    "react-native": "0.71.4",
    "react-native-reanimated": "^3.0.2",
    "@react-navigation/bottom-tabs": "^6.5.7",
    "@react-navigation/core": "^6.4.8",
    "@react-navigation/elements": "^1.3.17",
    "@react-navigation/native": "^6.1.6",
    "@react-navigation/native-stack": "^6.9.12",
    "@react-navigation/stack": "^6.3.16",
    "react-native-pager-view": "6.2.0"
}

With version 6.1.4:

https://user-images.githubusercontent.com/717975/228487658-18e5f152-f9f9-4add-a0d7-b7c3c772480b.mov

With version 6.2.0:

https://user-images.githubusercontent.com/717975/228488935-75a06e04-8190-4c30-a30b-10bacf7fc019.mov

Reproducible Demo

efstathiosntonas commented 1 year ago

After using this fork of the draggable list that uses react-native-gesture-handler instead of PanResponder the issue went away. 🤔

intergalacticspacehighway commented 1 year ago

@efstathiosntonas are you also using fullScreenGestureEnabled from react-navigation? can you please share a minimal reproducible repo?

efstathiosntonas commented 1 year ago

@intergalacticspacehighway no, i'm not using this prop.

I've tried reproducing it but I couldn't. Maybe my app has something different than the minimal, I really can't tell. I'll stick to 6.1.x for now.

Here's the repo: https://github.com/efstathiosntonas/react-native-pager-view-bug

intergalacticspacehighway commented 1 year ago

@efstathiosntonas thanks for the repo. I managed to repro the issue. Not sure why but the draggable library is overriding onShouldBlockNativeResponder and returning false. If you remove the override (or return true here), it fixes the issue. It only happens in 6.2.0, because we're adding a pan gesture on native side for better compat with react navigation's fullScreenSwipeEnabled. We could revert the change, but I am not sure why the method is overriden 🤔. cc - @troZee fyi this won't be an issue in scroll view implementation because we're not adding any additional recognizers.

efstathiosntonas commented 1 year ago

@intergalacticspacehighway thanks for confirming, glad you managed to reproduce it. I believe we’re hitting an edge case here and it might not worth it. This library is quite old and it should be using rngh 2.x.

efstathiosntonas commented 1 year ago

At least add a note on readme to beware of onShouldBlockNatiVeResponder if it’s being used in other areas of the app.

I also think that the draggable lib has this code there for no reason and it’s a leftover.

efstathiosntonas commented 1 year ago

after installing react-native-pager-view@7.0.0-rc.0 it worked just fine.

@intergalacticspacehighway is 7.0.0-rc.0 safe to use in production?

StrauneanuDimitri commented 1 year ago

Any updates here?

mhammerc commented 1 year ago

after installing react-native-pager-view@7.0.0-rc.0 it worked just fine.

@intergalacticspacehighway is 7.0.0-rc.0 safe to use in production?

7.0.0-rc.0 fixed it for me too.

atultiwaree commented 10 months ago

Somehow it worked :)

marygarciapepperstone commented 4 months ago

Hello, any updates here? We tried updating the version to 6.3.1 because we encountered an issue in top tab navigation when RTL is enabled for Arabic language. It was fixed however it broke a swiping action that we have using Gesture.Pan. Upon investigation, the attempt to swipe a row for example triggers the following: onTouchesDown then onTouchesCancelled, the onChange is not triggered.

But the tricky part is that the issue only happens on a component inside a top tab navigation but not with other component which isn't wrapped with top tab.

I tried checking out the latest version which is 6.3.3 and the pre-release version 7.0.0-rc.0 but the issue still persists. For now, downgrading to 6.1.4 fixes the issue.

markbrowniiPeppersone commented 4 days ago

Hello, just wanted to check if pre-release version 7.0.0-rc.0 is going to be merged into a release version anytime soon? I saw that you released 6.5.0 8 hours ago but that release doesn’t include this code and it would be great to have it to fix this issue.