'Warning: React.createElement: type is invalid with React Native Picker

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check your code at AddCarScreen.js:30. ...

I keep getting this error and it says to check my code at line 30 which is the line where it dynamically generates picker items based on the array given to state in the constructor.

Styles is a correctly imported with export default in a different file. This javascript file will then be exported to the central drawer navigator in a different file.

    import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, Button, Picker } from 'react-native';
import styles from './StyleSheet.js';

export default class AddCarScreen extends Component {
  constructor(props){
super(props)

this.state = { 
  carBrand : "", 
  carBrandList : [ 'Ford', 'VW', 'Mazda' ]
};

}

  static navigationOptions = {
      drawerLabel: 'Add Car',
  }



 render() {

const { navigate } = this.props.navigation;

return(
  <View style = { styles.container }> 
    <Text style = { styles.screenTitle }> Add Car </Text>
    <Picker
      selectedValue = {this.state.carBrand}
      onValueChange = {(itemValue) => this.setState({ carBrand: itemValue })}>
      **{ this.state.carBrandList.map((item, index) => { return <Picker.item label = {item} value = {item} key = {index}/> } ) }**
    </Picker>
    <Button 
      onPress = {() => navigate('DrawerOpen')}
      title = "Menu"
    />
  </View>
    );
  }
};

javascript react-native

Solution 1:^[1]

I think this is a current bug with vanilla Picker. I couldn't get a map working either! I also found countless questions similar to this. In the meantime I couldn't wait and found this package and .map worked. React-native-smart-picker.

             <ScrollView >
                <View style={{ flex: 1, marginTop: 20 }}>
                    {this.state.models.length > 0 ?
                        <ScrollView >
                            <SmartPicker

                                expanded={this.state.expanded}
                                selectedValue={this.state.selectedModel}
                                label='Select Model'
                                onValueChange={this.handleChange.bind(this)}
                            >
                                {
                                    this.state.models.map((ele) => {
                                        return (<Picker.Item label={ele} value={ele} />)
                                    })
                                }
                            </SmartPicker>
                            <Button block onPress={() => this.props.vehicleModel(this.state.selectedModel)}>
                                <Text>Done</Text>
                            </Button>
                        </ScrollView>
                        : <Spinner />}

                </View>

            </ScrollView>

Solution 2:^[2]

You should change Picker.item to Picker.Item as it is at official docs: https://facebook.github.io/react-native/docs/picker.html

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Gavin Thomas
Solution 2	Kos

'Warning: React.createElement: type is invalid with React Native Picker

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]