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>
);
};
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>
);
};