Error: Element type is invalid expected a string(for built in components) or a class/function (for composite functions) but got undefined

Question

I am using TabBarIOS in react native,and running it on android emulator, but while using TabBarIOS.Item I am getting following error Element type is invalid expected a string(for built in components) or a class/function (for composite functions) but got undefined check render method of Approvals

render() method of Approvals is as follows

render(){

  return (
    <View style={styles.container}>
        <View style={styles.strip}>
            <Image style={{width:50, height:30,padding:10,top:5}} source={require('./drawable/drawable/asap.png')}/>
            <Text style={{fontSize:20,color:'white',bottom:20,left:60,padding:10}}>Approvals</Text>
        </View>
        <TabBarIOS selectedTab={this.state.selectedTab}>
            <TabBarIOS.Item
            title="Pending"
            icon={{uri:'./drawable/drawable/approvalbadge.png',scale:3}}
              selected={this.state.selectedTab==='pending'}
              onPress={() => {
                  this.setState({
                      selectedTab: 'pending',
                  });
              }}>
                <Pending>
            </TabBarIOS.Item>

         </TabBarIOS>
    </View>

  );

}

The error is in this section only cause if I remove TabBarIOS and place it doesn't give any error. Please Help me to solve this issue.

Answer 1

When you import TabBarIOS it is imported as undefined, because you can not use it in android app. Than you call

<TabBarIOS selectedTab={this.state.sele 

it is interpreted as undefined You better use external implementation instead (something like https://github.com/exponentjs/react-native-tab-navigator) or write your own.

Answer 2

I didn't read the question properly. You're trying to use an IOS component for an android app. But you cannot.

The Component with IOS and Android suffix will only work with IOS and Android app respectively. If you need to use cross-platform Components then you'll have to use Components without IOS and Android suffix or use 3rd party Components.

For example, Navigator works for both ios and android but NavigatorIOS works only for ios.

In this case you'll have to use something like these:

https://github.com/exponentjs/react-native-tab-navigator

https://github.com/alinz/react-native-tabbar