Невозможно получить панель вкладок с помощью TabBarIOS

Question

Я разрабатываю приложение React Native. Я хочу добавить панель вкладок внизу экрана. Ниже кода:

TabIndex.js:

import React,{Component} from 'react';
import {Text,TabBarIOS,View} from 'react-native';

export default class TabIndex extends Component{
constructor(props){
    super(props);

    this.state = {
        selectedTab:''
    }
}
changeTabs(tabId){
    this.setState({
        selectedTab:tabId
    })
}
render(){
    return (
        <TabBarIOS>
            <TabBarIOS.Item
            selected = {this.state.selectedTab === 'tab1'}
            systemIcon = 'bookmarks'
            onPress = {() => this.changeTabs('tab1')}
            >
                <View>
                    <Text>Tab 1</Text>
                </View>
            </TabBarIOS.Item>
           <TabBarIOS.Item
            selected = {this.state.selectedTab === 'tab2'}
            systemIcon = 'contacts'
            onPress = {() => this.changeTabs('tab2')}
            >
                <View>
                    <Text>Tab 2</Text>
                </View>
            </TabBarIOS.Item>
            <TabBarIOS.Item
            selected = {this.state.selectedTab === 'tab3'}
            systemIcon = 'favorites'
            onPress = {() => this.changeTabs('tab3')}
            >
                <View>
                    <Text>Tab 3</Text>
                </View>
            </TabBarIOS.Item> 
        </TabBarIOS>
    )
  }
 }

Я вызываю этот TabIndex.js на своем домашнем экране MainPage.js:

import React from 'react';
import {View,StyleSheet,FlatList} from 'react-native';
import { CATEGORIES} from '../../data/Catogories';
import CategoryGridTile from '../../components/FR/CategoryGridTile';
import { HeaderButtons, Item } from 'react-navigation-header-buttons';
import HeaderButton from '../../components/UI/HeaderButton'; 
import Background from '../../components/FR/Background';
import TabIndex from '../../components/UI/TabIndex';


const MainPage = props => {

const renderGridItem = itemData => {
    return <CategoryGridTile 
    icon={itemData.item.icon}
    title={itemData.item.title} 
    color={itemData.item.color}
    screenToGo={itemData.item.screenToGo}
    onSelect={()=>{
    props.navigation.navigate({routeName:(itemData.item.screenToGo),params:
  {
    categoryId:itemData.item.id
  }
  })
  }}/>

  };
  return (
  <View>
  <View>
  <Background />
  </View>
  <View style={{paddingTop:100}}>
  <FlatList
  keyExtractor={(item,index) => item.id}
  data={CATEGORIES}
  renderItem={renderGridItem}
  numColumns={2}
  />
  </View>
  <TabIndex />
  </View>
  );
  };

  MainPage.navigationOptions = navData =>{
  return{
  headerTitle: 'Home',
  headerStyle: {
  backgroundColor: '#4bf773',
   },

  headerLeft: () =>
  <HeaderButtons HeaderButtonComponent={HeaderButton}>
    <Item
      title="Menu"
      iconName={Platform.OS === 'android' ? 'md-menu' : 'ios-menu'}
      onPress={() => {
        navData.navigation.toggleDrawer();
       //navData.navigation.navigate('Drawer');
      }}
    />
  </HeaderButtons>
 }

 };

 const styles = StyleSheet.create({
 screen:{
    flex:1,
    justifyContent:'center',
    alignContent:'center'
 },
 actionButtonIcon: {
    fontSize: 20,
    height: 22,
    color: 'white',
  }

 })
 export default MainPage;

Но после запуска кода я получаю следующую ошибку:

undefined не является объектом (оценка '_reactNative.TabBarIOS.Item')

Может ли кто-нибудь помочь мне, где я делаю ошибку?

Заранее спасибо.