Tried to register two views with the same name RNCViewPager

[xgAnd]

• [y ] I have searched existing issues

• [y ] I am using the latest scrollable tab view version

  I upgrade myProject react-native version from 0.58.6 to 0.61.3 get the error Tried to register two views with the same name RNCViewPager

Steps to Reproduce

according to the react-native method to upgrade.And use this module in the latest version "react-native-scrollable-tab-view": "^1.0.0",when I start my service use npm start I get the error Tried to register two views with the same name RNCViewPager I guese the error is from this.if you have some ideas please tell me,thanks a lot.

Expected Behavior

Write what you thought would happen. hode run without error.

[nicolaspavlotsky]

You ever got a solution for this?

[xgAnd]

You ever got a solution for this?

hello. i find the solution for this.i guess you maybe use @ant-design/react-native 3.2.0 or use some third module it contians react-native-viewpager.but this version is different.And then can not compatibled.like @ant-design/react-native 3.2.0 it use react-native-viewpager version is 1.1.7 and this module use version is 2.0.1.so get the error Tried to register two views with the same name RNCViewPager.if you use @ant-design/react-native also you can use the 3.1.15 version or you can try the method they provided. [https://github.com/ant-design/ant-design-mobile-rn/issues/697] if not you should check you package.json.which look at use react-native-viewpager.😂 hope this can help for you.

[yuanbolin]

Have you found the solution

[xgAnd]

Have you found the solution

this error reason is two module use different @react-native-community/viewpager version. you should make the two module use the same. ant-design/react-native 3.2.0 use version is 1.1.7 you can add this in your package.json and yarn again. "resolutions": { "@react-native-community/viewpager": "^2.0.1" }

this code can upgrade the version to 2.xx if another is use this version.

if not work. i guess maybe the another module use the @react-native-community/viewpager version is 3.xx you should use this module version which use version is 2.xx . hope this can help for you.

[mohammad-goldast]

Same problem

[xiaoosnggao]

@xgAnd
I have some problems here

1.Add the following to package.json in the root directory of my project:

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

2.perform yarn

3.performnpm run android

The following error appears

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

This error is located at:
    in RNCViewPager (at ViewPager.js:150)
    in ViewPager (at createAnimatedComponent.js:151)
    in AnimatedComponent (at react-native-scrollable-tab-view/index.js:253)
    in RCTView (at react-native-scrollable-tab-view/index.js:396)
    in ScrollableTabView (at Mall.js:154)
    in RCTView (at Mall.js:65)
    in Mall (created by ConnectFunction)
    in ConnectFunction (at navigationStore.js:441)
    in StatelessWrapped (at SceneView.js:9)
    in SceneView (at StackViewLayout.tsx:889)
    in RCTView (at StackViewLayout.tsx:888)
    in RCTView (at StackViewLayout.tsx:887)
    in RCTView (at createAnimatedComponent.js:151)
    in AnimatedComponent (at StackViewCard.tsx:106)
    in RCTView (at createAnimatedComponent.js:151)
    in AnimatedComponent (at screens.native.js:101)
    in Screen (at StackViewCard.tsx:93)
    in Card (at createPointerEventsContainer.tsx:95)
    in Container (at StackViewLayout.tsx:975)
    in RCTView (at screens.native.js:132)
    in ScreenContainer (at StackViewLayout.tsx:384)
    in RCTView (at createAnimatedComponent.js:151)
    in AnimatedComponent (at StackViewLayout.tsx:374)
    in PanGestureHandler (at StackViewLayout.tsx:367)
    in StackViewLayout (at withOrientation.js:30)
    in withOrientation (at StackView.tsx:104)
    in RCTView (at Transitioner.tsx:267)
    in Transitioner (at StackView.tsx:41)
    in StackView (at createNavigator.js:80)
    in Navigator (at createKeyboardAwareNavigator.js:12)
    in KeyboardAwareNavigator (at SceneView.js:9)
    in SceneView (at createTabNavigator.tsx:67)
    in RCTView (at ResourceSavingScene.tsx:37)
    in RCTView (at ResourceSavingScene.tsx:26)
    in ResourceSavingScene (at createBottomTabNavigator.tsx:157)
    in RCTView (at screens.native.js:132)
    in ScreenContainer (at createBottomTabNavigator.tsx:147)
    in RCTView (at createBottomTabNavigator.tsx:146)
    in TabNavigationView (at createTabNavigator.tsx:228)
    in NavigationView (at createNavigator.js:80)
    in Navigator (at SceneView.js:9)
    in SceneView (at StackViewLayout.tsx:889)
    in RCTView (at StackViewLayout.tsx:888)
    in RCTView (at StackViewLayout.tsx:887)
    in RCTView (at createAnimatedComponent.js:151)
    in AnimatedComponent (at StackViewCard.tsx:106)
    in RCTView (at createAnimatedComponent.js:151)
    in AnimatedComponent (at screens.native.js:101)
    in Screen (at StackViewCard.tsx:93)
    in Card (at createPointerEventsContainer.tsx:95)
    in Container (at StackViewLayout.tsx:975)
    in RCTView (at screens.native.js:132)
    in ScreenContainer (at StackViewLayout.tsx:384)
    in RCTView (at createAnimatedComponent.js:151)
    in AnimatedComponent (at StackViewLayout.tsx:374)
    in PanGestureHandler (at StackViewLayout.tsx:367)
    in StackViewLayout (at withOrientation.js:30)
    in withOrientation (at StackView.tsx:104)
    in RCTView (at Transitioner.tsx:267)
    in Transitioner (at StackView.tsx:41)
    in StackView (at createNavigator.js:80)
    in Navigator (at createKeyboardAwareNavigator.js:12)
    in KeyboardAwareNavigator (at SceneView.js:9)
    in SceneView (at StackViewLayout.tsx:889)
    in RCTView (at StackViewLayout.tsx:888)
    in RCTView (at StackViewLayout.tsx:887)
    in RCTView (at createAnimatedComponent.js:151)
    in AnimatedComponent (at StackViewCard.tsx:106)
    in RCTView (at createAnimatedComponent.js:151)
    in AnimatedComponent (at screens.native.js:101)
    in Screen (at StackViewCard.tsx:93)
    in Card (at createPointerEventsContainer.tsx:95)
    in Container (at StackViewLayout.tsx:975)
    in RCTView (at screens.native.js:132)
    in ScreenContainer (at StackViewLayout.tsx:384)
    in RCTView (at createAnimatedComponent.js:151)
    in AnimatedComponent (at StackViewLayout.tsx:374)
    in PanGestureHandler (at StackViewLayout.tsx:367)
    in StackViewLayout (at withOrientation.js:30)
    in withOrientation (at StackView.tsx:104)
    in RCTView (at Transitioner.tsx:267)
    in Transitioner (at StackView.tsx:41)
    in StackView (at createNavigator.js:80)
    in Navigator (at createKeyboardAwareNavigator.js:12)
    in KeyboardAwareNavigator (at LightboxRenderer.js:14)
    in RCTView (at LightboxRenderer.js:13)
    in _default (at createNavigator.js:80)
    in Navigator (at SceneView.js:9)
    in SceneView (at StackViewLayout.tsx:889)
    in RCTView (at StackViewLayout.tsx:888)
    in RCTView (at StackViewLayout.tsx:887)
    in RCTView (at createAnimatedComponent.js:151)
    in AnimatedComponent (at StackViewCard.tsx:106)
    in RCTView (at createAnimatedComponent.js:151)
    in AnimatedComponent (at screens.native.js:101)
    in Screen (at StackViewCard.tsx:93)
    in Card (at createPointerEventsContainer.tsx:95)
    in Container (at StackViewLayout.tsx:975)
    in RCTView (at screens.native.js:132)
    in ScreenContainer (at StackViewLayout.tsx:384)
    in RCTView (at createAnimatedComponent.js:151)
    in AnimatedComponent (at StackViewLayout.tsx:374)
    in PanGestureHandler (at StackViewLayout.tsx:367)
    in StackViewLayout (at withOrientation.js:30)
    in withOrientation (at StackView.tsx:104)
    in RCTView (at Transitioner.tsx:267)
    in Transitioner (at StackView.tsx:41)
    in StackView (at createNavigator.js:80)
    in Navigator (at createKeyboardAwareNavigator.js:12)
    in KeyboardAwareNavigator (at OverlayRenderer.js:22)
    in RCTView (at OverlayRenderer.js:21)
    in _default (at createNavigator.js:80)
    in Navigator (at createAppContainer.js:430)
    in NavigationContainer (at Router.js:97)
    in App (at Router.js:122)
    in Router (at App.js:131)
    in Provider (at App.js:128)
    in RCTView (created by Portal.Host)
    in Portal.Host (created by Provider)
    in ThemeProvider (created by Provider)
    in LocaleProvider (created by Provider)
    in Provider (at App.js:127)
    in App (at renderApplication.js:40)
    in RCTView (at AppContainer.js:101)
    in RCTView (at AppContainer.js:119)
    in AppContainer (at renderApplication.js:39)

[xiaoosnggao]

And my node_modules project/node_modules/@reaction-native-community/viewpager version number has changed to 2.0.2

[xgAnd]

And my node_modules project/node_modules/@reaction-native-community/viewpager version number has changed to 2.0.2 the error msg show not find.if you native version is low than 0.60 you can try

react-native link

in your project root file. if not low than 0.60 you can try close all and delete node_modules and yarn. try to download again. hope this can help for you.

[ShaneMatthias]

Thanks all! Downgrading to @react-native-community/viewpager: 2.0.2 worked for me!

[nikhiysham]

Have you found the solution

this error reason is two module use different @react-native-community/viewpager version. you should make the two module use the same. ant-design/react-native 3.2.0 use version is 1.1.7 you can add this in your package.json and yarn again. "resolutions": { "@react-native-community/viewpager": "^2.0.1" }

this code can upgrade the version to 2.xx if another is use this version.

if not work. i guess maybe the another module use the @react-native-community/viewpager version is 3.xx you should use this module version which use version is 2.xx . hope this can help for you.

help me so much.. Thanks

[nabilfreeman]

I also had this problem but could only solve it by removing react-native-community/viewpager as a top-level dependency. Not even setting the same version 2.0.2 worked.

I was using it for an image carousel in part of the app, so I styled this scrollable tab view plugin to also be usable for the carousel.

Pretty strange problem but happy I found this workaround.

[zmnv]

Any solutions?

[nabilfreeman]

@zmnv the only thing that worked for me was removing one of the conflicting deps. Try open the node_modules folder in Sublime or other text editor and search the entire directory for viewpager - see which modules are implementing different versions of it.

If all your deps implement the same version of viewpager this error will go away.

[zmnv]

@nabilfreeman yeah, but change something inside node_modules is very bad.

So, now I just use in package.json:

 "react-native-scrollable-tab-view": "git+https://github.com/ptomasroos/react-native-scrollable-tab-view.git",

until waiting new release

[oregano1201]

Hi I found solution to this.

Seems the npm package for the react-native-scrollable-tab-view also include node_modules folder where there is an exact copy of @react-native-community/viewpager.

Thus when you actually use other library that import '@react-native-community/viewpager' this will trigger the "Tried to register two views with the same name RNCViewPager" error message.

My quick kill solution is to delete the entire node_modules folder under react-native-scrollable-tab-view and it runs well. Of course this would not be permanent solution as whenever npm install get the package it will have that folder again and I need to delete it again.

I am thinking of copying the entire source code of react-native-scrollable-tab-view into my project source folder instead of importing it as external node_modules library. Thus I will be able to npm uninstall react-native-scrollable-tab-view. At least until a new version released without carrying the @react-native-community/viewpager inside its node_modules directory.

Cheers, Gerry

[JoaRiski]

Can someone elaborate why is the @react-native-community/viewpager module bundled in with this package in the first place? Wouldn't a more appropriate solution be to use dependencies?

[arlovip]

The same issue. Does someone know how to solve this?

[karanasthana]

Hey guys! Any updates on this?

[lexoops]

it's work for me. keep dependencies ,just add "resolutions": { "@react-native-community/viewpager": "^4.1.0" }, to root dir in package.json

[oki-reval]

check youre viewpager versions inside scrollable-tab-view and reinstall viewpager with same version inside scrollable-tab-view

[AtaMuhiuldin]

I tried using "resolutions" but didn't work for me then, I clone the repo and modified the ViewManger Name and it worked fine for me you may try it.

past following, to roo dir in package.json and run command yarn install "react-native-pager-view": "git://github.com/AtaMuhiuldin/react-native-view-pager.git"

[Moskaoud]

that woked for me use react-native-pager-view instead of @react-native-community/viewpager import PagerView from 'react-native-pager-view'; when search in library @react-native-community/viewpager RNCViewPager there is two library use same key constant