React native tab navigation screen title not showing

Question

I have created 2 tabs with use of createStackNavigator and createBottomTabNavigator, below is a screenshot

My App.js code is below

import React from 'react';
import { StatusBar, View, Text } from 'react-native';
import MainNavigator from './src/navigation';

export default class App extends React.Component {
  render() {
    return (
        <View style={{ flex:1 }}>
            <StatusBar backgroundColor="#000000" barStyle="light-content"/>
            <MainNavigator/>
        </View>
    );
  }
}

and src/navigation/index.js which included in App.js is as below

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  StatusBar,
  Text,
  View
} from 'react-native';
import { createBottomTabNavigator, createStackNavigator } from 'react-navigation';
import { Icon } from 'react-native-elements';
import Colors from '../constants/Colors';

import Splash from '../components/Splash/Splash';
import Login from '../components/Login/Login';
import Home from '../components/Home/Home';
import Profile from '../components/Profile/Profile';

const MainNavigator = createStackNavigator({
    // Splash: {screen: Splash, navigationOptions:{ header: null, title: 'Splash'}},
    // Login: {screen: Login, navigationOptions:{ header: null, title: 'Login'}},
    // Home: {screen: Home, navigationOptions:{ title: 'Home'}}
    Root: {
        screen: createBottomTabNavigator({
            home: {
              screen: Home,
              navigationOptions: {
                title: 'Home',
                headerTitle: 'Home',
                tabBarLabel: 'Home',
                tabBarIcon: ({ tintColor, focused }) => (
                  <Icon
                  name={'home'}
                  size={24}
                  color={focused ? Colors.tabIconSelected : Colors.tabIconDefault}
                  />
                ),
              }
            },
            profile: {
              screen: Profile,
              navigationOptions: {
                tabBarLabel: 'Profile',
                tabBarIcon: ({ tintColor, focused }) => (
                  <Icon
                  name={'account-circle'}
                  size={24}
                  color={focused ? Colors.tabIconSelected : Colors.tabIconDefault}
                  />
                ),
              }
            }
        },
        {
          tabBarOptions: {
            activeTintColor: Colors.tintColor,
            showLabel: true,
            showIcon: true,
            indicatorStyle: {
              backgroundColor: 'transparent'
            },
            iconStyle: {
              width: 24,
              height: 24
            },
            style: {
              backgroundColor: '#eeeeee',
            },
            tabBarIcon: ({ tintColor }) => {Colors.darkTintColor},
          },
          lazy: true,
          tabBarPosition: 'bottom',
        }),
    }
});

export default MainNavigator;

I want to show title, and I tried with different methods but not worked. Please help me to resolve this issue.

Answer 1

Set navigationOptions for createBottomTabNavigator . Here is full code :

const TabNav = createBottomTabNavigator(
  {
    home: {
      screen: Home,
      navigationOptions: {
        title: 'Home',
        headerTitle: 'Home',
        tabBarLabel: 'Home',
        tabBarIcon: ({ tintColor, focused }) => (
          <Icon
            name={'home'}
            size={24}
            color={focused ? Colors.tabIconSelected : Colors.tabIconDefault}
          />
        ),
      }
    },
    profile: {
      screen: Profile,
      navigationOptions: {
        tabBarLabel: 'Profile',
        tabBarIcon: ({ tintColor, focused }) => (
          <Icon
            name={'account-circle'}
            size={24}
            color={focused ? Colors.tabIconSelected : Colors.tabIconDefault}
          />
        ),
      }
    }
  },
  {
    tabBarPosition: 'bottom',
    animationEnabled: false,
    swipeEnabled: false,
  }
);

TabNav.navigationOptions = ({ navigation }) => {
  let { routeName } = navigation.state.routes[navigation.state.index];
  let title;
  if (routeName === 'home') {
    title = 'Home';
  } else if (routeName === 'profile') {
    title = 'Profile';
  }
  return {
    title,
  };
};

const MainNavigator = createStackNavigator({
  // Splash: {screen: Splash, navigationOptions:{ header: null, title: 'Splash'}},
  // Login: {screen: Login, navigationOptions:{ header: null, title: 'Login'}},
  // Home: {screen: Home, navigationOptions:{ title: 'Home'}}
  Root: {
    screen: TabNav
  }
});

export default MainNavigator;

Answer 2

import {createBottomTabNavigator} from 'react-navigation-tabs';

//TODO Bottom tab
const BottomTabNav = createBottomTabNavigator(
  {
    home: {
      screen: Comments,
      navigationOptions: {
        title: 'Home',
        headerTitle: 'Home',
        tabBarLabel: 'Home',
        tabBarIcon: ({ tintColor, focused }) => (
          <Icon
            name={'home'}
            size={24}
            //color={focused ? Colors.tabIconSelected : Colors.tabIconDefault}
          />
        ),
      }
    },
    profile: {
      screen: PreviousAlert,
      navigationOptions: {
        tabBarLabel: 'Profile',
        tabBarIcon: ({ tintColor, focused }) => (
          <Icon
            name={'account-circle'}
            size={24}
//            color={focused ? Colors.tabIconSelected : Colors.tabIconDefault}
          />
        ),
      }
    }
  },
  {
    tabBarPosition: 'bottom',
    animationEnabled: false,
    swipeEnabled: false,
  }
);

BottomTabNav.navigationOptions = ({ navigation }) => {
  let { routeName } = navigation.state.routes[navigation.state.index];
  let title;
  if (routeName === 'home') {
    title = 'Home';
  } else if (routeName === 'profile') {
    title = 'Profile';
  }
  return {
    title,
  };
};
//TODO Bottom tab


const AppStack = createStackNavigator(
    {
        PreviousAlertScreen: {
            screen: BottomTabNav
        }
    },
);