Invariant Violation: Tried to register two views with the same name RNCPicker

[ssthil]

Describe the bug
I am trying to implement this react-native-picker-select in the react-native app but after npm install, tried to run the app but Invariant Violation: Tried to register two views with the same name RNCPicker

Screenshots

Additional details

• Device: [e.g. iPhone11]
• OS: [e.g. iOS14.1]
• react-native-picker-select version: [e.g. 8.0.1]
• "@react-native-picker/picker": "^1.8.3",
• react-native version: [e.g. 0.63]

[jeremyablong]

+1 - I believe I've dealt with this same bug months ago... I uninstalled it and used another package. This isn't a new bug though.

[CITGuru]

@jeremyablong What package did you used?

[maxencehenneron]

If you have "@react-native-community/picker" installed in your package.json, please replace it to "@react-native-picker/picker". The dependency changed its npm repository name and it creates this issue if you have the old one still installed

[pm-sharma]

Any solution?

[TDDEL]

In my case the problem was being caused by react-native-picker-select and NativeBase both using different versions of the same react native picker package. NativeBase was using the previously named "@react-native-community/picker" and react-native-picker-select was using the newly named respository "react-native-picker/picker". I resolved this issue by uninstalling the "@react-native-community/picker" and changing any imports of that package in NativeBase.

[maxencehenneron]

@pm-sharma look in your package-lock.json (or yarn.lock) file for the dependency still using "@react-native-community/picker".

[marcos09]

The comment of @TDDEL was helpful for me. Thanks Tyler. I made another fix after read the comment of Tyler. I change the version of native-base and the app come back to work.

[nrlnv]

In my case the problem was being caused by react-native-picker-select and NativeBase both using different versions of the same react native picker package. NativeBase was using the previously named "@react-native-community/picker" and react-native-picker-select was using the newly named respository "react-native-picker/picker". I resolved this issue by uninstalling the "@react-native-community/picker" and changing any imports of that package in NativeBase.

How did you uninstall @react-native-community/picker? in my case it shows "error This module isn't specified in a package.json file" when i try to yarn remove.

[TDDEL]

@nrlnv If that's the case then that means you didn't manually install @react-native-community/picker. Either way, to resolve this issue, go to your yarn.lock file and locate any packages that are using react-native-community/picker (in my case it was solely NativeBase), and then replace all imports of @react-native-community/picker within these packages with react-native-picker-select

In the event that NativeBase is your only package using @react-native-community/picker, you can use this patch to resolve the issue.

patch.txt

[TimothyKrajewski]

same issue here, using native base is why the issue is happening

[stereodenis]

my working together versions

"@react-native-picker/picker": "^1.8.3",
"react-native-picker-select": "^8.0.4",

[Cin316]

@stereodenis Using those specific versions worked for me. Does anyone have any idea why it seems like there are two versions of @react-native-picker/picker active if you use the latest version of @react-native-picker/picker (which is 1.9 right now) ?

[progerchai]

The comment of @TDDEL was helpful for me. Thanks Tyler. I made another fix after read the comment of Tyler. I change the version of native-base and the app come back to work.

Which native-base version did you choose?

[devPinheiro]

@progerchai I resolved the issue by removing an existing native-base package. I have the following: @react-native-picker/picker -- ^1.9.10 react-native-picker-select -- ^8.0.4

I hope this helps

[zoultrex]

I have react-native-picker-select 8.0.4 installed since a few months ago Today I installed @react-native-picker/picker 1.9.11 (latest version as of today)

With that combination I had the same issue Then I changed the version of @react-native-picker/picker to 1.8.3 to match the same version as dependency for react-native-picker-select, same error.

When i had a look at yarn.lock, to my surprise I saw the following:

"@react-native-picker/[email protected]": version "1.8.3" resolved "https://registry.yarnpkg.com/@react-native-picker/picker/-/picker-1.8.3.tgz#fcbf969a4add749fc37ef064a5eb55eadc93db39" integrity sha512-zfr8k9L5BJVN7fIrmrto1cCptZjkGoiKWeZTsCR+XormQnWj0Tqrv0S9Ni3SvdT5JZ2OAQ9H+edMRSUvrAxwQA==

"@react-native-picker/picker@^1.8.3": version "1.9.4" resolved "https://registry.yarnpkg.com/@react-native-picker/picker/-/picker-1.9.4.tgz#f4392b58eab320061c71f5c9ab6f74dc3501ec9e" integrity sha512-71sNPRZf/PeMKpLMuzKHLT4p4zRilWnfv61nko9HMZtjW0R0DNy2zLy6PYokTbtbUqhwCdeEIldQcjFSoNR8rg==

What is up with the second line of each block pointing to a different version?!

Very strange, but that's what's happening to me and I'm not sure how to fix this in a most correct manner. Any ideas would be appreciated

Update: I realised I made a mistake by not adding the ˆin front of the version @1.8.3 when I ran yarn add, so the correct way should be yarn add @react-native-picker/picker@^1.8.3

