警告：React.createElement：类型在React Native Picker中无效

Question

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>
    );
  }
};

Answer 1

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

Answer 2

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>