search

react-native-picker / picker

Picker is a cross-platform UI component for selecting an item from a list of options.
MIT License
1.49k stars 279 forks source link

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

Open wadewadewadewadewadewade opened 4 years ago

wadewadewadewadewadewade commented 4 years ago

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

holgertidemand commented 4 years ago

Im also facing this issue in bare workflow.

System: OS: macOS 10.15.5 CPU: (8) x64 Intel(R) Core(TM) 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

juancebarberis commented 4 years ago

Same issue here!

juancebarberis commented 4 years ago

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

wadewadewadewadewadewade commented 4 years ago

Thanks Juan!

What version of react native picker did you end up with after running expo update?

On Mon, Sep 7, 2020, 8:41 AM Juan Barberis notifications@github.com wrote:

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

ā€” You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/react-native-community/react-native-picker/issues/136#issuecomment-688400281, or unsubscribe https://github.com/notifications/unsubscribe-auth/AFRRH6UKEBEUVEA22UPSTK3SET5KVANCNFSM4Q2JOVBQ .

juancebarberis commented 4 years ago

The version of react native picker after update: "@react-native-community/picker": "1.6.0"

And expo diagnostics after update: Expo CLI 3.26.2 environment info: System: OS: Linux 5.4 Pop!_OS 20.04 LTS Shell: 5.8 - /usr/bin/zsh Binaries: Node: 12.18.3 - /usr/local/bin/node npm: 6.14.6 - /usr/local/bin/npm npmPackages: expo: ^38.0.0 => 38.0.10 react: 16.11.0 => 16.11.0 react-dom: 16.11.0 => 16.11.0 react-native: https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz => 0.62.2 react-native-web: ~0.11.7 => 0.11.7 npmGlobalPackages: expo-cli: 3.26.2

wadewadewadewadewadewade commented 4 years ago

Thanks for that info!

Unfortunately the snack I have set up to test this still errors with 1.6.0, although with a different error compared to 1.6.6: https://snack.expo.io/Lids0AJ0V

Tried to register two views with the same name RNCAndroidDropdownPicker
    Evaluating @react-native-community/picker.js
    Evaluating App.tsx.js
    Loading App.tsx

For what it's worth, I got react-native-picker-select to work with my project. It might not look as pretty, but such is life...

juancebarberis commented 4 years ago

Hope you can solve it. I'm very new with React.

Juan.

arunpugahz commented 4 years ago

Facing the same issue here. I'm using NativeBase in my application they user Picker from react-native. when I created a custom component using Picker from "@react-native-community/picker": "1.6.0" I got error like Invariant Violation: Tried to register two views with the same name AndroidDropdownPicker. then I upgraded the package to 1.6.6. now getting this error Invariant Violation: requireNativeComponent: "RNCAndroidDialogPicker" was not found in the UIManager in android.

"@react-native-community/picker": "1.6.6",
"expo": "^38.0.0",
"native-base": "2.13.14",
"react": "16.11.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz"
arunpugahz commented 4 years ago

@wadewadewadewadewadewade react-native-picker-select uses"@react-native-community/picker": "^1.6.0" causing a different error when using NativeBase in the application

wadewadewadewadewadewade commented 4 years ago

@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

arunpugahz commented 4 years ago

@wadewadewadewadewadewade sorry I was not clear, "react-native-picker-select": "^7.0.0" uses Picker from 'react-native', hence its working fine but its not advisable because Picker is moved. but if you update react-native-picker-select to 8.0.0 it causes the same Invariant Violation: requireNativeComponent: "RNCAndroidDialogPicker" was not found in the UIManager because it uses @react-native-community/picker

wadewadewadewadewadewade commented 4 years ago

Ah, that makes more sense. Thank you for clarifying!

That's weird that newer expo relies on a deprecated picker library. Is this maybe an expo problem and not a react-native-community problem - should we maybe go bug the expo repo maintainers?

On Tue, Sep 8, 2020 at 10:38 AM ArunPugahz notifications@github.com wrote:

