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 expo@49.0.0 and react-native@0.72.6 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 expo@49.0.0 and react-native@0.72.6 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 💪

[psdewar2]

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 expo@49.0.0 and react-native@0.72.6 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?