react-native-picker / picker

Picker is a cross-platform UI component for selecting an item from a list of options.
MIT License
1.47k stars 278 forks source link

`RNCAndroidDropdownPicker was not found in the UIManager` #428

Open Twinbird24 opened 2 years ago

Twinbird24 commented 2 years ago

I'm getting an error on both iOS and android (requireNativeComponent: "RNCPicker" was not found in the UIManager and RNCAndroidDropdownPicker was not found in the UIManager, respectively) when I try to use a component from a private component library that wraps this picker.

The component library has @react-native-picker/picker (2.4.1) installed as a dependency, and loads the picker just fine when running tests or inside of Storybook. This leads me to believe that this picker loads some native code (i.e. via autolinking), which somehow isn't being properly loaded when I pull in this picker through the 3rd party component library.

fabiofa87 commented 2 years ago

On Android I fixed this problem trying a Manual Installation.

Android Open application file (android/app/src/main/java/[...]/MainApplication.java) Add import com.reactnativecommunity.picker.RNCPickerPackage; to the imports at the top of the file Add new RNCPickerPackage() to the list returned by the getPackages() method Append the following lines to android/settings.gradle: include ':@react-native-picker_picker' project(':@react-native-picker_picker').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-picker/picker/android') Insert the following lines inside the dependencies block in android/app/build.gradle: implementation project(path: ':@react-native-picker_picker')

I didn't try on iOS tho.

Don't forget to restart with npx react-native start and rebuild your project.

Good luck.

YakovlevCoded commented 2 years ago

@Twinbird24 Hi!

I solved this problem only by creating a new expo application via the expo cli. Then I added the Picker package and everything worked. After that, I moved the updated package.json parts in the main application. So in my package.json updated expo to version 45 and the rest of the dependencies that were needed for this.

Here is my package.json

"dependencies": {
    "@react-native-async-storage/async-storage": "~1.17.3",
    "@react-native-community/datetimepicker": "6.1.2",
    "@react-native-picker/picker": "2.4.0",
    "expo": "~45.0.0",
    "expo-blur": "~11.1.0",
    "expo-linear-gradient": "~11.3.0",
    "expo-splash-screen": "~0.15.1",
    "expo-status-bar": "~1.3.0",
    "expo-updates": "~0.13.3",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-native": "0.68.2",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-svg": "12.3.0",
    "react-native-web": "0.17.7",
    "victory-native": "^36.2.1"
  }
Twinbird24 commented 2 years ago

@YakovlevCoded I'm not sure I understand your solution. The issue is not that I'm having trouble loading the Picker in my app per se, it's that I was having trouble loading it when it was installed as part of a 3rd party package (i.e. a component library dependency had this Picker as its dependency). I'm also not using Expo so I'm not sure what you said applies to me anyway.

@fabiofa87 I think the same applies to your solution, my problem wasn't getting the Picker to load in my app, it's getting it to load without having to explicitly add it as a dependency because it's already a dependency of the component lib that I'm importing.

I have the Picker installed as a dependency currently and it's working, and have the Picker as a peer-dependency on the 3rd party component lib. It's not the best solution but it'll have to do for now. Otherwise I think I would have to add some script to my component lib to set-up autolinking or modify the native code of the consumer to get the picker to work without needing to specify it as a peer-dependency.

Keshavdulal commented 2 years ago

Try Restarting the Simulator/Metro Bundler after pod install.

https://github.com/react-native-picker/picker/issues/45#issuecomment-576119283

I forget this every single time!

palmer-rm commented 1 year ago

@Twinbird24

I'm getting the exact same error when importing a component from an external library that uses this package.

Similarly the component works fine when the consuming app directly adds this package to its dependencies, but not without doing that.

Did you ever find a solution?

I'm also going to have to add it to the peer deps of the library and add it to the main app, but like you say it's less than ideal.

Twinbird24 commented 1 year ago

@palmer-rm Haven't found anything yet, but I haven't been looking. I still have it as a peer dep in the component library and have it added to my main project as a dependency—this has been working fine so far so haven't been spending more time on finding a proper solution.