@wadewadewadewadewadewade https://github.com/wadewadewadewadewadewade sorry I was not clear, "react-native-picker-select": "^7.0.0" uses Picker from 'react-native', hence its working fine but its not advisable because Picker is moved. but if you update react-native-picker-select to 8.0.0 it causes the same Invariant Violation: requireNativeComponent: "RNCAndroidDialogPicker" was not found in the UIManager because it uses @react-native-community/picker

ā€” You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/react-native-community/react-native-picker/issues/136#issuecomment-689031654, or unsubscribe https://github.com/notifications/unsubscribe-auth/AFRRH6XTJDPDZCTNXJYKZFLSEZTYPANCNFSM4Q2JOVBQ .

shahmharsh commented 4 years ago

Has anyone been able to resolve this issue?

wadewadewadewadewadewade commented 4 years ago

@shahmharsh The only solution I found was to use a different picker. But @arunpugahz pointed out that "react-native-picker-select": "^7.0.0" should work, just not ^8.0.0. but I haven't confirmed that directly.

So you could try using that older version of react-native-pciker-select

donutsahoy commented 4 years ago

I'm having the same error but if I switch to the deprecated version of picker available in 'react-native' it doesn't error out on me, really strange.

arvindell commented 4 years ago

This is happening as well on RN 0.63, without expo

kalleriakronos24 commented 3 years ago

^ still happening as well on latest RN version

kalleriakronos24 commented 3 years ago

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

williandrade commented 3 years ago

@kalleriakronos24 method didn't work for me :(. I still with the problem.

SurajMDurgad commented 3 years ago

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! šŸŽ‰

ZaidQ797 commented 3 years ago

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

williandrade commented 3 years ago

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')

zhaofang commented 3 years ago
  1. delete node_modules.
  2. npm install.
  3. yarn android. Hope this helps someone!
Julianitox commented 3 years ago

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!

GeuntaBuwono commented 3 years ago

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.

hakimscode commented 3 years ago

@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

KhimGurung commented 3 years ago

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.

prasad456 commented 3 years ago

https://github.com/ant-design/ant-design-mobile/issues/3743#issuecomment-746125541

Lakmi94 commented 3 years ago

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!

This worked for me too

hrdyjan1 commented 3 years ago

The fact is, that package: @react-native-community/picker is deprecated āŒ My solution was adding react-native-picker/picker package to the project āœ”

Uzunoff commented 3 years ago

The problem is as @hrdyjan1 answered that @react-native-community/pickeris 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

LuigiMaestrelli commented 3 years ago

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

kaushal-simplify-tech commented 3 years ago

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.

Thnx, these solution solved my prblm without watchman watch-del-all && yarn start --reset-cache

lukewlms commented 3 years ago

Has anyone already done these steps for the new @react-native-picker/picker location and wants to share?

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! šŸŽ‰

rashtell commented 3 years ago

This resolved the issue for me.

https://github.com/devrdias/react-native-form4u/issues/13#issuecomment-794767488

sclavijo93 commented 3 years ago

@lukewlms just replace all the ocurrences of @react-native-community_picker with @react-native-picker_picker

rameshparajuli commented 3 years ago

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

pradeeparivu commented 2 years ago

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!

yousefshakoury commented 2 years ago

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!
lucasltv commented 2 years ago

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!

DanielAraldi commented 2 years ago

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!

Thanks! It worked on my project.

amirbhz86 commented 2 years ago

you didn't install @react-native-picker/picker

zaidiqbal commented 2 years ago

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

For those who are debugging over WIFI instead of USB, after installing picker package they need to manually remove the old application and then do react-native run-android to install fresh one then all will work. It worked for me.

magician11 commented 1 year ago

This happened today to me.

I created a new development build and installed it, and this resolved it.

Ks1220 commented 11 months ago

Dear anyone,

I faced this issue recently. May I know how you all solve this? Thanks in advance for helping me!!

StasNemy commented 1 month ago

Hello everyone! Caught the same bug today when using

    "expo": "~51.0.26",
    "@react-native-picker/picker": "^2.7.5",
    "react-native-picker-select": "^9.3.1",

Fixed issue by running build application from Android Studio