After that, this particular problem went away, but now I have another problem

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

[zoultrex]

@progerchai I resolved the issue by removing an existing native-base package. I have the following: @react-native-picker/picker -- ^1.9.10 react-native-picker-select -- ^8.0.4

I hope this helps

I have just tried that and it did not work, same two views with the same name error. Did you have to do something extra after changing those versions? Any recommendation where to check when this kind of problem is still happening?

[jaimedavid01]

This step by step article helped me out a lot: https://blog.logrocket.com/how-to-use-the-react-native-picker-select/

[Wei102193]

if you are using package "native-base", remove that from your project completely before it is too late.

[gluons]

In my case, @react-native-picker/picker in my project and @react-native-picker/picker under react-native-picker-select are different version.
I have to remove lock file and reinstall packages to make all @react-native-picker/picker are the same version.

[majugurci]

In my case, @react-native-picker/picker in my project and @react-native-picker/picker under react-native-picker-select are different version. I have to remove lock file and reinstall packages to make all @react-native-picker/picker are the same version.

Thank you, I also deleted yarn.lock and removed node_modules, after doing yarn install it's working correctly again.

[jerry-santana]

I faced the same issue and it took me a while to figure out the root cause. I would suggest you to do the following steps:

1. Search in your "yarn lock" the package "react-native-community/picker"
2. Some package is having some dependency on that - in my case, it was "native-base" but maybe for you is another one.
3. Once you find it, either remove it or upgrade it, since I'm not using "native-base" I simply removed it
4. Once you remove/upgrade the package that has dependency on "react-native-community/picker", it should work!

The issue is because "react-native-community/picker" was replaced by "react-native-picker/picker". Even though you replace it in your package.json, there are other packages that still use "react-native-community/picker".

Make sure you get rid of "react-native-community/picker" completely - as long as you don't find it in your "yarn lock" everything should work like a charm.

[cs-manughian]

In my case, @react-native-picker/picker in my project and @react-native-picker/picker under react-native-picker-select are different version. I have to remove lock file and reinstall packages to make all @react-native-picker/picker are the same version.

Thank you! I did an npm list for the picker to see any conflicting versions, and removing the conflicting package cleared things up. You're a life saver. After this I had an issue with an unexpected token in the Picker package, and I solved it by updating my config-overrides.js:

module.exports = override(
    babelInclude([
        ...
        path.resolve('src'),
        path.resolve(__dirname, 'node_modules/@react-native-picker/picker'),
    ]),
);

[vetrivendhan48]

Just import the Picker component from your favourite library (in my case it is 'Native Base').

[vetrivendhan48]

if you are using package "native-base", remove that from your project completely before it is too late.

No libraries are 100% best. Even I found issues with 'react native paper' .

[kivohin]

This issue will be solved in this currently open PR by @rehubbard: https://github.com/lawnstarter/react-native-picker-select/pull/464

In the meantime, if you are using Yarn, you can solve this temporarily by forcing react-native-picker-select to resolve to ^2.1.0 instead of ^1.8.3 using Yarn resolutions.

In package.json, add:

  "resolutions": {
    "react-native-picker-select/@react-native-picker/picker": "^2.1.0"
  },

Thank you @ebaynaud, who suggested this originally here: https://github.com/lawnstarter/react-native-picker-select/issues/458#issuecomment-952722611

[maxmaio]

an npm solution is to add an override for react-native-picker/picker. Make sure you're on the latest npm version because overrides are a new feature.

in package.json:

  "overrides": {
    "react-native-picker-select": {
      "@react-native-picker/picker": "2.2.1"
    }
  },

[deywersonp]

an npm solution is to add an override for react-native-picker/picker. Make sure you're on the latest npm version because overrides are a new feature.

in package.json:

  "overrides": {
    "react-native-picker-select": {
      "@react-native-picker/picker": "2.2.1"
    }
  },

I was with the same issue and this solved my problem! Ty!

[edgarilb]

In my case, the issue was with native-base. I was using an older version 2.0. The error was prompted after updating expo SDK from 41 to 42 to 43.

Here is the solution that worked for me:

1. install a newer version of native-base, for example, npm i [email protected]
2. run the project, if you keep seeing the same error go back to the previous version of native-base. In my case npm i [email protected]

I don't know why, but the problem was solved.

[kbwhodat]

In my case, the issue was with native-base. I was using an older version 2.0. The error was prompted after updating expo SDK from 41 to 42 to 43.

Here is the solution that worked for me:

1. install a newer version of native-base, for example, npm i [email protected]

2. run the project, if you keep seeing the same error go back to the previous version of native-base. In my case npm i [email protected]

I don't know why, but the problem was solved.

Crazy, this worked for me. After upgrading my native-base version it worked. Thanks

[GarciaaMarilia]

in my case worked to use @react-native-community/picker instead of @react-native-picker/picker