react native - How to put the title of screens in header of each screen?

Question

I need a hand to understand the behavior of my screens on my application.

I just noticed that, whatever screen I'm browsing, the title of the screen at the top of the header is always "Orders". Of course, I want each header to display the screen title, so I think there is some information missing in my navigation file.

However, I don't really know where or how to add the title of the screen in the header. However, I put the name/title of the screen in each Stack. screen.

Could you guide me, help me and explain to me where is my mistake, please? Thank you for reading me.

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();


const screenOptionStyle = {
  headerStyle: {
    backgroundColor: "#F78400",
  },
  headerTintColor: "white",
  headerBackTitle: "Back",
  backgroundColor:'#f7f6f6'
};


export const MainStackNavigator = () => {
  return (
   <Stack.Navigator screenOptions={screenOptionStyle}>      
      <Stack.Screen name = 'Orders' component = {BottomTabNavigator} options={{ title: i18n.t("orders.title") }}/> 
      <Stack.Screen name = 'Authentication' component = {Authentication} options={{title: i18n.t("authentication.title"), headerShown: false }}/>
      <Stack.Screen name = 'Account' component = {Account} options={{ title: i18n.t("account.title") }}/>
      <Stack.Screen name = 'Activities' component = {Activities} options={{ title: i18n.t("activities.title") }}/> 
      <Stack.Screen name = 'Contact' component = {Contact} options={{ title: i18n.t("contact.title") }}/> 
      <Stack.Screen name = 'Login' component = {Login} options={{ title: i18n.t("login.title"), headerShown: false }}/>
      <Stack.Screen name = 'Register' component = {Register} options={{ title: i18n.t("register.title"), headerShown: false }}/>
      <Stack.Screen name = 'Reset' component = {Reset} options={{ title: i18n.t("reset.title") }}/>
      <Stack.Screen name = 'Tools' component = {Tools} options={{ title: i18n.t("tools.title") }}/>
      <Stack.Screen name = 'Scan' component = {Scan} options={{ title: i18n.t("scan.title") }}/>      
      <Stack.Screen name = 'Current' component = {Current} options={{ title: i18n.t("current.title") }}/>
      <Stack.Screen name = 'Completed' component = {Completed} options={{ title: i18n.t("completed.title") }}/>
      <Stack.Screen name = 'Products' component = {Products} options={{ title: i18n.t("products.title") }}/>
      <Stack.Screen name = 'ProductDetails' component = {ProductDetails} options={{ title: i18n.t("fiche.title") }}/>
      <Stack.Screen name = 'Information' component = {Information} options={{ title: i18n.t("information.title") }}/>
      <Stack.Screen name = 'Photos' component = {Photos} options={{ title: i18n.t("photos.title") }}/>
      <Stack.Screen name = 'Stock' component = {Stock} options={{ title: i18n.t("stock.title") }}/>
      <Stack.Screen name = 'Terms' component = {Terms} options={{ title: i18n.t("terms.title") }}/> 
      <Stack.Screen name = 'About' component = {About} options={{ title: i18n.t("about.title") }}/>      
      <Stack.Screen name = 'Tickets' component = {Tickets} options={{ title: i18n.t("tickets.title") }}/>
      <Stack.Screen name = 'Dashboard' component = {Dashboard} options={{ title: i18n.t("dashboard.title") }}/>
      <Stack.Screen name = 'Settings' component = {Settings} options={{ title: i18n.t("settings.title") }}/>
      <Stack.Screen name = 'Welcome' component = {Welcome} options={{ title: i18n.t("welcome.title") }}/>
      <Stack.Screen name = 'BottomTabNavigator' component = {BottomTabNavigator} options={{ title: i18n.t("welcome.title") }}/>
    </Stack.Navigator>
  );
}

export const BottomTabNavigator = () => {
  return (
    <Tab.Navigator tabBarOptions={{
      activeTintColor: 'black',
      labelStyle: {fontSize: 12, color: 'white'}, 
      style: {backgroundColor: '#F78400'},
    }}>      
      <Tab.Screen
          name={i18n.t("orders.title")}
          component={Orders}
          options={{
              tabBarIcon: ({ focused, horizontal, tintColor }) => {
                return (
                  <Image
                    source={require("../assets/images/orders.png")}
                    style={styles.icon}
                  />
                );
              }
          }}
        />
        <Tab.Screen
          name={i18n.t("dashboard.title")}
          component={Dashboard}
          options={{
            tabBarIcon: ({ focused, horizontal, tintColor }) => {
              return (
                <Image
                  source={require("../assets/images/dashboard.png")}
                  style={styles.icon}
                />
              );
            }
          }}
        />
        <Tab.Screen
          name={i18n.t("tools.title")}
          component={Tools}
          options={{
            tabBarIcon: ({ focused, horizontal, tintColor }) => {
              return (
                <Image
                  source={require("../assets/images/tools.png")}
                  style={styles.icon}
                />
              );
            }
          }}
        />
        <Tab.Screen
          name={i18n.t("settings.title")}
          component={Settings}
          options={{
            tabBarIcon: ({ focused, horizontal, tintColor }) => {
              return (
                <Image
                  source={require("../assets/images/settings.png")}
                  style={styles.icon}
                />
              );
            }
          }}
        />
    </Tab.Navigator>
  );
};

question from:https://stackoverflow.com/questions/65625908/how-to-put-the-title-of-screens-in-header-of-each-screen

Answer 1

Since you have nested BottomTabNavigation in stack screen. Title of the stack screen will always be same.

