Cannot pass correctly Components to NavigatorIOS when using with TabBarIOS

Question

I'm new to ReactNative and started to using TabBarIOS component for a project. I have TabBarIOS component which has 5 different TabBarIOS.Item Component. These each all point another component to present. These different components are all have different backgroundColor's and styles and titles but when I change the selectedTab the change has happened but the properties of components such as backgroundColor not affect the presented component. For testing, I've log a text in componentWillMount method of the Component class for each one. And they logged successfully. Here is the partial components. For the first Component which is named as Restaurants the title is correctly showing in navigationItem but in others navigationItem's title is empty.

I've called my components as ViewControllers.

class RestaurantsComponent extends Component{

    componentWillMount(){
        console.log('restauranscomponent will mounted');
    }

    render(){
        return(
            <View style={{flex:1, backgroundColor:'blue'}}>
                <Text>ASDFSADF</Text>
            </View>
        )
    }
}


class SearchViewController extends Component{

    componentWillMount(){
        console.log('search view controller will mounted');
    }

    render(){
        return(
            <View style={{flex:1, backgroundColor:'green'}}>
                <Text>askfkjasljkdfjkla</Text>
            </View>
        )
    }
}

etc..

Here is main tabbar Component class:

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

        this.state = {
            selectedTab: 'news'
        }
    }

    changeTab(selectedTab){
        this.setState({selectedTab})
    }

    render(){
        const { selectedTab } = this.state

        const styles = {
            backgroundColor: 'red'
        };

        return(
                    <TabBarIOS barTintColor="white"
                            unselectedItemTintColor="gray"
                            tintColor="red" 
                            style={{flex:1}}
                    >
                        <TabBarIOS.Item
                            selected={selectedTab === 'news'}
                            title="Restaurants"
                            icon={require('./assets/restaurants.png')}
                            onPress={() => this.changeTab('news')}
                        >

                        <NavigatorIOS
                                style={styles.nav}
                                initialRoute={{
                                    component: RestaurantsComponent,
                                    title : 'Restaurants'
                                   }}
                            />
                        </TabBarIOS.Item>

                        <TabBarIOS.Item
                            title="Search"
                            selected={selectedTab === 'news2'}
                            onPress={() => this.changeTab('news2')}
                            icon={require('./assets/searchIco.png')}
                        >
                            <NavigatorIOS
                                style={styles.nav}
                                initialRoute={{
                                    component: AnotherComponent,
                                    title : 'Search'
                                   }}
                            />
                        </TabBarIOS.Item>
                        ...
                          .../>

Here is the Component in navigationItem for Restaurants

And for other else:

I'vent cut the tabBar item for the screenshot but the TabBarIOS is successfully works if you mind it.

Is there any bug which is currently which cause from me or what happens to navigationItem's title attributes?

Answer 1

I've found my answer by the way I've not figured out what was happening in here but when looking into documentation and some articles, the use of NavigatorIOS is currently making mess.And there is a cool question & answer that I think its important to get idea of createNavigator... .

Here is the link.

There is a close approach for using TabBar, Navigation etc which are named createStackNavigator and createBottomTabNavigator. As the names tell us, createStackNavigator is currently work like UINavigationController and also createBottomTabNavigator is working like UITabBarController. So this is the basic implementation of these approach.

const firstTabStack = createStackNavigator({
  HomeAlways: {
    navigationOptions:{
      title:'WASSUP1'
    },
    screen:BooksNav
  }
})

const secondTabStack = createStackNavigator({
  HelpAlways: {
    navigationOptions:{
      title:'WASSUP2'
    },
    screen:AddBook
  }
})

And finally here we come with Tab implementation.

const Tab = createBottomTabNavigator({
    Home: {
    screen: firstTabStack,
    navigationOptions:{
      title:'title1'
    }
  },
  Another: {
    screen: secondTabStack,
    navigationOptions:{
      title:'title2'
    }
  }
});

What did I do with these code?

For iOS Developers to get understand what is going on in there, there is a 2 Controller (UIViewController or Component in RN), and these have different UINavigationController's and also different titles. And all of these controllers will going to stack of the UITabBarController' viewControllers.

The images in below are proof of the successfully running. ,