Does not work within a ScrollView

[diegowendel]

Environment

Set up a project and copy the snippet available below.

Description

PagerView component does not work when inside of a ScrollView.

Code Snippet

import React from 'react';
import { ScrollView, StyleSheet, View, Text } from 'react-native';
import PagerView from 'react-native-pager-view';

const MyPager = () => {
  return (
    <ScrollView>
      <PagerView style={styles.pagerView} initialPage={0}>
        <View key="1">
          <Text>First page</Text>
        </View>
        <View key="2">
          <Text>Second page</Text>
        </View>
      </PagerView>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  pagerView: {
    flex: 1,
  },
});

export default MyPager;

[marceloch2]

@diegowendel diegowende
Fala Diego :).
This helped me to make it work.
#722

[diegowendel]

Thanks @marceloch2! Got it working with a version change as well 👍

[plugato]

Obrigado! Consegui que funcionasse com uma mudança de versão também 👍

what you version ?

[marceloch2]

Hi @plugato Mine is "react-native-pager-view": "7.0.0-rc.0". Hope that's helps.

[puelocesar]

@marceloch2 @diegowendel When I update to 7.0.0-rc.1, I get the following error:

error: node_modules/react-native-pager-view/src/PagerViewNativeComponent/PagerViewNativeComponent.ts: /Users/pcferreira/Projects/knapp/SupervisorConsole/node_modules/react-native-pager-view/src/PagerViewNativeComponent/PagerViewNativeComponent.ts: Native commands must be exported with the name 'Commands'

Do you know what could be wrong on my setup? I'm using RN v0.73.3

[tiagomelilo]

@marceloch2 @diegowendel When I update to 7.0.0-rc.1, I get the following error:

error: node_modules/react-native-pager-view/src/PagerViewNativeComponent/PagerViewNativeComponent.ts: /Users/pcferreira/Projects/knapp/SupervisorConsole/node_modules/react-native-pager-view/src/PagerViewNativeComponent/PagerViewNativeComponent.ts: Native commands must be exported with the name 'Commands'

Do you know what could be wrong on my setup? I'm using RN v0.73.3

+1

any solution?

[troZee]

Could you please check this example https://github.com/callstack/react-native-pager-view/blob/master/example/src/ScrollablePagerViewExample.tsx , if does not work as well?

[AgustinMJ]

Could you please check this example https://github.com/callstack/react-native-pager-view/blob/master/example/src/ScrollablePagerViewExample.tsx , if does not work as well?

I tried it and couldn't get it to work in an iOS. I must say that I copied the example into a custom playground with [email protected] and [email protected] since I didn't want to clone the whole repo (I have very limited storage😖). I also simplified it a little bit.

I got the following errors:

1: When using the useLegacy prop I got this error: requireNativeComponent: "LEGACY_RNCViewPager was not found in the UIManager."

2: When removing the useLegacy prop, the example renders but the ScrollView won't scroll when touching the PagerView (see video)

Screen.Recording.2024-04-04.at.12.11.23.mov

[leethree]

@marceloch2 @diegowendel When I update to 7.0.0-rc.1, I get the following error:

error: node_modules/react-native-pager-view/src/PagerViewNativeComponent/PagerViewNativeComponent.ts: /Users/pcferreira/Projects/knapp/SupervisorConsole/node_modules/react-native-pager-view/src/PagerViewNativeComponent/PagerViewNativeComponent.ts: Native commands must be exported with the name 'Commands'

Do you know what could be wrong on my setup? I'm using RN v0.73.3

Got the same issue. Solved by manually patching the export names:

diff --git a/node_modules/react-native-pager-view/src/LEGACY_PagerViewNativeComponent/LEGACY_PagerViewNativeComponent.ts b/node_modules/react-native-pager-view/src/LEGACY_PagerViewNativeComponent/LEGACY_PagerViewNativeComponent.ts
index 4770da9..326fe5f 100644
--- a/node_modules/react-native-pager-view/src/LEGACY_PagerViewNativeComponent/LEGACY_PagerViewNativeComponent.ts
+++ b/node_modules/react-native-pager-view/src/LEGACY_PagerViewNativeComponent/LEGACY_PagerViewNativeComponent.ts
@@ -67,7 +67,7 @@ interface NativeCommands {
   ) => void;
 }
 
