react-native-picker-select: Invariant Violation: requireNativeComponent "RNCPicker" was not found in the UIManager

RNCPicker was not found in the UIManager
This happened when I moved to latest version 8.0.0

To Reproduce
(I din’t try this in a new project, but here is what I did) Steps to reproduce the behavior:

  1. Update react-native-picker-select to 8.0.0
  2. rm -rf node_modules && yarn cache clean && yarn install
  3. cd ios && pod install
  4. run the IOS build
  5. Launch the open and click on RNPickerSelect component

Expected behavior
To behave like it was in the previous version

Screenshots
Screenshot 2020-08-06 at 02 07 33

Additional details

  • Device: iPhone11
  • OS: iOS13.6
  • react-native-picker-select version: 8.0.0
  • react-native version: 0.61.5

Reproduction and/or code sample

<RNPickerSelect
   placeholder={{ label: this.props.placeholderText, value: null }}
   items={this.props.items}
   onValueChange={this.props.onValueChange}
   style={{ ...this.pickerSelectStyles() }}
   value={this.props.selectedValue}
/>

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Reactions: 28
  • Comments: 55

Most upvoted comments

I solved running: npm install @react-native-community/picker

npx pod-install

remember to stop your debugging mode and start it again.

+40
andreslon on Aug 30, 2020

I had a similar issue with expo 38.0.8. steps to solve :

  1. expo install @react-native-community/picker instead of npm install @react-native-community/picker version 1.6.0
  2. downgrade to react-native-picker-select: 7.0.0

using:

import RNPickerSelect from 'react-native-picker-select';

export const Dropdown = () => {
    return (
        <RNPickerSelect
            onValueChange={(value) => console.log(value)}
            items={[
                { label: 'Football', value: 'football' },
                { label: 'Baseball', value: 'baseball' },
                { label: 'Hockey', value: 'hockey' },
            ]}
        />
    );
};

*only the exact version 1.6.0 is supported in Expo and a patch release since that is incompatible with current Expo

+34
Maoravitan on Aug 24, 2020

The native component RNCPicker has been removed out of the react-native core. Installing the peer dependency @react-native-community/picker does the trick

+18
dungtran-groove on Aug 9, 2020

Same here on an ejected app, It seams the pod of @react-native-community/picker is missing. I was obliged to add it to my project’s dependencies and running npx pod-install to solve the issue.

+15
nicolashemonic on Aug 6, 2020

[Fri Aug 07 2020 11:46:28.571] ERROR Invariant Violation: requireNativeComponent: “RNCAndroidDialogPicker” was not found in the UIManager.

This error is located at: in RNCAndroidDialogPicker (at PickerAndroid.android.js:112) in PickerAndroid (at Picker.js:148) in Picker (at src/index.js:509) in RCTView (at View.js:34) in View (at src/index.js:508) in RNPickerSelect (at App.tsx:95) in RCTView (at View.js:34) in View (at App.tsx:93) in App (at renderApplication.js:45) in RCTView (at View.js:34) in View (at AppContainer.js:106) in RCTView (at View.js:34) in View (at AppContainer.js:132) in AppContainer (at renderApplication.js:39)

Facing above issue for android as well This is happening on React native CLI for below simplest code :

import React from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableWithoutFeedback,
  ScrollView,
} from 'react-native';
import RNPickerSelect from 'react-native-picker-select';
// import RNPickerSelect, { defaultStyles } from './debug';

const sports = [
  {
    label: 'Football',
    value: 'football',
  },
  {
    label: 'Baseball',
    value: 'baseball',
  },
  {
    label: 'Hockey',
    value: 'hockey',
  },
];

export default class App extends React.Component {
  constructor(props) {
    super(props);

    this.inputRefs = {
      firstTextInput: null,
      favSport0: null,
    };

    this.state = {
      numbers: [
        {
          label: '1',
          value: 1,
          color: 'orange',
        },
        {
          label: '2',
          value: 2,
          color: 'green',
        },
      ],
      favSport0: undefined,
      previousFavSport: undefined,
    };

    this.InputAccessoryView = this.InputAccessoryView.bind(this);
  }

