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

Question

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?

Answer 1

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.

Answer 2

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