React-native-picker-select: [Expo SDK 40 Support] Migrate to @react-native-picker/picker

[nandorojo]

Is your feature request related to a problem?

Expo SDK 40's beta is released. It includes a PR (https://github.com/expo/expo/pull/11029) by @brentvatne changing to @react-native-picker/picker. I believe this means this library isn't working with SDK 40.

Describe the solution you'd like

Change the picker dependency from @react-native-community/picker to @react-native-picker/picker

Describe alternatives you've considered

Not upgrading to SDK40, or using patch-package to replace the imports.

Additional details

Expo SDK 40 release notes can be found here: https://github.com/expo/expo/blob/master/CHANGELOG.md

Thank you!

[arunpugahz]

yes Kindly migrate.
Tried to use react-native-picker-select and @react-native-picker/picker for different components got the following error
Invariant Violation: Tried to register two views with the same name RNCPicker

[lfkwtz]

handled in 8.0.4

[PatrickVuscan]

Still happening in Expo SDK 40 for me - should probably be reopened?

[brentvatne]

@PatrickVuscan - are you using the version that @lfkwtz mentioned above?

[PatrickVuscan]

@brentvatne I’ve tried every single combination of different versions that I’ve seen on this thread and many others...

I’m not sure if it’s because I’m using NativeBase, but when I try any of the versions of this, 7.0.0 - ^8.0.3, it tells me that react-native-picker/picker is missing. Once I install it because it’s missing with npm install, it gives me an invariant violation because two RNCPicker components are being registered...

Any advice?

[brentvatne]

react-native libraries shouldn't include other react-native libraries with native dependencies as dependencies. so, if nativebase includes @react-naitve-picker/picker as a dependency, that is a problem and they should make it a peer dependency instead.

run yarn why @react-native-picker/picker to see where it's coming from
use yarn resolutions to force nativebase or whatever other library is including it to use the version you want (https://classic.yarnpkg.com/en/docs/selective-version-resolutions/)

(i don't know how to do this with npm, there might be some equivalents but i'm not sure)

[lfkwtz]

@brentvatne I added @react-native-picker/picker as a dependency to this library - didn't realize it should be a peerDependency - maybe that will fix the issue

[lfkwtz]

looking at nativebase they're also using "@react-native-community/picker": "^1.6.6", as a dependency - so the issues could be compounding

[PatrickVuscan]

@lfkwtz If it seems like its compounding, would you have any idea on how to just make this work?

[PatrickVuscan]

@brentvatne

After running the npm-why (yarn why's duplicate I guess?) I get this:

npm-why @react-native-picker/picker

  Who required @react-native-picker/picker:

  <my_actual_repo_project>  > react-native-picker-select > @react-native-picker/[email protected]

Note, I've got this in my package.json:

"dependencies": {
    "@expo/vector-icons": "^12.0.0",
    "@react-native-community/masked-view": "0.1.10",
    ...
    "expo": "^40.0.0",
    "expo-font": "~8.4.0",
    ...
    "native-base": "^2.13.14",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.0.tar.gz",
    ...
    "react-native-picker-select": "^8.0.4",
    ...
  },