import {getFocusedRouteNameFromRoute} from '@react-navigation/native';
const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

const screenOptionStyle = {
  headerStyle: {
    backgroundColor: '#F78400',
  },
  headerTintColor: 'white',
  headerBackTitle: 'Back',
  backgroundColor: '#f7f6f6',
};

function getHeaderTitle(route) {
  const routeName = getFocusedRouteNameFromRoute(route) ?? 'OrdersTab';

  switch (routeName) {
    case 'OrdersTab':
      return i18n.t('orders.title');
    case 'DashboardTab':
      return i18n.t('dashboard.title');
    case 'ToolsTab':
      return i18n.t('tools.title');
    case 'SettingsTab':
      return i18n.t('settings.title');
  }
}

export const MainStackNavigator = () => {
  return (
    <Stack.Navigator screenOptions={screenOptionStyle}>
      <Stack.Screen
        name="Orders"
        component={BottomTabNavigator}
        options={({route}) => ({
          headerTitle: getHeaderTitle(route),
        })}
      />
      <Stack.Screen
        name="Authentication"
        component={Authentication}
        options={{title: i18n.t('authentication.title'), headerShown: false}}
      />
      <Stack.Screen
        name="Account"
        component={Account}
        options={{title: i18n.t('account.title')}}
      />
      <Stack.Screen
        name="Activities"
        component={Activities}
        options={{title: i18n.t('activities.title')}}
      />
      <Stack.Screen
        name="Contact"
        component={Contact}
        options={{title: i18n.t('contact.title')}}
      />
      <Stack.Screen
        name="Login"
        component={Login}
        options={{title: i18n.t('login.title'), headerShown: false}}
      />
      <Stack.Screen
        name="Register"
        component={Register}
        options={{title: i18n.t('register.title'), headerShown: false}}
      />
      <Stack.Screen
        name="Reset"
        component={Reset}
        options={{title: i18n.t('reset.title')}}
      />
      <Stack.Screen
        name="Tools"
        component={Tools}
        options={{title: i18n.t('tools.title')}}
      />
      <Stack.Screen
        name="Scan"
        component={Scan}
        options={{title: i18n.t('scan.title')}}
      />
      <Stack.Screen
        name="Current"
        component={Current}
        options={{title: i18n.t('current.title')}}
      />
      <Stack.Screen
        name="Completed"
        component={Completed}
        options={{title: i18n.t('completed.title')}}
      />
      <Stack.Screen
        name="Products"
        component={Products}
        options={{title: i18n.t('products.title')}}
      />
      <Stack.Screen
        name="ProductDetails"
        component={ProductDetails}
        options={{title: i18n.t('fiche.title')}}
      />
      <Stack.Screen
        name="Information"
        component={Information}
        options={{title: i18n.t('information.title')}}
      />
      <Stack.Screen
        name="Photos"
        component={Photos}
        options={{title: i18n.t('photos.title')}}
      />
      <Stack.Screen
        name="Stock"
        component={Stock}
        options={{title: i18n.t('stock.title')}}
      />
      <Stack.Screen
        name="Terms"
        component={Terms}
        options={{title: i18n.t('terms.title')}}
      />
      <Stack.Screen
        name="About"
        component={About}
        options={{title: i18n.t('about.title')}}
      />
      <Stack.Screen
        name="Tickets"
        component={Tickets}
        options={{title: i18n.t('tickets.title')}}
      />
      <Stack.Screen
        name="Dashboard"
        component={Dashboard}
        options={{title: i18n.t('dashboard.title')}}
      />
      <Stack.Screen
        name="Settings"
        component={Settings}
        options={{title: i18n.t('settings.title')}}
      />
      <Stack.Screen
        name="Welcome"
        component={Welcome}
        options={{title: i18n.t('welcome.title')}}
      />
      <Stack.Screen
        name="BottomTabNavigator"
        component={BottomTabNavigator}
        options={{title: i18n.t('welcome.title')}}
      />
    </Stack.Navigator>
  );
};

export const BottomTabNavigator = () => {
  return (
    <Tab.Navigator
      tabBarOptions={{
        activeTintColor: 'black',
        labelStyle: {fontSize: 12, color: 'white'},
        style: {backgroundColor: '#F78400'},
      }}>
      <Tab.Screen
        name={'OrdersTab'}
        component={Orders}
        options={{
          tabBarIcon: ({focused, horizontal, tintColor}) => {
            return (
              <Image
                source={require('../assets/images/orders.png')}
                style={styles.icon}
              />
            );
          },
        }}
      />
      <Tab.Screen
        name={'DashboardTab'}
        component={Dashboard}
        options={{
          tabBarIcon: ({focused, horizontal, tintColor}) => {
            return (
              <Image
                source={require('../assets/images/dashboard.png')}
                style={styles.icon}
              />
            );
          },
        }}
      />
      <Tab.Screen
        name={'ToolsTab'}
        component={Tools}
        options={{
          tabBarIcon: ({focused, horizontal, tintColor}) => {
            return (
              <Image
                source={require('../assets/images/tools.png')}
                style={styles.icon}
              />
            );
          },
        }}
      />
      <Tab.Screen
        name={'SettingsTab'}
        component={Settings}
        options={{
          tabBarIcon: ({focused, horizontal, tintColor}) => {
            return (
              <Image
                source={require('../assets/images/settings.png')}
                style={styles.icon}
              />
            );
          },
        }}
      />
    </Tab.Navigator>
  );
};