lawnstarter / react-native-picker-select

🔽 A Picker component for React Native which emulates the native <select> interfaces for iOS and Android
https://npmjs.com/package/react-native-picker-select
MIT License
1.75k stars 498 forks source link

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

Closed Kamalnrf closed 3 years ago

Kamalnrf commented 4 years ago

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

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 commented 4 years ago

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 commented 4 years ago

The same issue happened to me, any idea guys?

lfkwtz commented 4 years ago

Are you using Expo? If so, what version?

nicolashemonic commented 4 years ago

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 commented 4 years ago

[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

PedroBern commented 4 years ago

Same error here on a managed expo project sdk 38

dungtran-groove commented 4 years ago

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 commented 4 years ago

Going back to ver 7.0.0 solve it to me.

anmlkh commented 4 years ago

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

SanjanaTailor commented 4 years ago

[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.

A-Nabil commented 4 years ago

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.

zcaceres commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

Abdullah-Shamhan commented 4 years ago

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

lfkwtz commented 4 years ago

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 commented 4 years ago

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

Maoravitan commented 4 years ago

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 commented 4 years ago

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

julitroalves commented 4 years ago

Same issue with react-native-picker-select 8.0.0 version and @react-native-community/picker@1.6.6

ghost commented 4 years ago

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

lfkwtz commented 4 years ago

Has anyone tried the branch I posted?

julitroalves commented 4 years ago

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.

andreslon commented 4 years ago

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

npx pod-install

remember to stop your debugging mode and start it again.

ramonvermeulen commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

schie commented 4 years ago

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

ldthorne commented 4 years ago

@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 commented 4 years ago

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 commented 4 years ago

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

jpaulomotta commented 4 years ago

@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 commented 4 years ago

@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 commented 4 years ago

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

lfkwtz commented 4 years ago

@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 commented 4 years ago

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

vitorbertolucci commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

lfkwtz commented 3 years ago

pushed out 8.0.1 and updated the readme

plgrazon commented 3 years ago

pushed out 8.0.1 and updated the readme

Thanks! Will try this

Edit:

Working on iOS but broke my Android build.

doantu05150 commented 3 years ago

install: npx pod-install

ridhuandaud commented 3 years ago

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

piyush4669 commented 3 years ago

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

mlazari commented 3 years ago

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 commented 3 years ago

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

mlazari commented 3 years ago

@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 commented 3 years ago

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

FaizyQadri commented 3 years ago

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 ?