Android: Invariant Violation requireNativeComponent: "RNCViewPager" was ton found in the UIManager

[zmnv]

trafficstars

• [x] I have searched existing issues
• [x] I am using the latest scrollable tab view version

I've just update react-native-scrollable-tab-view to 1.0.0 by yarn. But still have error.

Steps to Reproduce

yarn add [email protected]

import ScrollableTabView, { ScrollableTabBar } from 'react-native-scrollable-tab-view';
....
<ScrollableTabView
    style={{ marginTop: 0, marginBottom: 10, height: 50, flex: 0 }}
    onChangeTab={this...}
    initialPage={0}
    renderTabBar={() => (
        <ScrollableTabBar
            activeTextColor="..."
            inactiveTextColor="..."
            style={{
                ...
            }}
            tabsContainerStyle={{
                ...
            }}
            underlineStyle={{
                height: 2,
            ...
            }}
            tabStyle={{
                ...
            }}
            textStyle={{ fontSize: 12, fontWeight: 'normal' }}
        />
    )}
>
    {metrics.map(metricName => (
        <View
            key={metricName}
            tabLabel={metricName}
        >
            <Text>{metricName}</Text>
        </View>
    ))}
</ScrollableTabView>

Expected Behavior

Should work because I setup latest version of module. And in yarn.lock:

also ViewPager there is in node_modules:

Actual Behavior

Android

iOS All fine.

I've try

• Clean yarn cache
• Clean react native & metro cache
• rm -rf node_modules
• delete build folders

[zmnv]

I look at: /node_modules/react-native-scrollable-tab-view/index.js

Why do you use Animated.ScrollView for iOS and AnimatedViewPagerAndroid for Android? Can you use Animated.ScrollView for all?

also there are definitions which don't used

[zmnv]

temporary solution is just:

yarn add @react-native-community/viewpager

but I don't want to install that module direct into project :(

[ptomasroos]

I would love to have a PR on a scroll based solution of android. It’s there for historical reasons.

[haack]

I have the same issue on Android. Manually adding @react-native-community/viewpager didn't solve the problem for me.

[zunsakai]

same issue ...

[cereme]

I have same issue too

[vetrivendhan48]

temporary solution is just:

yarn add @react-native-community/viewpager

but I don't want to install that module direct into project :(

I guess there will be no issue in doing that I guess. npm will manage dependencies right? Is there will be any issue will come if you modify its dependencies? Please let me know. Thanks

[zmnv]

@vetrivendhan48 not a big deal actually, but.

But when you search in project directory @react-native-community/viewpager it's returns nothing. Then other developers thinks like 'oh, that dependency is not used in project so it unnecessary, I can delete it!'.

And build fails next time)))))))

also guys above says that solution didn't work. I don't know why. In my case it works.

[azamouchi]

yarn add @react-native-community/viewpager on it's own does not solve the issue, you need to link the package also using react-native link @react-native-community/viewpager

[w13808604]

same issue ..anybody solve it

[chenyanfei-m]

yarn add @react-native-community/viewpager react-native link @react-native-community/viewpager and rebuild, solve it ✨

[mastahed]

Any fix for expo 35 with RN 0.59? works well on IOS, android shows the same error. Tried link and manual installation of viewpager.

[kaiyes]

yarn add @react-native-community/viewpager react-native link @react-native-community/viewpager and rebuild and solve it

This worked for me

[xgAnd]

yarn add @react-native-community/viewpager react-native link @react-native-community/viewpager and rebuild and solve it

worked react-native version is 0.61.3

[winseyli]

yarn add @react-native-community/viewpager react-native link @react-native-community/viewpager and rebuild, solve it ✨

Thank you this works for me too. RN 0.61.4 (Seems like it is not necessary to link the package if there is autolinking for >=0.60)

[tivjoe]

react-native<0.59.0 yarn add @react-native-community/[email protected] react-native link @react-native-community/viewpager

[coderew]

this is not work for me, my react-native version is "react-native": "0.59.9"

[coderew]

I have the same issue on Android. Manually adding @react-native-community/viewpager didn't solve the problem for me.

have you solved this problem?

[Kailash23]

yarn add @react-native-community/viewpager react-native link @react-native-community/viewpager and rebuild, solve it ✨

It's working RN 0.61.5

[Miti063]

Same issue. Tired adding & linking @react-native-community/viewpager manually but still facing the same error. RN version 0.61.5.

[vetrivendhan48]

@zmnv , Thanks for your reply man :+1:

[ansarikhurshid786]

react-native link @react-native-community/viewpager

This resolve issue and working fine in ios but in android tab content is blank. does anyone face same issue?

[ansarikhurshid786]

I am not getting any error or warning but tab content is blank in android.

[bdent]

None of the above solutions working for me on RN 0.59.8.

Anyone manage to get a working solution?

[mustafaskyer]

installed viewpager, works for me, thanks @chenyanfei-m

"react-native-scrollable-tab-view": "^1.0.0",
"@react-native-community/viewpager": "^3.3.0",
"react-native": "^0.59.10"

[bdent]

Solved this issue on an Ejected Expo project, RN 0.59.8.

Instead of installing and linking @react-native-community/viewpager, you need to manually link the viewpager library with the already included version of the @react-native-community/viewpager library found in ./node_modules/react-native-scrollable-tab-view/node_modules/

Full path for linking is: ../node_modules/react-native-scrollable-tab-view/node_modules/@react-native-community/viewpager/android

[mmustafaozdemir]

yarn add @react-native-community/viewpager react-native link @react-native-community/viewpager and rebuild, solve it ✨

worked! react-native version is 0.61.0

[ptomasroos]

Thanks for sharing!

[claezon]

This worked for me:

RN-cli: 2.0.1 RN: 0.61.5

I tried linking the package, but that didn't help. I tried manual linking and saw that the RNCViewPagerPackage was missing in: android/app/src/main/java/com/[...]/MainApplication.java

I added the package (last line before return):

@Override protected List<ReactPackage> getPackages() { @SuppressWarnings("UnnecessaryLocalVariable") List<ReactPackage> packages = new PackageList(this).getPackages(); // Packages that cannot be autolinked yet can be added manually here, for example: // packages.add(new MyReactNativePackage()); packages.add(new RNCViewPagerPackage()); // <----- Here we go return packages; }

I emptied cache and ran: react-native run-android.

[DatNguyenCore]

i'm using RN 0.60.5 and i have this issue when using react-native-scrollable-tab-view version 1.0.0 then i had downgrade toreact-native-scrollable-tab-view version 0.10.0 the error is gone.