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

Bug

I am unable to get this to work. I’m receiving the following error

`Violation: requireNativeComponent: “RNCPicker” was not found in the UIManager.

This error is located at: in RNCPicker (at PickerIOS.ios.js:107) in RCTView (at View.js:35) in View (at PickerIOS.ios.js:106) in PickerIOS (at Picker.js:142) in Picker (at edit-exercise.modal.tsx:54) in EditExerciseModal (created by inject-with-exerciseStore(EditExerciseModal)) in inject-with-exerciseStore(EditExerciseModal) (at SceneView.js:9) in SceneView (at StackViewLayout.tsx:909) in RCTView (at View.js:35) in View (at createAnimatedComponent.js:151) in AnimatedComponent (at StackViewCard.tsx:106) in RCTView (at View.js:35) in View (at createAnimatedComponent.js:151) in AnimatedComponent (at screens.native.js:71) in Screen (at StackViewCard.tsx:93) in Card (at createPointerEventsContainer.tsx:95) in Container (at StackViewLayout.tsx:984) in RCTView (at View.js:35) in View (at screens.native.js:101) in ScreenContainer (at StackViewLayout.tsx:393) in RCTView (at View.js:35) in View (at createAnimatedComponent.js:151) in AnimatedComponent (at StackViewLayout.tsx:383) in PanGestureHandler (at StackViewLayout.tsx:376) in StackViewLayout (at withOrientation.js:30) in withOrientation (at StackView.tsx:104) in RCTView (at View.js:35) in View (at Transitioner.tsx:267) in Transitioner (at StackView.tsx:41) in StackView (at createNavigator.js:80) in Navigator (at createKeyboardAwareNavigator.js:12) in KeyboardAwareNavigator (at SceneView.js:9) in SceneView (at StackViewLayout.tsx:909) in RCTView (at View.js:35) in View (at createAnimatedComponent.js:151) in AnimatedComponent (at StackViewCard.tsx:106) in RCTView (at View.js:35) in View (at createAnimatedComponent.js:151) in AnimatedComponent (at screens.native.js:71) in Screen (at StackViewCard.tsx:93) in Card (at createPointerEventsContainer.tsx:95) in Container (at StackViewLayout.tsx:984) in RCTView (at View.js:35) in View (at screens.native.js:101) in ScreenContainer (at StackViewLayout.tsx:393) in RCTView (at View.js:35) in View (at createAnimatedComponent.js:151) in AnimatedComponent (at StackViewLayout.tsx:383) in PanGestureHandler (at StackViewLayout.tsx:376) in StackViewLayout (at withOrientation.js:30) in withOrientation (at StackView.tsx:104) in RCTView (at View.js:35) in View (at Transitioner.tsx:267) in Transitioner (at StackView.tsx:41) in StackView (at createNavigator.js:80) in Navigator (at createKeyboardAwareNavigator.js:12) in KeyboardAwareNavigator (at SceneView.js:9) in SceneView (at SwitchView.js:12) in SwitchView (at createNavigator.js:80) in Navigator (at createAppContainer.js:430) in NavigationContainer (at root-component.tsx:73) in RCTView (at View.js:35) in View (at createAnimatedComponent.js:151) in AnimatedComponent (at react-native-safe-area-view/index.js:163) in SafeView (at withOrientation.js:54) in withOrientation (at root-component.tsx:71) in BackButtonHandler (at root-component.tsx:70) in MobXProvider (at root-component.tsx:69) in RootComponent (at renderApplication.js:40) in RCTView (at View.js:35) in View (at AppContainer.js:98) in RCTView (at View.js:35) in View (at AppContainer.js:115) in AppContainer (at renderApplication.js:39)`

Environment info

OS: macOS 10.14.6
CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
Memory: 18.22 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash

