How to add title / header title to each screen which we navigate through create bottom tab navigator ( react navigation v5)?

user_13963037 0
Viewed 613

My BottomNavigation component:

const Tab = createBottomTabNavigator();

class BottomNavigation extends React.Component {
  render() {
    return (
      <Tab.Navigator initialRouteName="Home" backBehavior="initialRoute">
        <Tab.Screen
          name="Home"
          component={HomeScreen}
          options={{
            tabBarLabel: 'Start',
            tabBarIcon: ({ color, size }) => (
              <Image source={require('../../assets/images/start-tab.png')} />
            ),
            title: 'Welcome',
          }}
        />
        <Tab.Screen
          name="Science"
          component={Profile}
          options={{
            tabBarLabel: 'Profile',
            tabBarIcon: ({ color, size }) => (
              <Image source={require('../../assets/images/science-tab.png')} />
            ),
          }}
        />
      </Tab.Navigator>
    );
  }
}
react-navigation react-native
1 Answers

You need to create StackNavigator to show header title in bottom navigation.

By setting navigationOptions inside the component, you apply it to the navigation element that is calling the component.

So in your case, the title you define in About applies to the bottom tab, and not to the screen as you would like to.

Rather than setting navigationOptions as a static property inside the component, you need to define it directly when creating the stack navigation.

In addition to this, I think you want to nest the stack inside the bottom tab navigation, not the other way around. By doing so, you can have a different title for each screen.

Here is an example:

const AboutStack = createStackNavigator({ About: { screen: About, navigationOptions: { title: 'About Title' } } });
const CreditStack = createStackNavigator({ Credit: { screen: Credit, navigationOptions: { title: 'Credit Title' } } });

const MainNavigator = createBottomTabNavigator({
  About: { screen: AboutStack, navigationOptions: { title: 'About Label' } },
  Credit: { screen: CreditStack, navigationOptions: { title: 'Credit Label' } },
});

const AppContainer = createAppContainer(MainNavigator);

Like this, the header title will be "About Title" and the tab label "About Label".

user_118124500
Related