How to set browser tab title with route name in React Native

Question

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.

score 1 · Answer 1 · answered Mar 19 '22 at 01:57

You don't need to do this for every screen. You can customize the document title in NavigationContainer

<NavigationContainer
  documentTitle={{
    formatter: (options, route) =>
      `MyAppName - ${options?.title ?? route?.name}`
  }}
>
  {/* content */}
</NavigationContainer>

https://reactnavigation.org/docs/navigation-container/#documenttitle

Though also if you need the route name in options as mentioned in docs:

<Stack.Navigator
  screenOptions={({ route }) => ({
    title: route.name,
  })}
>

https://reactnavigation.org/docs/screen-options/#screenoptions-prop-on-the-navigator

How to set browser tab title with route name in React Native

1 Answers1