react-native-picker-select: Invariant Violation: Tried to register two views with the same name RNCPicker

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
image

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]

About this issue

  • Original URL
  • State: open
  • Created 4 years ago
  • Reactions: 19
  • Comments: 35

Most upvoted comments

my working together versions

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

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

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

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.

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

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.

+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.

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"
    }
  },

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 native-base@3.3.7
  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 native-base@2.13.14

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

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!

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