How to set document title by React Native Web with react-navigation?

This has taken me the best part of my morning to figure out. There is a way to set the title in one place, rather than on each screen.

 <NavigationContainer
    documentTitle={{
      formatter: (options, route) => 
        `${options?.title ?? route?.name} - My Cool App`,
    }}
 >

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

As you are making this change on the Navigation Container, this also works with nested navigations.

I figured out that Expo for Web basically sets the screen title as the document title. So I did something like this:

import { Platform } from 'react-native';
const title = (text) => Platform.select({ web: `My Web App | ${text}`, default: text });

<Stack.Navigator screenOptions={{ headerShown: false }}>
    <Stack.Screen name="root" component={RootScreen} options={{ title: title('root') }} />
    <Stack.Screen name="search" component={SearchScreen} options={{ title: title('search') }} />
</Stack.Navigator>

You can then amend the title function to return the expected title for your various screens.

You can call navigation.setOptions({ title: 'some title' }) within your react components

https://reactnavigation.org/docs/headers/#updating-options-with-setoptions