ERROR Invariant Violation: requireNativeComponent: "RNCViewPager" was not found in the UIManager.

[hpardess]

Current behavior

<TabView
            navigationState={{ index, routes }}
            renderScene={renderScene}
            onIndexChange={setIndex}
            initialLayout={{ width: layout.width }}
            renderTabBar={props => (
                <TabBar
                    {...props}
                    indicatorStyle={{ backgroundColor: '#2497F3', }}
                    tabStyle={{ width: layout.width / 3, }}
                    scrollEnabled={true}
                    style={{ backgroundColor: 'white' }}
                    renderLabel={({ route, focused, color }) => (
                        <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
                            <Text style={{ ...Fonts.blackRegular, marginRight: 5.0 }}>
                                {route.title}
                            </Text>
                            <View style={{
                                width: 24.0, height: 24.0, borderRadius: 12.5, backgroundColor: Colors.primary,
                                alignItems: 'center', justifyContent: 'center'
                            }}>

                                {route.title == 'Active' ?
                                    <Text style={{ ...Fonts.whiteRegular }}>{activeDataList.length}</Text> :
                                    route.title == 'Past' ?
                                        <Text style={{ ...Fonts.whiteRegular }}>{pastDataList.length}</Text> :
                                        <Text style={{ ...Fonts.whiteRegular }}>{cancelledDataList.length}</Text>
                                }
                            </View>
                        </View>
                    )}
                />
            )}
    />

Expected behavior

it should display tab view but it fails with error

Reproduction

https://github.com/hpardess/ClinicApp

Platform

• Android
• iOS
• Web
• Windows
• MacOS

Environment

package	version
react-native-tab-view	^3.1.1
react-native-pager-view	^5.4.9
react-native	0.66.4
node	16.13.0
npm	8.1.0

[github-actions]

Couldn't find version numbers for the following packages in the issue:

• react-native-pager-view

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

[likeSo]

Did you install react-native-pager-view? I think you should provide your package.json also

[alalfakawma]

This also happens to me when using eas dev client on an expo project. Even after installing pager view with expo install react-native-pager-view, it throws that error.

[ElfenLiedGH]

@hpardess fix it after install and linking react-native-pager-view

npm i -S react-native-pager-view@next
react-native link react-native-pager-view

it looks like autolinking does not work

[daniel]

I'm getting the same error with Expo 43 (managed workflow) when running in dev client on iOS device, but not in the simulator.

package	version
react-native-tab-view	3.1.1
react-native-pager-view	5.4.6
react-native	0.64.3
expo	43.0.0
node	16.13.0
npm or yarn	1.22.17

[liucf]

got same issue for expo 44..

[RubenPM-dev]

Still getting this issue on both, Android and iOS on a bare workflow, any updates on this bug?

Thanks

[bimix]

@hpardess fix it after install and linking react-native-pager-view

npm i -S react-native-pager-view@next react-native link react-native-pager-view

it looks like autolinking does not work

did it really work?

[alalfakawma]

I'm using bare workflow using expo prebuild and eas-cli and it works, all I needed to do was compile the project with the development profile.

eas build --profile development --platform ios

And installed the development apk on my emulator and it works.

[bimix]

I'm using bare workflow using expo prebuild and eas-cli and it works, all I needed to do was compile the project with the development profile.

eas build --profile development --platform ios

And installed the development apk on my emulator and it works.

Worked for me thanks. I am just having an issue with exporting the navigator. So I have a Stack navigator where I am nesting also a Drawer navigator and now I want to do the same with Tab navigator. It fails and says something about not exporting/importing components properly.

...
function navigation() {
   return (
      <NavigationContainer>
        <Stack.Navigator
           ...
            <Stack.Screen name="incoming_outgoing" component={GetTabButtons} /> 
         </Stack.Navigator>
       </NavigationContainer>     
   );
}

function GetTabButtons() {
   const Tab = createMaterialTopTabNavigator();
   return (
      <Tab.Navigator>
         <Tab.Screen name="IncomingOutgoing" component={IncomingOutgoing} />
         <Tab.Screen name="IncomingOutgoingEmpty" component={IncomingOutgoingEmpty} />
      </Tab.Navigator>
   );
}

export default navigation;

[alalfakawma]

I'm using bare workflow using expo prebuild and eas-cli and it works, all I needed to do was compile the project with the development profile.

eas build --profile development --platform ios

And installed the development apk on my emulator and it works.

Worked for me thanks. I am just having an issue with exporting the navigator. So I have a Stack navigator where I am nesting also a Drawer navigator and now I want to do the same with Tab navigator. It fails and says something about not exporting/importing components properly.