Binaries: Node: 12.12.0 - /usr/local/bin/node Yarn: 1.19.1 - /usr/local/bin/yarn npm: 6.11.3 - /usr/local/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman SDKs: iOS SDK: Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1 IDEs: Android Studio: 3.5 AI-191.8026.42.35.6010548 Xcode: 11.2/11B52 - /usr/bin/xcodebuild npmPackages: @react-native-community/cli: ^2.9.0 => 2.9.0 react: 16.8.6 => 16.8.6 react-native: 0.60.5 => 0.60.5 npmGlobalPackages: react-native-cli: 2.0.1

Describe what you expected to happen:

I expected the spinner to show but i received this error. I used the sample code in the readme

About this issue

  • Original URL
  • State: open
  • Created 4 years ago
  • Reactions: 53
  • Comments: 73 (2 by maintainers)

Most upvoted comments

Restart your simulator after pod install

Not sure this is the case for you, but I imported it using “import {Picker} from ‘@react-native-community/picker’;”. And had the same problem for days now. But after changing to “import {Picker} from ‘react-native’;” it works fine now.

As far as I know, this component is still not available in the managed workflow of expo 37. In order to use this component, you would have to eject into a bare workflow, so that other native modules can be used. If you want to use the Picker Component in managed workflow of expo, please import the Picker component directly from `react-native.

import { Picker } from 'react-native'

you may see a deprecated warning, but the component is still usable as it lives in the core.

Here are some steps that helped on solving it:

  • Make sure you install new pods
  • Uninstall the app on your emulator
  • Clean a build your app again (I did using Xcode)
  • Redeploy your app on the emulator

Hope this helps someone 😃. Pura vida!

Not sure this is the case for you, but I imported it using “import {Picker} from ‘@react-native-community/picker’;”. And had the same problem for days now. But after changing to “import {Picker} from ‘react-native’;” it works fine now.

That’s because react-native has their own picker but It is deprecated so they say to use this one

expo install @react-native-community/picker instead of npm install @react-native-community/picker helps too

I had a similar issue with expo 38.0.8:

Violation: requireNativeComponent RNCAndroidDialogPicker was not found in the UIManager

Running expo update fixed it for me, which (among other things) did this to my package.json:

-    "@react-native-community/picker": "^1.6.5",
+    "@react-native-community/picker": "1.6.0",

So it looks like currently, only the exact version 1.6.0 of the picker is supported in Expo and a patch release since that is incompatible with current Expo. I also had to import from the exact Picker file, not the index, to avoid https://github.com/react-native-community/react-native-picker/issues/109

The details of this are likely to change in patch releases but expo update should resolve any such issues now that @react-native-community/picker is officially supported.

I’m using https://github.com/lawnstarter/react-native-picker-select (not expo), it has dependency of this library, having issue as well requireNativeComponent: “RNCAndroidDialogPicker” was not found in the UIManager.

I’m using https://github.com/lawnstarter/react-native-picker-select (not expo), it has dependency of this library, having issue as well requireNativeComponent: “RNCAndroidDialogPicker” was not found in the UIManager.

@blueberry6401 npm i -s @react-native-community/picker cd ios/ pod install

restart app will fix this issue

I solved this deleting the app from simulator and installing again with react-native run-ios

On RN 66.3 I solved this problem in my project by adding this to my Podfile:

target 'ProjectName' do
  config = use_native_modules!

  # ...
  pod 'RNCPicker', :path => '../node_modules/@react-native-picker/picker'
  # ...
end

As far as I know, this component is still not available in the managed workflow of expo 37. In order to use this component, you would have to eject into a bare workflow, so that other native modules can be used. If you want to use the Picker Component in managed workflow of expo, please import the Picker component directly from `react-native.

import { Picker } from 'react-native'

you may see a deprecated warning, but the component is still usable as it lives in the core.

Thanks for your comment. Will work with the picker directly from React Native. Do you know if/when this component will become available in the managed workflow of Expo 37?

I solved it by:

  1. First, run npm install react-native-picker-select
  2. Then run npm install @react-native-picker/picker
  3. pod install

@AlanSl this is exactly why I always install packages using expo install package-name when working with the managed workflow.

For example, in this case, running the expo install @react-native-community/picker results in this in the terminal:

Installing 1 SDK 38.0.0 compatible native module using npm.
> npm install
... other details