  InputAccessoryView() {
    return (
      <View style={styles.modalViewMiddle}>
        <TouchableWithoutFeedback
          onPress={() => {
            this.setState(
              {
                favSport5: this.state.previousFavSport,
              },
              () => {
                //this.inputRefs.favSport5.togglePicker(true);
              },
            );
          }}
          hitSlop={{top: 4, right: 4, bottom: 4, left: 4}}>
          <View testID="needed_for_touchable">
            <Text style={[styles.done, {fontWeight: 'normal', color: 'red'}]}>
              Cancel
            </Text>
          </View>
        </TouchableWithoutFeedback>
        <Text>Name | Prefer</Text>
        <TouchableWithoutFeedback
          onPress={() => {
            //this.inputRefs.favSport5.togglePicker(true);
          }}
          hitSlop={{top: 4, right: 4, bottom: 4, left: 4}}>
          <View testID="needed_for_touchable">
            <Text style={styles.done}>Done</Text>
          </View>
        </TouchableWithoutFeedback>
      </View>
    );
  }

  render() {
    return (
      <View style={styles.container}>
        <Text>useNativeAndroidPickerStyle (default)</Text>
        <Text>custom InputAccessoryView on iOS</Text>
        <RNPickerSelect
          items={sports}
          value={this.state.favSport0}
          onValueChange={(value) => {
            this.setState({
              favSport5: value,
            });
          }}
          onOpen={() => {
            this.setState({
              previousFavSport5: this.state.favSport0,
            });
          }}
          InputAccessoryView={this.InputAccessoryView}
          ref={(ref) => {
            //this.inputRefs.favSport5 = ref;
          }}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  scrollContainer: {
    flex: 1,
    paddingHorizontal: 15,
  },
  scrollContentContainer: {
    paddingTop: 40,
    paddingBottom: 10,
  },
  viewContainer: {
    alignSelf: 'stretch',
  },
  iconContainer: {
    position: 'absolute',
    right: 0,
  },
  modalViewTop: {
    flex: 1,
  },
  modalViewMiddle: {
    height: 45,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: 10,
    backgroundColor: '#f8f8f8',
    borderTopWidth: 1,
    borderTopColor: '#dedede',
    zIndex: 2,
  },
  chevronContainer: {
    flexDirection: 'row',
  },
  chevron: {
    width: 15,
    height: 15,
    backgroundColor: 'transparent',
    borderColor: '#a1a1a1',
    borderTopWidth: 1.5,
    borderRightWidth: 1.5,
  },
  chevronUp: {
    marginLeft: 11,
    transform: [{translateY: 4}, {rotate: '-45deg'}],
  },
  chevronDown: {
    marginLeft: 22,
    transform: [{translateY: -5}, {rotate: '135deg'}],
  },
  chevronActive: {
    borderColor: '#007aff',
  },
  done: {
    color: '#007aff',
    fontWeight: '600',
    fontSize: 17,
    paddingTop: 1,
    paddingRight: 11,
  },
  doneDepressed: {
    fontSize: 19,
  },
  modalViewBottom: {
    justifyContent: 'center',
    backgroundColor: '#d0d4da',
  },
  placeholder: {
    color: '#c7c7cd',
  },
  headlessAndroidPicker: {
    position: 'absolute',
    width: '100%',
    height: '100%',
    color: 'transparent',
    opacity: 0,
  },
});

const pickerSelectStyles = StyleSheet.create({
  inputIOS: {
    fontSize: 16,
    paddingVertical: 12,
    paddingHorizontal: 10,
    borderWidth: 1,
    borderColor: 'gray',
    borderRadius: 4,
    color: 'black',
    paddingRight: 30, // to ensure the text is never behind the icon
  },
  inputAndroid: {
    fontSize: 16,
    paddingHorizontal: 10,
    paddingVertical: 8,
    borderWidth: 0.5,
    borderColor: 'purple',
    borderRadius: 8,
    color: 'black',
    paddingRight: 30, // to ensure the text is never behind the icon
  },
});

screenshot-1596781249774

Please help on this issue. RN version - 0.63

+11
SanjanaTailor on Aug 7, 2020

Adding "@react-native-community/picker": "1.6.0", to package.json and reinstalling npm dependencies and pods fixed this for me.

I think the issue is that React Native’s autolinking does not work for transitive dependencies (see https://github.com/react-native-community/cli/issues/870). So the solution is to add @react-native-community/picker as a direct dependency in package.json and in this case autolinking works for it.

+10
mlazari on Nov 22, 2020

Thanks @nikdo for pointing out that @react-native-community/picker is deprecated. I installed the replacement version and it works with this one, too. npm install @react-native-picker/picker --save After that I have to install pods and make a new build in XCode.

+6
ymc-thzi on Aug 27, 2021 
@react-native-picker/picker@1.9.11
react-native-picker-select@8.0.4

This combination worked for me. But only after I restarted Simulator.

I’m missing information about this peer dependency in README. Also, it was not clear whether I should go with now deprecated @react-native-community/picker or the @react-native-picker/picker replacement. I’m still not sure if this is by the book, or just random thing that works.

+6
nikdo on Feb 21, 2021

Peer dependency didn’t help me. Installed @react-native-community/picker as a project dependency.

+6
anmlkh on Aug 10, 2020

pushed out 8.0.1 and updated the readme

+5
lfkwtz on Oct 7, 2020

install both

  1. "@react-native-community/picker": "^1.8.1"
  2. "react-native-picker-select": "^8.0.4"

will do the tricks

+4
zhlee1997 on Feb 5, 2021

Issue Resolved. Adding https://github.com/react-native-community/react-native-picker This will add the required thing after pod install.

+4
harsh-bacancy on Aug 19, 2020

looks like locking to 1.6.0 may be the solution: https://github.com/react-native-community/react-native-picker/issues/45

https://github.com/lawnstarter/react-native-picker-select/tree/801 ^ please try this branch if you’re having this issue and report back. thank you.

+4
lfkwtz on Aug 17, 2020

The root of this issue is in @react-native-community/picker dependency which has this issue on Ver > 1.6.0, installing @react-native-community/picker@1.6.0 solved the issue for me.

+4
A-Nabil on Aug 14, 2020

[Fri Aug 07 2020 11:46:28.571] ERROR Invariant Violation: requireNativeComponent: “RNCAndroidDialogPicker” was not found in the UIManager.

This error is located at: in RNCAndroidDialogPicker (at PickerAndroid.android.js:112) in PickerAndroid (at Picker.js:148) in Picker (at src/index.js:509) in RCTView (at View.js:34) in View (at src/index.js:508) in RNPickerSelect (at App.tsx:95) in RCTView (at View.js:34) in View (at App.tsx:93) in App (at renderApplication.js:45) in RCTView (at View.js:34) in View (at AppContainer.js:106) in RCTView (at View.js:34) in View (at AppContainer.js:132) in AppContainer (at renderApplication.js:39)

Facing above issue for android as well This is happening on React native CLI for below simplest code :

import React from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableWithoutFeedback,
  ScrollView,
} from 'react-native';
import RNPickerSelect from 'react-native-picker-select';
// import RNPickerSelect, { defaultStyles } from './debug';

const sports = [
  {
    label: 'Football',
    value: 'football',
  },
  {
    label: 'Baseball',
    value: 'baseball',
  },
  {
    label: 'Hockey',
    value: 'hockey',
  },
];

export default class App extends React.Component {
  constructor(props) {
    super(props);

    this.inputRefs = {
      firstTextInput: null,
      favSport0: null,
    };

    this.state = {
      numbers: [
        {
          label: '1',
          value: 1,
          color: 'orange',
        },
        {
          label: '2',
          value: 2,
          color: 'green',
        },
      ],
      favSport0: undefined,
      previousFavSport: undefined,
    };

    this.InputAccessoryView = this.InputAccessoryView.bind(this);
  }

