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

Answer

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>

Advertisement

Answer