6.8.1 property scrollEnabled allows for swiping on iOS

[karkakol]

Environment

IOS react-native: "0.79.5" expo: "53.0.19" react-native-pager-view: "6.8.1"

Description

On iOS setting parameter scrollEnables={false} allows to scroll by swiping through pager. Not sure is it regression

Reproducible Demo

Link to repro: https://github.com/karkakol/bug-rn-pager-scroll-enabled-repro/blob/main/app/_layout.tsx

[karkakol]

Current workaround for this problem using rn-gesture-handler: https://github.com/karkakol/bug-rn-pager-scroll-enabled-repro/blob/main/components/workaround.tsx

[obrad97]

+1

[leecuong666]

+1

[karkakol]

It is a regression, another workaround is to downgrade to 6.8.0

[hql362502]

+1

[TwistedMinda]

Personnally i've just patched the file to add setScrollEnabled(false) since i'm using react-native-tab-view which is the one calling react-native-pager-view, so the workaround was too much changes compared to that one-liner, also unsure of the potential edge-cases that could arise using blocksExternalGesture()

diff --git a/src/PagerView.tsx b/src/PagerView.tsx
index 5238f1d1bcc7f87f906bc12b4ea92a461c84d0d9..a73cd6a8cd47741a03f54453c206d510a60f4bc9 100644
--- a/src/PagerView.tsx
+++ b/src/PagerView.tsx
@@ -154,6 +154,7 @@ export class PagerView extends React.Component<NativeProps> {
           {...this.props}
           ref={(ref) => {
             this.pagerView = ref;
+            this.setScrollEnabled(false);
           }}
           style={this.props.style}
           layoutDirection={this.deducedLayoutDirection}

Note: its a yarn patch

By the way, the problem is still present in 7.0.0

[dodgex]

I slightly adapted the change from TwistedMinda's patch to allow enable/disable certain pagers with the initial prop. I have not tested if it still works when changing the prop during runtime, but the patch should not change that behaviour from the original implementation.

• react-native-pager-view+7.0.0.patch (npx patch-package)

diff --git a/node_modules/react-native-pager-view/src/PagerView.tsx b/node_modules/react-native-pager-view/src/PagerView.tsx
index 5238f1d..a5d397e 100644
--- a/node_modules/react-native-pager-view/src/PagerView.tsx
+++ b/node_modules/react-native-pager-view/src/PagerView.tsx
@@ -154,6 +154,7 @@ export class PagerView extends React.Component<NativeProps> {
           {...this.props}
           ref={(ref) => {
             this.pagerView = ref;
+            this.setScrollEnabled(this.props.scrollEnabled);
           }}
           style={this.props.style}
           layoutDirection={this.deducedLayoutDirection}

[rithik-raja]

Facing this issue as well

[LuanNguyen-HnL]

Any update on this?

[GeorgeHop]

+1

[focux]

If you are using the new arch, this has been fixed on the alpha version (v7), old arch support has been dropped on that version as well.

[AyoParadis]

If you are using the new arch, this has been fixed on the alpha version (v7), old arch support has been dropped on that version as well.

which alpha version there are several. Are you saying we still have this issue on v7.0.0 (non alpha) https://www.npmjs.com/package/react-native-pager-view/v/7.0.0

Edit:

https://www.npmjs.com/package/react-native-pager-view/v/7.1.0-alpha.2 solved the issue

[RomanSytnyk]

It’s ridiculous. How can this critical issue still be unresolved after so many months?

There should already be a hotfix for both 6.X and 7.X.

[clementnv]

You can use "react-native-pager-view": "7.1.0-alpha.2", it's fixed

[AyoParadis]

Any timeline on when the fix will be merged to the main branch?

[ZainaliSyed]

@clementnv Thank you for sharing ,

"react-native-pager-view": "7.1.0-alpha.2" Fixed

[okwasniewski]

Fixed in latest stable release