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

[zmnv]

• [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 react-native-scrollable-tab-view@1.0.0

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/viewpager@2.0.0 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.

[nabilfreeman]

Hi, I just ran npm install --save @react-native-community/viewpager and it autolinked.

I also made sure that my react-native-scrollable-tab-view version is the latest commit on master (not npm).

"@react-native-community/viewpager": "4.0.0",
"react-native-scrollable-tab-view": "github:ptomasroos/react-native-scrollable-tab-view#510111adce035a54ecb1b5f77b78e3bfaf513260",

To confirm... no manual steps required!! 🎉

Edit: I spoke too soon, this breaks iOS so I had to add this to my postinstall script:

RN_VIEWPAGER_FILE="./node_modules/@react-native-community/viewpager/react-native-viewpager.podspec"

if [ -e $RN_VIEWPAGER_FILE ]; then
    echo "Patching @react-native-community/viewpager to not autolink (we only want this peer dep on Android)"
    rm -rf $RN_VIEWPAGER_FILE
fi

So now... 1) react-native-scrollable-tab-view adds @react-native-community/viewpager@3.3 2) @react-native-community/viewpager@4 installed from package.json 3) viewpager 4 autolinks to Android, not to iOS

Everything works.

I think the ideal would be to remove viewpager as a dep from this library and instead have it as a required peer dependency.

[nabilfreeman]

Last update... I downgraded my version of @react-native-community/viewpager to 3.3 (matches the master branch of this repo) and now everything is playing nicely. Removed the postinstall steps above.

[deot]

package.json

"resolutions": {
    "@react-native-community/viewpager": "^4.0.0"
},

Android > 60.0, check file: android/app/build/generated/rncli/src/main/java/com/facebook/react/PackageList.java

  public ArrayList<ReactPackage> getPackages() {
    return new ArrayList<>(Arrays.<ReactPackage>asList(
      // ...
      new RNCViewPagerPackage()
    ));
  }

link

[simotw]

This worked for me.

This issue is caused by the wrong dependency version, and it's fixed in the commit 510111adce035a54ecb1b5f77b78e3bfaf513260, but not officially released. To install the specific commit version instead of the official released one, run

RN v0.61

yarn add react-native-scrollable-tab-view@https://github.com/ptomasroos/react-native-scrollable-tab-view#510111adce035a54ecb1b5f77b78e3bfaf513260

RN v0.62

yarn add react-native-scrollable-tab-view@https://github.com/ptomasroos/react-native-scrollable-tab-view#1371236e91c217e2f42468e355419f83410e3133

[heyixing]

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

This worked for me

it's also worked for me ,thanks!

[brambang]

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

im using Expo SDK 34 ejected, RN 0.59 when i installed viewpager the folder is @react-native-community/viewpager/ not inside react-native-scrollable-tab-view.

[brambang]

for Expo SDK 34 ejected, RN 0.59 installed viewpager version 2.0.2 solved the problem maybe the problem is in version 3.0.0 they were update to Android X.

[bobananto24]

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

run the command "react-native run-android" or "react-native run-ios" instead of "react-native start"

[hungdev]

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"

Thank u, those versions worked for me

[andresribeiro]

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

It worked with React Native version 0.64.2. Thanks!

[douglassoldan]

@react-native-community/viewpager is deprecated!

npm i react-native-pager-view
cd ios
pod install
cd ..

run projetc!

Works here! ;-)

[deepakkathuria]

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

2. npx react-native run-android
3. npx react-native start

[zchuhui]

@react-native-community/viewpager is deprecated!

npm i react-native-pager-view
cd ios
pod install
cd ..

run projetc!

Works here! ;-)

thanks bro!!!!

[Hudson-AmalembaL]

Make sure to

     clear the node_modules
     make a fresh install 

then

npm install  react-native-pager-view 
npm install react-native-tab-view

Restart the server

That worked for me