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

user_9378367 0
Viewed 2647

Overview:

I built an NPM library using TypeScript and it's been almost 9 months since I've last updated it (I didn't have the time). However, it uses the following libraries:

  1. react-native-modal
  2. @react-native-picker/picker (Used to be @react-native-community/picker, but that library is now deprecated in favor of the new library)
  3. @react-native-community/datetimepicker

My Library (react-native-ultimate-modal-picker) package.json:

I have all 3 of the listed libraries above set as peerDependencies, but I'm not sure if I'm missing something else like podfiles.

"peerDependencies": {
  "@react-native-community/datetimepicker": ">=3.0.0",
  "@react-native-picker/picker": ">=1.8.3",
  "react": "*",
  "react-native": "*",
  "react-native-modal": ">=11.0.0"
},

What Works:

The code works when running in the iOS Simulator, but when adding the my library react-native-ultimate-modal-picker to a project, it gives the error.

Error:

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

Imported NPM Library into project:

import { DropdownList } from 'react-native-ultimate-modal-picker';

const testItems: Array<PickerValue> = [
  { label: '1', value: '1' },
];

<DropdownList
  title="Test"
  items={testItems}
  onChange={(value: string) => console.log(value)}
/>

Github Repo (My Library that currently isn't working)

https://github.com/jefelewis/react-native-ultimate-modal-picker

Possible Reasons For Issues:

  • podfiles?
  • Cache?
  • Improper build/export of NPM library?
npm react-native reactjs libraries
5 Answers

Can try steps below:

  1. rm -rf node_modules && yarn cache clean && yarn install
  2. cd ios && pod install
  3. Open xCode from yourapp.xcworkspace file inside ios folder.
  4. Select Clean Build Folder from xCode product menu.
  5. Run your app directly from xCode product menu.
user_45647930

add this line in your podfile:

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

the path you may need change to your real path like others in your podfile and pod install again.

user_62341360

In case you are using react-native-picker-select with RN above 0.60 you also need to install @react-native-community/picker (not sure why it is not a dependency of it...)

npm install @react-native-community/picker

pod-install
user_18469930
user_57397400

For to work install both npm packages and pod install or add these lines in your package.json and pod install

"@react-native-picker/picker": "^2.4.4",

"react-native-picker-select": "^8.0.4",

like this:

"dependencies": {
    "@react-native-picker/picker": "^2.4.4",
    "react": "18.1.0",
    "react-native": "0.70.1",
    "react-native-picker-select": "^8.0.4"
  },
user_79400630
Related