React-native-pager-view: "RNCViewPager" was not found in the UIManager. [RN 0.61.2] [Android]

[mistikk]

Bug

Environment info

react-native: 0.61.2
react-native-viewpager: 2.0.1

[ferrannp]

For what I see you are using https://github.com/ptomasroos/react-native-scrollable-tab-view. See https://github.com/ptomasroos/react-native-scrollable-tab-view/blob/master/index.js#L13. ViewPagerAndroid is not part of react-native core anymore. You should open an issue to that repo and ask to update the library to use https://github.com/react-native-community/react-native-viewpager instead.

[mistikk]

@ferrannp I am not using ptomasroos/react-native-scrollable-tab-view. I forked and updated with react-native-community/react-native-viewpager.
You can see forked repo https://github.com/esteemapp/react-native-scrollable-tab-view

[ferrannp]

If you create a new app with react-native init, does the viewpager here works for you?

[baleo-it]

@mistikk RN > 0.60, you need to do

cd ios
pod install --repo-update

[mistikk]

@baleo-it i already run pod install

[ferrannp]

Can you provide a repository to reproduce your issue?

[superandrew213]

@ferrannp here is the repo https://github.com/superandrew213/viewpagertest.

This uses the latest version of react-native-scrollable-tab-view from github which uses @react-native-community/viewpager

https://github.com/ptomasroos/react-native-scrollable-tab-view/commits/master

[ferrannp]

@superandrew213 if you install @react-native-community/viewpager it works. I think the problem is in https://github.com/ptomasroos/react-native-scrollable-tab-view/blob/master/package.json#L27-L29. Can you try and add @react-native-community/viewpager as peerDependency ?

[superandrew213]

@ferrannp I can confirm that it works if you install @react-native-community/viewpager.

@react-native-community/viewpager has been added as a dependency to react-native-scrollable-tab-view. Why add it as a peer dependency?

[ferrannp]

Ok maybe you just have to document it. The same as with react-navigation, that is documented you need to install react-native-gesture-handler, react-native-reanimated with it.

[superandrew213]

@ferrannp @react-native-community/viewpager should be working even if it has been added as a dependency. This is probably a linking issue?

[Domtry]

Any solution proposal did not solve my problem

this is my package.js config

"dependencies": {
"react": "16.9.0",
"react-native": "0.61.4",
"react-native-elements": "^1.2.7",
"react-native-input-scroll-view": "^1.9.5",
"react-native-navigation": "^3.5.1",
"react-native-scrollable-tab-view": "^1.0.0",
"react-native-vector-icons": "^6.6.0"
},
"devDependencies": {
"@babel/core": "7.7.2",
"@babel/runtime": "7.7.2",
"@react-native-community/eslint-config": "0.0.5",
"babel-jest": "24.9.0",
"jest": "24.9.0",
"metro-react-native-babel-preset": "0.56.3",
"react-test-renderer": "16.9.0"
},
"jest": {
"preset": "react-native"
}
}

[jakajacky]

i have the same error, RN = 0.60.5, Platform = iOS/Android
And fixed by Manual linking guide, both iOS,Android work fine.

1. npm i @react-native-community/viewpager
2. on iOS, adding this to your Podfile:
   pod 'react-native-viewpager', :path => '../node_modules/@react-native-community/viewpager'
   then
   cd ios
pod install
3. on Android, make the following changes:
   

   android/settings.gradle

include ':@react-native-community_viewpager'
project(':@react-native-community_viewpager').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/viewpager/android')

android/app/build.gradle

dependencies {
   ...
   implementation project(':@react-native-community_viewpager')
}

android/app/src/main/.../MainApplication.java

On top, where imports are:

import com.reactnativecommunity.viewpager.RNCViewPagerPackage;

Add the RNCViewPagerPackage class to your list of exported packages.

@Override
protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
    new MainReactPackage(),
    new RNCViewPagerPackage()
  );

[igorbrandao]

Any solution for those using a non ejected expo app?

[sytolk]

I have the same issue on Android (iOS works) RN 0.60.6
dependencies:
"react-native-best-viewpager": "^1.0.4", -> https://github.com/abbasmoosavi/react-native-best-viewpager/blob/master/package.json#L39
"@react-native-community/viewpager": "^3.3.0", <- adding this line in my project package.json fix this issue
Maybe this issue is yarn related ??

[DrFlink]

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.

[UnnikrishnanBhargavakurup]

Still facing the same issue in android any idea how to fix this?

[olkunmustafa]

i have the same error, RN = 0.60.5, Platform = iOS/Android
And fixed by Manual linking guide, both iOS,Android work fine.

1. npm i @react-native-community/viewpager
2. on iOS, adding this to your Podfile:
   pod 'react-native-viewpager', :path => '../node_modules/@react-native-community/viewpager'
   then
   cd ios
pod install
3. on Android, make the following changes:

android/settings.gradle

include ':@react-native-community_viewpager'
project(':@react-native-community_viewpager').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/viewpager/android')

android/app/build.gradle

dependencies {
   ...
   implementation project(':@react-native-community_viewpager')
}

android/app/src/main/.../MainApplication.java

On top, where imports are:

import com.reactnativecommunity.viewpager.RNCViewPagerPackage;

Add the RNCViewPagerPackage class to your list of exported packages.

@Override
protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
    new MainReactPackage(),
    new RNCViewPagerPackage()
  );

It is the solution.

[tiagobbraga]

Modification in the last step using with RN 0.63.2 and React 16.13.1

Instead of

@Override
protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
    new MainReactPackage(),
    new RNCViewPagerPackage()
  );

this

protected List<ReactPackage> getPackages() {
          @SuppressWarnings("UnnecessaryLocalVariable")
          List<ReactPackage> packages = new PackageList(this).getPackages();
          packages.add(new RNCViewPagerPackage());
          return packages;
        }

i have the same error, RN = 0.60.5, Platform = iOS/Android
And fixed by Manual linking guide, both iOS,Android work fine.

1. npm i @react-native-community/viewpager
2. on iOS, adding this to your Podfile:
   pod 'react-native-viewpager', :path => '../node_modules/@react-native-community/viewpager'
   then
   cd ios
pod install
3. on Android, make the following changes:

android/settings.gradle

include ':@react-native-community_viewpager'
project(':@react-native-community_viewpager').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/viewpager/android')

android/app/build.gradle

dependencies {
   ...
   implementation project(':@react-native-community_viewpager')
}

android/app/src/main/.../MainApplication.java

On top, where imports are:

import com.reactnativecommunity.viewpager.RNCViewPagerPackage;

Add the RNCViewPagerPackage class to your list of exported packages.

@Override
protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
    new MainReactPackage(),
    new RNCViewPagerPackage()
  );

[biomancer]

In my case just adding @react-native-community/viewpager explicitly to dependencies in package.json of my project solved the issue, no manual linking was required after that (RN 0.64.0), same as https://github.com/callstack/react-native-pager-view/issues/72#issuecomment-546274086

[kevinblu]

new RNCViewPagerPackage()

It really worked!!!!!! Thank you 3000!

Little tips: if you use DefaultHardwareBackBtnHandler interface to init your reactActivity, you might need to add RNCViewPagerPackage like this
mReactInstanceManager = ReactInstanceManager.builder() .setApplication(getActivity().getApplication()) ......... .addPackage(new RNCViewPagerPackage()) ....... .build();

[troZee]

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

This worked for me. React Native version 0.64.2

You are using wrong package name. Please use this commend yarn add react-native-pager-view. You don't need to link this library, bc cli has autolinking module.