currently in my app, the browser tab title is just the name of the screen. However I want to set the tab title to {APP_NAME} - {PAGE_NAME}
. I am using a <Stack.Navigator/>
and I know that you use the screenOptions
to give a custom title, but I cannot access the route
name.
<Stack.Navigator
initialRouteName={Pages.HOME}
screenOptions={{
title: `MyAppName - ${route.name}`,
header: ({ navigation, back, route }) => (
<Navbar
navigation={navigation}
back={back}
title={route.name}
navigationOptions={[
Pages.HOME,
Pages.MY_MESSAGES,
Pages.PROFILE_AND_ACCOUNT,
Pages.MY_ACCOUNT,
Pages.FAQ,
]}
actions={[logoutAction]}
/>
),
}}
>
As you can see, the header
param contains route
, but I cannot/don't know how to get this into the title.
Any help would be appreciated, thanks.
You don't need to do this for every screen. You can customize the document title in
NavigationContainer
https://reactnavigation.org/docs/navigation-container/#documenttitle
Though also if you need the route name in options as mentioned in docs:
https://reactnavigation.org/docs/screen-options/#screenoptions-prop-on-the-navigator