6.2.0 breaks gestures in other components that use PanResponder

[efstathiosntonas]

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:

Screen.Recording.2023-03-29.at.12.17.44.mov

With version 6.2.0:

Screen.Recording.2023-03-29.at.12.22.25.mov

Reproducible Demo

[efstathiosntonas]

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

[intergalacticspacehighway]

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

[efstathiosntonas]

@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]

@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]

@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]

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]

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]

Any updates here?

[mhammerc]

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]

Somehow it worked :)

[marygarciapepperstone]

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.