Tried to register two views with the same name RNCViewPager #1056

xgAnd · 2019-11-13T08:18:30Z

[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 · 2019-11-13T18:22:56Z

You ever got a solution for this?

xgAnd · 2019-11-18T11:59:29Z

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 · 2019-12-09T02:34:43Z

Have you found the solution

xgAnd · 2019-12-10T02:27:26Z

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 · 2019-12-19T17:27:42Z

Same problem

xiaoosnggao · 2020-01-16T03:05:37Z

@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 · 2020-01-16T03:46:03Z

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

xgAnd · 2020-01-17T01:28:25Z

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 · 2020-02-06T20:36:15Z

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

nikhiysham · 2020-02-17T03:01:36Z

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 · 2020-04-09T10:29:00Z

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 · 2020-04-27T14:59:29Z

Any solutions?

nabilfreeman · 2020-04-27T16:51:12Z

@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 · 2020-04-27T17:16:00Z

@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 · 2020-05-01T21:54:15Z

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 · 2020-07-18T05:52:49Z

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?

lchenfox · 2020-07-27T09:25:21Z

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

karanasthana · 2020-09-14T11:43:25Z

Hey guys!
Any updates on this?

lexoops · 2020-10-15T10:54:30Z

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 · 2021-02-28T18:26:30Z

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

AtaMuhiuldin · 2021-11-02T07:27:36Z

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 · 2023-02-02T19:31:43Z

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

yuanbolin mentioned this issue Dec 9, 2019

Invariant Violation: Tried to register two views with the same name RNCViewPager ant-design/ant-design-mobile-rn#713

Closed

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Tried to register two views with the same name RNCViewPager #1056

Tried to register two views with the same name RNCViewPager #1056

xgAnd commented Nov 13, 2019 •

edited

nicolaspavlotsky commented Nov 13, 2019

xgAnd commented Nov 18, 2019 •

edited

yuanbolin commented Dec 9, 2019

xgAnd commented Dec 10, 2019

mohammad-goldast commented Dec 19, 2019

xiaoosnggao commented Jan 16, 2020

xiaoosnggao commented Jan 16, 2020

xgAnd commented Jan 17, 2020

ShaneMatthias commented Feb 6, 2020

nikhiysham commented Feb 17, 2020

nabilfreeman commented Apr 9, 2020 •

edited

zmnv commented Apr 27, 2020

nabilfreeman commented Apr 27, 2020

zmnv commented Apr 27, 2020

oregano1201 commented May 1, 2020

JoaRiski commented Jul 18, 2020

lchenfox commented Jul 27, 2020

karanasthana commented Sep 14, 2020

lexoops commented Oct 15, 2020

oki-reval commented Feb 28, 2021

AtaMuhiuldin commented Nov 2, 2021

Moskaoud commented Feb 2, 2023

Tried to register two views with the same name RNCViewPager #1056

Tried to register two views with the same name RNCViewPager #1056

Comments

xgAnd commented Nov 13, 2019 • edited

Steps to Reproduce

Expected Behavior

nicolaspavlotsky commented Nov 13, 2019

xgAnd commented Nov 18, 2019 • edited

yuanbolin commented Dec 9, 2019

xgAnd commented Dec 10, 2019

mohammad-goldast commented Dec 19, 2019

xiaoosnggao commented Jan 16, 2020

xiaoosnggao commented Jan 16, 2020

xgAnd commented Jan 17, 2020

ShaneMatthias commented Feb 6, 2020

nikhiysham commented Feb 17, 2020

nabilfreeman commented Apr 9, 2020 • edited

zmnv commented Apr 27, 2020

nabilfreeman commented Apr 27, 2020

zmnv commented Apr 27, 2020

oregano1201 commented May 1, 2020

JoaRiski commented Jul 18, 2020

lchenfox commented Jul 27, 2020

karanasthana commented Sep 14, 2020

lexoops commented Oct 15, 2020

oki-reval commented Feb 28, 2021

AtaMuhiuldin commented Nov 2, 2021

Moskaoud commented Feb 2, 2023

xgAnd commented Nov 13, 2019 •

edited

xgAnd commented Nov 18, 2019 •

edited

nabilfreeman commented Apr 9, 2020 •

edited