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

Bug report

Summary

In expo 38 I get an error: Invariant Violation: requireNativeComponent: “RNCAndroidDialogPicker” was not found in the UIManager

"expo": "^38.0.0"
"react": "16.11.0"
"@react-native-community/picker": "^1.6.6"

I see at https://github.com/react-native-community/react-native-picker#user-content-for-managed-workflow-users-using-expo-37 that this package is not for expo 37, so I assume that expo 38 is also not supported?

If so, then react-native’s Picker also doesn’t seem to work for me, so I plan to try react-native-picker-select next.

Environment info

react-native info output:

System:
    OS: Linux 4.4 Ubuntu 14.04.6 LTS, Trusty Tahr
    CPU: (16) x64 Intel(R) Core(TM) i9-9900K CPU @ 3.60GHz
    Memory: 20.45 GB / 31.93 GB
    Shell: 4.3.11 - /bin/bash
  Binaries:
    Node: 12.16.1 - ~/.nvm/versions/node/v12.16.1/bin/node
    Yarn: Not Found
    npm: 6.14.8 - ~/.nvm/versions/node/v12.16.1/bin/npm
    Watchman: Not Found
  SDKs:
    Android SDK: Not Found
  IDEs:
    Android Studio: Not Found
  Languages:
    Java: 11.0.5 - /usr/bin/javac
    Python: 2.7.6 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: ^4.12.0 => 4.12.0
    react: 16.11.0 => 16.11.0
    react-native: 0.62.2 => 0.62.2
  npmGlobalPackages:
    *react-native*: Not Found

Library version: 1.6.6

Steps to reproduce

  1. Import Picker from ‘@react-native-community/picker’;
  2. use <Picker ...><Picker.Item.../></Picker> in your component
  3. run npx expo start and connect to expo with an actual Android device

Describe what you expected to happen:

  1. I should see my component with picker
  2. I should be able to tap on the picker and select an option

Reproducible sample code

https://snack.expo.io/@aproximation/react-native--community-picker-rncandroiddialogpicker-error

About this issue

  • Original URL
  • State: open
  • Created 4 years ago
  • Reactions: 31
  • Comments: 45

Commits related to this issue

Most upvoted comments

Manually linking helped me resolve the issue, but don’t follow the steps mentioned in the readme.

  1. Open application file (android/app/src/main/java/[…]/MainApplication.java) Add import com.reactnativecommunity.picker.RNCPickerPackage; to the imports at the top of the file Add new RNCPickerPackage() to the list returned by the getPackages() method
  2. Append the following lines to android/settings.gradle: include ':@react-native-community_picker' project(':@react-native-community_picker').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/picker/android')
  3. Insert the following lines inside the dependencies block in android/app/build.gradle: implementation project(':@react-native-community_picker')

Hope this helps someone! Cheers! 🎉

This is happening as well on RN 0.63, without expo

I tried react-native run-android after installing the issue solved

If you see a Invariant Violation: requireNativeComponent "RNCPicker" was not found in the UIManager error:

React Native users: npm install @react-native-community/picker npx pod-install

Expo: expo install @react-native-community/picker

It works for me!

oh , i managed it myself (i’m not using expo)

how do i get the error “requireNativeComponent …” :

  1. i have metro server running and my application running already
  2. i installing the “this” npm package without stopping my metro or closing my application
  3. i tried following the example how to use … <Picker> ... </Picker> like so
  4. then it popped up this error

then the way i fixed it :

  1. i closing my application, i stopped my metro server, cleaning metro cache and also run watchman watch-del-all

  2. i re run command “npm run android” and let the gradle build my application once again

  3. let this task done by gradle Screen Shot 2020-09-29 at 16 45 37

  4. i went to the component where i put the <Picker> .... </Picker> and the errors is gone, i can use this package without facing a this error again

*this is the way i fixed this issue on “mine” and idk if its different by u guys

cheers~ hope yall fixed the issue soon too

After searching for this problem, I update expo with npm and run “expo update”. That solve the issue. Hope this may help.

The fact is, that package: @react-native-community/picker is deprecated ❌ My solution was adding react-native-picker/picker package to the project ✔

I resolve it by (Manually Linking):

  1. npm install @react-native-picker/picker (if you not installed)
  2. In MainApplication.java File add “import com.reactnativecommunity.picker.RNCPickerPackage;”
  3. In MainApplication.java File add “new RNCPickerPackage()” for adding in “getPackages” method.
  4. In Settings.gradle file add “include ‘:@react-native-picker_picker’ project(‘:@react-native-picker_picker’).projectDir = new File(rootProject.projectDir, ‘…/node_modules/@react-native-picker/picker/android’)”
  5. In android/app/build.gradle add “implementation project(‘:@react-native-picker_picker’)”
  6. npx react-native run-android 😉 I hope useful for you!

