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

[Kamalnrf]

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

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}
/>

[Kamalnrf]

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.

[thecao-nucleusstudio]

The same issue happened to me, any idea guys?

[lfkwtz]

Are you using Expo? If so, what version?

[nicolashemonic]

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.

[SanjanaTailor]

[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
  },
}); 

Please help on this issue.
RN version - 0.63

[PedroBern]

Same error here on a managed expo project sdk 38

[dungtran-groove]

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

[A-Nabil]

Going back to ver 7.0.0 solve it to me.

[anmlkh]

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

[SanjanaTailor]

[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
  },
}); 

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.

[A-Nabil]

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/[email protected] solved the issue for me.

[zcaceres]

Installing @react-native-community/picker did not help me.

expo: 38.0.8
react-native-picker-select: 8.0.0
@react-native-community/picker: 1.6.0

[gabrielbezerra81]

I am facing this issue too in a expo bare project. Works fine launching as native project, but when using expo start it crashes.

edit: I tested with version 7.0.0 and it just worked fine.

[Abdullah-Shamhan]

I' have the same issue too on android only..

expo: 38.0.8
react-native-picker-select: 8.0.0
@react-native-community/picker: 1.6.0

[zcaceres]

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

[Abdullah-Shamhan]

react-native-picker-select: 7.0.0 worked for me as well but i can't use inputLabel anymore..

[lfkwtz]

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.

[harsh-bacancy]

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

[Maoravitan]

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

[lfkwtz]

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

[julitroalves]

Same issue with react-native-picker-select 8.0.0 version and @react-native-community/[email protected]

[sow1ch]

Same issue with react-native-picker-select 8.0.0 version
After that, I installed version 7.0.0 and everything worked

[lfkwtz]

Has anyone tried the branch I posted?

[julitroalves]

I solved this problem with [email protected] 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.

[andreslon]

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

npx pod-install

remember to stop your debugging mode and start it again.

[ramonvermeulen]

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.

[lfkwtz]

locking this until I get some feedback on whether this branch solves the issue: https://github.com/lawnstarter/react-native-picker-select/tree/801

go ahead and open a new issue if that doesn't solve it

[lfkwtz]

haven't seen any new issues for this in the past week. can anyone confirm the new branch solved their issue?

[schie]

@lfkwtz, this doesn't seem to resolve the issue. I added your 801 branch, but no dice.

[ldthorne]

@lfkwtz upgrading from 8.0.0 to your 801 branch resolved the error for me. Just had to remember to restart metro bundler and clear its cache. Thank you!

[ldthorne]

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

[plgrazon]

I just want to chime in this is happening on my end as well version 8.0.0

[jpaulomotta]

@lfkwtz using the branch https://github.com/lawnstarter/react-native-picker-select/tree/801 solved the issue.

Had to change package.json to

"react-native-picker-select": "lawnstarter/react-native-picker-select#801",

[plgrazon]

@lfkwtz using the branch https://github.com/lawnstarter/react-native-picker-select/tree/801 solved the issue.

Had to change package.json to

"react-native-picker-select": "lawnstarter/react-native-picker-select#801",

Will this branch be ever merged to master?

[plgrazon]

Doesn't work on my end as well. Will downgrade to 7.0.0

[lfkwtz]

@lfkwtz using the branch https://github.com/lawnstarter/react-native-picker-select/tree/801 solved the issue.
Had to change package.json to

"react-native-picker-select": "lawnstarter/react-native-picker-select#801",

Will this branch be ever merged to master?

did that branch work?

[plgrazon]

@lfkwtz Unfortunately the branch didn't work. I'm switching to 7.0.0. I will ignore the warning for now.

[vitorbertolucci]

I had this issue with expo SDK 38 and fixed it by upgrading to 39 and then reinstalling my packages

npm install -g expo-cli

restart cmd

expo update
rm -rf node_modules
rm yarn.lock
yarn install

Beware though, that there might be a few breaking changes when upgrading to new SDK as described in expo blog

[bitttttten]

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

🥳

[lumberman]

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

[lfkwtz]

pushed out 8.0.1 and updated the readme

[plgrazon]

pushed out 8.0.1 and updated the readme

Thanks! Will try this

Edit:

Working on iOS but broke my Android build.

[doantu05150]

install: npx pod-install

[ridhuandaud]

After installing
npm install @react-native-community/picker
I run
cd ios
pod install
It worked for me

[piyush4669]

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

[mlazari]

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.

[AregbesolaOJ]

Thank you @mlazari 👏🏼 your answer worked for me....

[mlazari]

@AregbesolaOJ The solution was provided by someone else above and it's also mentioned in README now, so I can't take credit for it :) I just mentioned what could be the cause of the issue.

[pseudozach]

still not working for me...
"expo": "~37.0.3",
"@react-native-picker/picker": "^1.9.6",
"react-native-picker-select": "^8.0.4",

[FaizyQadri]

I had this issue with expo SDK 38 and fixed it by upgrading to 39 and then reinstalling my packages

npm install -g expo-cli

restart cmd

expo update
rm -rf node_modules
rm yarn.lock
yarn install

Beware though, that there might be a few breaking changes when upgrading to new SDK as described in expo blog

whats the solution for react-native-cli ?

[zhlee1997]

install both

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

will do the tricks

[nikdo]

@react-native-picker/[email protected]
[email protected]

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.