Invariant Violation: Tried to register two views with the same name RNCAndroidDropdownPicker

user_12647804 0
Viewed 12751

After importing and using the module react-native-picker:

import {Picker} from '@react-native-picker/picker';
 <Picker
    selectedValue={this.state.language}
    style={{height: 50, width: 100}}
    onValueChange={(itemValue, itemIndex) =>
              this.setState({language: itemValue})
        }>
    <Picker.Item label="Java" value="java" />
    <Picker.Item label="JavaScript" value="js" />
 </Picker>

I get the following error:

Invariant Violation: Tried to register two views with the same name RNCAndroidDropdownPicker

What went wrong here?

react-native javascript
5 Answers

To get rid of that, do the following:

Since the error is about registering two views with the same name, declare your Picker in this way:

import { Picker as SelectPicker } from '@react-native-picker/picker';

instead of import { Picker } from '@react-native-picker/picker';

and implement like this:

<SelectPicker
  selectedValue={this.state.language}
  style={{ height: 50, width: 100 }}
  onValueChange={(itemValue, itemIndex) =>
    this.setState({ language: itemValue })
  }>
  <SelectPicker.Item label="Java" value="java" />
  <SelectPicker.Item label="JavaScript" value="js" />
</SelectPicker>

If the above solution doesn't work, do this

$ npm uninstall --save-dev @react-native-picker/picker
$ npm i @react-native-picker/picker --save
$ cd android
$ ./gradlew clean
$ cd ..
$ react-native run-android

Update:

This is the issue with native-base. Uninstall native-base and reinstall like this:

$ npm uninstall native-base --save
$ npm install native-base --save

This issue has been fixed in the latest release of native-base.

user_61742710

Just update native-base to the latest version and the error is resolved.

user_125934370

The cause of the problem for me

An internal package used in the project had a dependency on @react-native-community/picker. And I was using native-base:2.15.2, which had a dependency on @react-native-picker/picker. So, there was a conflict between @react-native-community/picker and @react-native-picker/picker.

How I found the cause

Searched for picker in package-lock.json file and found two related packages given above.

Solution

I chose an older version of native-base:2.13.12, which had no dependency on @react-native-picker/picker.

Why I decided to choose a different version of native-base:

  1. I could not replace the internal package.
  2. I was not using Picker anywhere in the project directly.
  3. Even if I used it, I could use the one provided by @react-native-community/picker.

I hope it provides better insight.

Cheers!

user_14031180

The issue is that you have native-base imported and it has the Picker as a dependency, just use:

import { Picker } from 'native-base';

user_108952550

The issue is you might have multiple dependency with name 'Picker' in your react project.

To Identify the packages with same name try any one of the below way :

  1. If you are using smart editor, try to remove the existing Picker dependency from import. and try auto reimport. You will see multiple Pickers like
  • '@react-native-picker/picker'
  • '@react-native-community/picker'
  • 'native-base'
  1. or search for picker in 'package.json' or 'package-lock.json'.

Once you find the dependency with the same name, make changes in your project to use only 1 dependency ( '@react-native-community/picker' and '@react-native-picker/picker' are almost same, so choose any one and you just have to update the dependency in import ), then use below command and uninstall the other dependency.

npm uninstall <<package_name>>

like npm uninstall @react-native-community/picker.

and rerun the project.

user_77093270
Related