-export const LEGACY_PagerViewNativeCommands: NativeCommands =
+export const Commands: NativeCommands =
   codegenNativeCommands<NativeCommands>({
     supportedCommands: [
       'setPage',
diff --git a/node_modules/react-native-pager-view/src/PagerView.tsx b/node_modules/react-native-pager-view/src/PagerView.tsx
index d2bfec5..5e44bcc 100644
--- a/node_modules/react-native-pager-view/src/PagerView.tsx
+++ b/node_modules/react-native-pager-view/src/PagerView.tsx
@@ -9,7 +9,7 @@ import {
 } from './utils';
 
 import PagerViewNativeComponent, {
-  PagerViewNativeCommands,
+  Commands as PagerViewNativeCommands,
   OnPageScrollEventData,
   OnPageScrollStateChangedEventData,
   OnPageSelectedEventData,
@@ -17,7 +17,7 @@ import PagerViewNativeComponent, {
 } from './PagerViewNativeComponent/PagerViewNativeComponent';
 
 import LEGACY_PagerViewNativeComponent, {
-  LEGACY_PagerViewNativeCommands,
+  Commands as LEGACY_PagerViewNativeCommands,
 } from './LEGACY_PagerViewNativeComponent/LEGACY_PagerViewNativeComponent';
 
 /**
diff --git a/node_modules/react-native-pager-view/src/PagerViewNativeComponent/PagerViewNativeComponent.ts b/node_modules/react-native-pager-view/src/PagerViewNativeComponent/PagerViewNativeComponent.ts
index 9017e53..7d520b0 100644
--- a/node_modules/react-native-pager-view/src/PagerViewNativeComponent/PagerViewNativeComponent.ts
+++ b/node_modules/react-native-pager-view/src/PagerViewNativeComponent/PagerViewNativeComponent.ts
@@ -56,7 +56,7 @@ export interface NativeCommands {
   ) => void;
 }
 
-export const PagerViewNativeCommands: NativeCommands =
+export const Commands: NativeCommands =
   codegenNativeCommands<NativeCommands>({
     supportedCommands: [
       'setPage',

[troZee]

@leethree
Thank you for providing a fix for that. Would you mind making a PR 🙏

[leethree]

@troZee sure! here it is: #818

[troZee]

Thank you @leethree so much ❤️ Once pipeline pass, I will merge it

[adrian539859]

Could you please check this example https://github.com/callstack/react-native-pager-view/blob/master/example/src/ScrollablePagerViewExample.tsx , if does not work as well?

I tried it and couldn't get it to work in an iOS. I must say that I copied the example into a custom playground with [email protected] and [email protected] since I didn't want to clone the whole repo (I have very limited storage😖). I also simplified it a little bit.

I got the following errors:

1: When using the useLegacy prop I got this error: requireNativeComponent: "LEGACY_RNCViewPager was not found in the UIManager."

2: When removing the useLegacy prop, the example renders but the ScrollView won't scroll when touching the PagerView (see video)

Screen.Recording.2024-04-04.at.12.11.23.mov

Did you solve this? I'm facing it too.

[troZee]

@Kamill90 will take a look at it in his free time 💪

[psdewar]

Could you please check this example https://github.com/callstack/react-native-pager-view/blob/master/example/src/ScrollablePagerViewExample.tsx , if does not work as well?

I tried it and couldn't get it to work in an iOS. I must say that I copied the example into a custom playground with [email protected] and [email protected] since I didn't want to clone the whole repo (I have very limited storage😖). I also simplified it a little bit.

I got the following errors:

1: When using the useLegacy prop I got this error: requireNativeComponent: "LEGACY_RNCViewPager was not found in the UIManager."

2: When removing the useLegacy prop, the example renders but the ScrollView won't scroll when touching the PagerView (see video)

Screen.Recording.2024-04-04.at.12.11.23.mov

@AgustinMJ I'm still seeing the same invariant violation as of 6.3.1. Did you end up patching?

[jatin-bhuva]

The scrolling issue persists in the latest Expo SDK 51 while running the app via Expo Go.

[jorgezerpa]

The issue still continuous on SDK51 running on Expo Go for IOS (for Android works perfect), but, I notice something strage. If you scroll from up above the Pager component, and before the scrolls stops you swipe again over the Pager Component, it will work so the vertical scroll works.

[Cbridger-mywellabee]

Running 7.0.0-rc.2 with the above patch by @leethree applied seemed to fix both issues for me:

• not being able to scroll when touch interaction lands anywhere inside pager
• pager not being able to handle dynamically sized views and instead has a height of 0

I know the patch was included for 6.3.1 but it would be good to at least get a new rc with the patch applied

[Dat-Mobile]

@troZee sure! here it is: #818

I'm not getting this fix in 7.0.0-rc2 @troZee , reverted back to 7.0.0.rc0 it works as expected

[Cbridger-mywellabee]

As a follow up, even though running 7.0.0-rc.2 + provided patch fixed the two bugs I mentioned, it also introduced a bug, any pressables inside the scrollview were not able to be interacted with. So I ended up having to not use this at all and redesign my screens.

[shedworth]

I experienced this issue after upgrading from Expo 50 to 51 and can confirm that 7.0.0-rc.2 with the patch provided by @leethree fixes it. However, for me it breaks @react-navigation/material-top-tabs versions 6 and 7, making it impossible to scroll a FlatList inside a tab.

7.0.0-rc.0 (and remembering to rebuild the dev client!) successfully solves the scrolling issue without breaking React Navigation.

[FezVrasta]

In my case I tried with 6.5.0 on SDK 51 but it didn't even render the pager view. When I upgraded to 7.0.0-rc.2 it failed because of the wrong export names, I applied @leethree patch, now it renders correctly but the vertical scroll only works if I tap on a part of the scroll view that is not the pager view (in my case I have a header and the pager view inside a scroll view, tapping on the header and starting the scroll works).

Taps inside the pager view content work and the horizontal scroll works too, but vertical scroll doesn't.

Can also confirm that if I start the scroll from the header and then quickly continue from the pager view content while inertia is still going, it works. So it looks like pager view is intercepting and preventing the vertical scroll events.

rc.0 has the same issues of rc.2 but doesn't require the patch.

For anyone interested, I managed to make my layout work using this: computerjazz/react-native-infinite-pager#20 (comment)

[MrRefactor]

Closing as per: https://github.com/callstack/react-native-pager-view/releases/tag/v6.6.0

Please create separated issue for 6.6.0 version.