How to keep track of screen title when bottom navigation is used in react native?

Question

I am making use of bottom navigation in React Native and I have a header which is supposed to show on which screen I am at the moment. I am not sure how to change that text on Tab Bar press. I tried making use of onPress event but seems like it does not work.

Here is my code:

    <View style={styles.container}>

      <StatusBar barStyle="light-content" />
        <View style={styles.header}>
            <Text style={styles.headerText}>{headerText}</Text>
            <SettingsIcon />
        </View>

    <View style={styles.main}>

    <NavigationContainer >
     <Tab.Navigator initialRouteName="Home" tabBarOptions={{
           activeTintColor: '#FF9F0A',
           inactiveTintColor:'white',
           style: {
              backgroundColor: '#000000',//color you want to change
           }
         }}>
       <Tab.Screen name="Home" component={Home}  options={{
             tabBarLabel: 'HOME',
             tabBarIcon: ({ color, size }) => (
               <HomeTabIcon name="home" color={color} size={size} />
             ),
           }}/>
       <Tab.Screen name="Controls" component={Controls} options={{
             tabBarLabel: 'CONTROLS',
             tabBarIcon: ({ color, size }) => (
               <ControlsTabIcon name="controls" color={color} size={size} />
             ),
           }}/>
       <Tab.Screen   name="Charging" component={Charging} options={{
             tabBarLabel: 'CHARGING',
             tabBarIcon: ({ color, size }) => (
               <ChargingTabIcon name="charging"  color={color} size={size} />
             ),
           }}/>
   </Tab.Navigator>
   </NavigationContainer>
    </View>
    
  </View>

score 1 · Accepted Answer · answered May 01 '21 at 14:15

you can nest your tab navigator in a screen navigator.

You can change the title of your screen navigator header in function of the name of your active screen.

for more information read this.

import React from 'react';

import { NavigationContainer, getFocusedRouteNameFromRoute } from '@react-navigation/native';

import { createStackNavigator } from '@react-navigation/stack';

const RootStack = createStackNavigator();

const Tab = createBottomTabNavigator();

function getHeaderTitle(route : any) {
  // If the focused route is not found, we need to assume it's the initial screen
  // This can happen during if there hasn't been any navigation inside the screen
  // In our case, it's "Feed" as that's the first screen inside the navigator
  const routeName = getFocusedRouteNameFromRoute(route) ?? 'Home';

  console.log("name route = ", routeName);

  switch (routeName) {
    case 'Home':
      return 'name header tab1';
    case 'tab1':
      return 'name header tab1';
    case 'tab2':
      return 'name header tab2';
  }
}

const HomeTabs = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="tab1" component={Component1} />
      <Tab.Screen name="tab2" component={Component2} />
    </Tab.Navigator>
  );
};

function Root() {
  return (
    <NavigationContainer>
      <RootStack.Navigator>
        <RootStack.Screen 
          name="Home"
          component={HomeTabs}
          options={({ route }) => ({
            headerTitle: getHeaderTitle(route),
          })}
           />
      </RootStack.Navigator>
    </NavigationContainer>
  );
};

How to keep track of screen title when bottom navigation is used in react native?

1 Answers1