React-native-picker-select: 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/