  InputAccessoryView() {
    return (
      <View style={styles.modalViewMiddle}>
        <TouchableWithoutFeedback
          onPress={() => {
            this.setState(
              {
                favSport5: this.state.previousFavSport,
              },
              () => {
                //this.inputRefs.favSport5.togglePicker(true);
              },
            );
          }}
          hitSlop={{top: 4, right: 4, bottom: 4, left: 4}}>
          <View testID="needed_for_touchable">
            <Text style={[styles.done, {fontWeight: 'normal', color: 'red'}]}>
              Cancel
            </Text>
          </View>
        </TouchableWithoutFeedback>
        <Text>Name | Prefer</Text>
        <TouchableWithoutFeedback
          onPress={() => {
            //this.inputRefs.favSport5.togglePicker(true);
          }}
          hitSlop={{top: 4, right: 4, bottom: 4, left: 4}}>
          <View testID="needed_for_touchable">
            <Text style={styles.done}>Done</Text>
          </View>
        </TouchableWithoutFeedback>
      </View>
    );
  }

  render() {
    return (
      <View style={styles.container}>
        <Text>useNativeAndroidPickerStyle (default)</Text>
        <Text>custom InputAccessoryView on iOS</Text>
        <RNPickerSelect
          items={sports}
          value={this.state.favSport0}
          onValueChange={(value) => {
            this.setState({
              favSport5: value,
            });
          }}
          onOpen={() => {
            this.setState({
              previousFavSport5: this.state.favSport0,
            });
          }}
          InputAccessoryView={this.InputAccessoryView}
          ref={(ref) => {
            //this.inputRefs.favSport5 = ref;
          }}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  scrollContainer: {
    flex: 1,
    paddingHorizontal: 15,
  },
  scrollContentContainer: {
    paddingTop: 40,
    paddingBottom: 10,
  },
  viewContainer: {
    alignSelf: 'stretch',
  },
  iconContainer: {
    position: 'absolute',
    right: 0,
  },
  modalViewTop: {
    flex: 1,
  },
  modalViewMiddle: {
    height: 45,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: 10,
    backgroundColor: '#f8f8f8',
    borderTopWidth: 1,
    borderTopColor: '#dedede',
    zIndex: 2,
  },
  chevronContainer: {
    flexDirection: 'row',
  },
  chevron: {
    width: 15,
    height: 15,
    backgroundColor: 'transparent',
    borderColor: '#a1a1a1',
    borderTopWidth: 1.5,
    borderRightWidth: 1.5,
  },
  chevronUp: {
    marginLeft: 11,
    transform: [{translateY: 4}, {rotate: '-45deg'}],
  },
  chevronDown: {
    marginLeft: 22,
    transform: [{translateY: -5}, {rotate: '135deg'}],
  },
  chevronActive: {
    borderColor: '#007aff',
  },
  done: {
    color: '#007aff',
    fontWeight: '600',
    fontSize: 17,
    paddingTop: 1,
    paddingRight: 11,
  },
  doneDepressed: {
    fontSize: 19,
  },
  modalViewBottom: {
    justifyContent: 'center',
    backgroundColor: '#d0d4da',
  },
  placeholder: {
    color: '#c7c7cd',
  },
  headlessAndroidPicker: {
    position: 'absolute',
    width: '100%',
    height: '100%',
    color: 'transparent',
    opacity: 0,
  },
});

const pickerSelectStyles = StyleSheet.create({
  inputIOS: {
    fontSize: 16,
    paddingVertical: 12,
    paddingHorizontal: 10,
    borderWidth: 1,
    borderColor: 'gray',
    borderRadius: 4,
    color: 'black',
    paddingRight: 30, // to ensure the text is never behind the icon
  },
  inputAndroid: {
    fontSize: 16,
    paddingHorizontal: 10,
    paddingVertical: 8,
    borderWidth: 0.5,
    borderColor: 'purple',
    borderRadius: 8,
    color: 'black',
    paddingRight: 30, // to ensure the text is never behind the icon
  },
});

screenshot-1596781249774

Please help on this issue. RN version - 0.63

Resolved issue by installing 7.0.0 version. Above problem persist in 8.0.0 which is latest version.

+3
SanjanaTailor on Aug 11, 2020

Following solution worked for me, after npm install @react-native-community/picker kill metro server then restart then do react-native run-android

+1
piyush4669 on Oct 24, 2020

https://github.com/lawnstarter/react-native-picker-select/tree/801 returns 404

+1
lumberman on Sep 29, 2020

I ran into this issue too, and using the branch works for me on Expo 38 ("expo": "^38.0.10",).

expo install lawnstarter/react-native-picker-select#801

🥳

+1
bitttttten on Sep 25, 2020

May have spoken too soon - it works on Android but getting the following errors on iOS when I click to open the picker:

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

This error is located at:
    in RNCPicker (at PickerIOS.ios.js:107)
    in RCTView (at PickerIOS.ios.js:106)
    in PickerIOS (at Picker.js:143)
    in Picker (at src/index.js:457)
    in RCTView (at src/index.js:450)
    in RCTView (at AppContainer.js:109)
    in RCTView (at AppContainer.js:135)
    in AppContainer (at Modal.js:254)
    in RCTView (at Modal.js:276)
    in RCTModalHostView (at Modal.js:262)
    in Modal (at src/index.js:433)
    in RCTView (at src/index.js:422)
    in RNPickerSelect (created by SearchForm)
    in RCTView (created by SearchForm)
    in RCTView (created by SearchForm)
    in MembersSearchForm (created by DirectoryScreenContent)
    in RCTView (at VirtualizedList.js:931)
    in VirtualizedCellWrapper (at VirtualizedList.js:928)
    in RCTScrollContentView (at ScrollView.js:1063)
    in RCTScrollView (at ScrollView.js:1196)
    in ScrollView (at VirtualizedList.js:1280)
    in VirtualizedList (at FlatList.js:633)
    in FlatList (created by DirectoryScreenContent)
    in DirectoryScreenContent (created by Context.Consumer)
    in Connect(DirectoryScreenContent) (created by Context.Consumer)
    in Connect(Connect(DirectoryScreenContent)) (created by ScreenManager)
    in RCTView (created by Layout)
    in RCTView (created by Layout)
    in Layout (created by ScreenManager)
    in ScreenManager (created by Context.Consumer)
    in Screen(Connect(Connect(DirectoryScreenContent))) (at SceneView.js:9)
    in SceneView (at StackViewLayout.tsx:899)
    in RCTView (at createAnimatedComponent.js:144)
    in AnimatedComponent (at createAnimatedComponent.js:194)
    in ForwardRef(AnimatedComponentWrapper) (at StackViewCard.tsx:93)
    in RCTView (at createAnimatedComponent.js:144)
    in AnimatedComponent (at createAnimatedComponent.js:194)
    in ForwardRef(AnimatedComponentWrapper) (at screens.native.js:59)
    in Screen (at StackViewCard.tsx:80)
    in Card (at createPointerEventsContainer.tsx:95)
    in Container (at StackViewLayout.tsx:971)
    in RCTView (at screens.native.js:83)
    in ScreenContainer (at StackViewLayout.tsx:383)
    in RCTView (at createAnimatedComponent.js:144)
    in AnimatedComponent (at createAnimatedComponent.js:194)
    in ForwardRef(AnimatedComponentWrapper) (at StackViewLayout.tsx:379)
    in PanGestureHandler (at StackViewLayout.tsx:372)
    in StackViewLayout (at withOrientation.js:30)
    in withOrientation (at StackView.tsx:103)
    in RCTView (at Transitioner.tsx:267)
    in Transitioner (at StackView.tsx:40)
    in StackView (at createNavigator.js:61)
    in Navigator (at createKeyboardAwareNavigator.js:12)
    in KeyboardAwareNavigator (at SceneView.js:9)
    in SceneView (at SwitchView.js:12)
    in SwitchView (at createNavigator.js:61)
    in Navigator (at createAppContainer.js:429)
    in NavigationContainer (created by NavigationContainerContent)
    in RCTView (at react-native-drawer/index.js:578)
    in RCTView (at react-native-drawer/index.js:565)
    in Drawer (created by Drawer)
    in Drawer (created by NavigationContainerContent)
    in NavigationContainerContent (created by Context.Consumer)
    in Connect(NavigationContainerContent) (created by Context.Consumer)
    in Connect(Connect(NavigationContainerContent)) (created by Context.Consumer)
    in Connect(Connect(Connect(NavigationContainerContent))) (created by Context.Consumer)
    in Connect(Connect(Connect(Connect(NavigationContainerContent)))) (created by AppComponent)
    in Provider (created by StoreProvider)
    in StoreProvider (created by AppComponent)
    in AppComponent (at renderApplication.js:45)
    in RCTView (at AppContainer.js:109)
    in RCTView (at AppContainer.js:135)
    in AppContainer (at renderApplication.js:39)

invariant
    browser.js:38:14
getNativeComponentAttributes
    getNativeComponentAttributes.js:29:2
createReactNativeComponentClass$argument_1
    requireNativeComponent.js:29:4
exports.get
    ReactNativeViewConfigRegistry.js:121:17
createInstance
    ReactNativeRenderer-dev.js:4256:19
completeWork
    ReactNativeRenderer-dev.js:16949:25
completeUnitOfWork
    ReactNativeRenderer-dev.js:20912:15
performUnitOfWork
    ReactNativeRenderer-dev.js:20882:11
workLoopSync
    ReactNativeRenderer-dev.js:20848:21
performSyncWorkOnRoot
    ReactNativeRenderer-dev.js:20456:10

I’ve rolled back to 7.0.0 for the time being

+1
ldthorne on Sep 14, 2020

I solved running: npm install @react-native-community/picker

npx pod-install

remember to stop your debugging mode and start it again.

Thank you, this solved my issue for me.

+1
ramonvermeulen on Sep 1, 2020

I solved this problem with react-native-picker-select@7.0.0 and in placeholder attribute I added a string and this causes a error crashing the app, so I fix this putting correct object explained in README.md.

+1
julitroalves on Aug 28, 2020

@Maoravitan did you try https://github.com/lawnstarter/react-native-picker-select/tree/801?

+1
lfkwtz on Aug 24, 2020

Installed react-native-picker-select: 7.0.0 and the problem was solved.

+1
zcaceres on Aug 16, 2020

Going back to ver 7.0.0 solve it to me.

+1
A-Nabil on Aug 10, 2020

I noticed, this is an issue with @react-native-community/react-native-picker and there also an open issue already.

It din’t help much, as I am already clearing node modules, updating pods and this was happening on a non expo project.

+1
Kamalnrf on Aug 5, 2020
Read more comments on GitHub
← react-native-picker-select: Crashes in production only - Android and iOS
react-native-picker-select: Invariant Violation: Tried to register two views with the same name RNCPicker →