And the package it installed was: "@react-native-community/picker": "1.6.0"

Hey I’m still experiencing this problem: Invariant Violation: requireNativeComponent: "RNCPicker" was not found in the UIManager.

I am not using expo, and running the latest version of React Native (0.64).

I have Picker imported like so:

import { Picker } from '@react-native-picker/picker';

Any ideas?

I have already upgraded to Expo 38 sdk, and as far as i know, there are 2 options: 1.- Use the deprecated version: import { Picker} from “react-native”;

2.- Use the updated community version, which I can confirm it works in Expo 38 . import { Picker } from “@react-native-community/picker”;

I have the same problem with expo 38

In XCode, in the project navigator, select your project. Add libRNCPicker.a to your project’s Build Phases ➜ Link Binary With Libraries Then Build your project

Is anybody here experienced in using this library in the new expo custom dev clients? We are getting "RNCPicker" was not found in the UIManager when trying to use the library, it works fine in Expo Go (SDK 44)

On RN 66.3 I solved this problem in my project by adding this to my Podfile:

target 'ProjectName' do
  config = use_native_modules!

  # ...
  pod 'RNCPicker', :path => '../node_modules/@react-native-picker/picker'
  # ...
end

Thanks It working

I too had this issue. This stackoverflow answer solved mine.

Picker component is indeed deprecated but still exists in the react-native core repository. Until the picker component is fully removed from the core, usage of react-native-picker on a managed workflow of expo will probably not be supported.

If you are using bare workflow with expo eject, you may need to run pod install to install this package for iOS.

Navigate to the ios subfolder and run pod install

Using the latest expo SDK and running expo update fixes this issue for me

In my case after install, npm install @react-native-community/picker --save

the error is gone and work perfect

I solved the issue with these steps

  1. import { Picker } from '@react-native-community/picker'
  2. stop any metro bundler/server
  3. uninstall the expo app from your emulator/device
  4. update expo CLI: npm install -g expo-cli
  5. run expo update

it should work now when you run expo start

You have to ensure that the version you install exactly matches the version expo supports. You can verify with yarn why @react-native-community/picker. E.g. if the supported version is 1.6.0, don’t install "@react-native-community/picker": "^1.6.0" but use "@react-native-community/picker": "1.6.0"

The same problem here, hope this gets supported soon for expo users. Thank you.

What we had to do here was create a new iOS simulator build to use in the dev client.

It was a similar solution for me on Android:

  1. expo install @react-native-picker/picker (2.2.1, per package.json)
  2. eas build --profile development --platform android (where the “development” profile has "developmentClient"; true and "android.buildType": "apk")
  3. adb install "path/to/devBuild.apk" (physical device)
  4. expo start --clear --dev-client

Is anybody here experienced in using this library in the new expo custom dev clients? We are getting "RNCPicker" was not found in the UIManager when trying to use the library, it works fine in Expo Go (SDK 44)

@MorenoMdz – Had to use expo update

Hey, thanks for the response! What we had to do here was create a new iOS simulator build to use in the dev client.

I am not using expo and I had the same issue. This is how i fixed it : cd ios && rm -rf Pods rm -rf node_modules yarn && cd ios && pod install && cd .. yarn add @react-native-picker/picker

Install rn-game-over to clean your React Native project

expo install @react-native-community/picker instead of npm install @react-native-community/picker helps too

You are saving my life

1- Stop the metro 2- Run react-native run-ios again.

@sathwik77 this is the default behavior on iOS. You can try to replace it with the ActionSheet. That is what I did and it works perfectly. Way better UX than the always open picker.

Here you can see some more details and this is the Action Sheet iOS documentation. Another interesting way of doing it ( which I did not try yet ) is using RN Modal Picker

Picker component is indeed deprecated but still exists in the react-native core repository. Until the picker component is fully removed from the core, usage of react-native-picker on a managed workflow of expo will probably not be supported.

If you are using bare workflow with expo eject, you may need to run pod install to install this package for iOS.

Any idea when this will happen?

Hi, it will be great if you could share some demo project or expo link, where this is reproducible.