those who are having this issue with Native Base like me. Installing expo install @react-native-community/picker solved my issue. I am still using picker from native base but problem solved.

  1. delete node_modules.
  2. npm install.
  3. yarn android. Hope this helps someone!

Im also facing this issue in bare workflow.

System: OS: macOS 10.15.5 CPU: (8) x64 Intel® Core™ i7-7700HQ CPU @ 2.80GHz Memory: 6.62 GB / 16.00 GB Shell: 3.2.57 - /bin/bash Binaries: Node: 10.15.3 - ~/.nvm/versions/node/v10.15.3/bin/node Yarn: 1.22.4 - ~/.nvm/versions/node/v10.15.3/bin/yarn npm: 6.14.7 - ~/.nvm/versions/node/v10.15.3/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman Managers: CocoaPods: 1.9.1 - /Users/user.rvm/gems/ruby-2.5.1/bin/pod SDKs: iOS SDK: Platforms: iOS 13.6, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2 Android SDK: Not Found IDEs: Android Studio: 3.1 AI-173.4819257 Xcode: 11.6/11E708 - /usr/bin/xcodebuild Languages: Java: 13.0.2 - /usr/bin/javac Python: 2.7.13 - /Library/Frameworks/Python.framework/Versions/2.7/bin/python npmPackages: @react-native-community/cli: Not Found react: ~16.13.1 => 16.13.1 react-native: 0.63.2 => 0.63.2 npmGlobalPackages: react-native: Not Found

I trie all the other solutions above and the only thing that worked for me was adding the react-native-picker/picker Thanks @hrdyjan1

Manually linking helped me resolve the issue, but don’t follow the steps mentioned in the readme.

  1. Open application file (android/app/src/main/java/[…]/MainApplication.java) Add import com.reactnativecommunity.picker.RNCPickerPackage; to the imports at the top of the file Add new RNCPickerPackage() to the list returned by the getPackages() method
  2. Append the following lines to android/settings.gradle: include ':@react-native-community_picker' project(':@react-native-community_picker').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/picker/android')
  3. Insert the following lines inside the dependencies block in android/app/build.gradle: implementation project(':@react-native-community_picker')

Hope this helps someone! Cheers! 🎉

for me was kind of similar but in “android/app/build.gradle” I had to place: implementation project(path: ':@react-native-community_picker')

if you’re using react-native-cli, you should clean android build ./gradlew clean on android folder. and watchman watch-del-all && yarn start --reset-cache to make sure all cache are clean.

If you see a Invariant Violation: requireNativeComponent "RNCPicker" was not found in the UIManager error:

React Native users: npm install @react-native-community/picker npx pod-install

Expo: expo install @react-native-community/picker

It works for me!

Works only with:

expo install @react-native-community/picker

THANKS BRO!

Below steps worked for me

Go to packages/mobile in terminal Install package npm install @react-native-picker/picker --save (or) yarn add @react-native-picker/picker (if you are using yarn) then go back to project root folder restart metro and run android

Hope it will work!

just install @react-native-picker/picker , it will remove that error automatically

The problem is as @hrdyjan1 answered that @react-native-community/picker is deprecated, however using react-native-picker/picker might not be the best idea if you’re using the newest iOS version in your app because Apple changed their component and even react-native-picker/picker might still cause problems.

I suggest using react-native-dropdown-picker

@kalleriakronos24 works perfect for me,

thx for giving me a clue for what really happened to that issue, i don’t know the cause of the error at the first time until you explain how you get the error “requireNativeComponent …” and that is exactly the same thing as mine

but for my case, i just re-start the metro server and run yarn run android without cleaning cache and without rebuild the app. It solved

^ still happening as well on latest RN version

@arunpugahz Interesting! I haven’t used native-base. But I do know that @react-native-community/picker says it’s not supposed to be use with expo 37. I think they really mean expo 37 and recent, no?

But weirdly I got "react-native-picker-select": "^7.0.0" to work with "expo": "^38.0.0", and if what you say is true that react-native-picker-select uses @react-native-community/picker and not picker from react-native, then I’m stumped on why I couldn’t get "@react-native-community/picker": "^1.6.0" to work on Android in that snack I’ve been using: https://snack.expo.io/Lids0AJ0V