...
function navigation() {
   return (
      <NavigationContainer>
        <Stack.Navigator
           ...
            <Stack.Screen name="incoming_outgoing" component={GetTabButtons} /> 
         </Stack.Navigator>
       </NavigationContainer>     
   );
}

function GetTabButtons() {
   const Tab = createMaterialTopTabNavigator();
   return (
      <Tab.Navigator>
         <Tab.Screen name="IncomingOutgoing" component={IncomingOutgoing} />
         <Tab.Screen name="IncomingOutgoingEmpty" component={IncomingOutgoingEmpty} />
      </Tab.Navigator>
   );
}

export default navigation;

Looks like you're not closing your <Stack.Navigator> tag properly there? Otherwise I don't see any problem with the code you've posted above, it also could be coming from other screen components like IncomingOutgoing, etc. Be sure to check if you missed something in them.

IIRC: The exporting/importing issue crops up only when you have some errors in your JSX.

[bimix]

<Stack.Navigator>

If I place IncomingOutgoing screen as stack navigator it navigates correctly. There are no syntax errors on that screen. When I try to use tabs it fails.

[alalfakawma]

<Stack.Navigator>

If I place IncomingOutgoing screen as stack navigator it navigates correctly. There are no syntax errors on that screen. When I try to use tabs it fails.

Sounds really weird if you have no syntax errors in the rest of the file. But as it is failing, there has to be something missing or out of place somewhere.

[bimix]

<Stack.Navigator>

If I place IncomingOutgoing screen as stack navigator it navigates correctly. There are no syntax errors on that screen. When I try to use tabs it fails.

Sounds really weird if you have no syntax errors in the rest of the file. But as it is failing, there has to be something missing or out of place somewhere.

I have heard others complaining about some versions of the tab package and stack package.

[adamplenti]

@hpardess fix it after install and linking react-native-pager-view
npm i -S react-native-pager-view@next react-native link react-native-pager-view
it looks like autolinking does not work

did it really work?

not for me

[tiste]

Also have the same issue in production with eas, with all updated packages (expo 45, tab-view 3.1.1, react-native 0.68.2, node 16.13.0).
Using the simulator is fine, but when I install it from app store, it crashes with this error.

[alex-fournier]

I am facing the same issue only in the built app, not in Expo Go.

• Expo SDK 45 (managed workflow)
• Android Standalone App
• react-native 0.68.2
• react-native-tab-view 3.1.1
• react-native-pager-view 5.4.15
• yarn 1.22.18

I don't know how to fix this, it is very blocking for us.

UPDATE : I found a fix. The Tabs are provided by a third part library which has the two dependencies react-native-tab-view and react-native-pager-view. If I add these packages in the final app, the error is gone.

[okwasniewski]

Closing this since @alex-fournier posted a fix.

[harurang]

If I add these packages in the final app, the error is gone.

I have both react-native-tab-view and react-native-pager-view added as dependencies and am still getting this issue.
I am using expo 45

[okwasniewski]

If I add these packages in the final app, the error is gone.

I have both react-native-tab-view and react-native-pager-view added as dependencies and am still getting this issue. I am using expo 45

@harurang Which versions are you using?

[harurang]

If I add these packages in the final app, the error is gone.

I have both react-native-tab-view and react-native-pager-view added as dependencies and am still getting this issue. I am using expo 45

@harurang Which versions are you using?

"react-native": "0.68.2"
"react-native-tab-view": "^3.1.1"
"react-native-pager-view": "5.4.15"
"expo": "^45.0.0"

The app is on a managed version of expo .

The app will run fine locally and locally in production mode, but once I try to use it in a remote environment it crashes.

Looking at a few potentially related issues: https://github.com/callstack/react-native-pager-view/issues?q=Invariant+Violation+is%3Aclosed+

[okwasniewski]

@harurang Can you test it using react-native-pager-view version: 5.4.25?

[harurang]

@harurang Can you test it using react-native-pager-view version: 5.4.25?

Thanks for the suggestion. It's still crashing on 5.4.25 unfortunately

[harurang]

By downgrading to 2.16.0 for react-native-tab-view I was able to prevent the app from crashing.
Ref: #1277

[okwasniewski]

@harurang That's because v2.16.0 is not using react-native-pager-view (it was using reanimated back then). It might be the case that you need to upgrade to expo sdk v46, to resolve this issue.

[Dimasprog]

yarn/npm start --reset-cache
uninstall the app from the device
yarn/npm ios/android