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.