I am using React Navigation v5 with React Native Web to create a chat UI similar to Slack, Discord, Messages for Web, etc. I'm using Drawer Navigator with custom drawer content containing links to a Chat screen passing a param for the chat ID. Using linking on the NavigationContainer, clicking each link changes the browser URL to /chat/:id. The problem I am facing is that each navigation to a different chat URL does not add to the browser history, so using the browser back button navigates the user wherever they were before clicking the first chat URL - they are not able to use the browser back button to cycle back through their previously selected chats.
I suspect this is related to how navigation.navigate() reuses an existing screen if you navigate to the same screen with different params (source). An alternative might be to use navigation.push(), but I haven't been able to get this working within a drawer context and would also hesitate to keep pushing new screens onto the stack as the user is navigating back and forth between different chats.
Example of my drawer navigator:
<Drawer.Navigator
openByDefault
drawerType='permanent'
drawerContent={props => <DrawerContent {...props />}
>
<Drawer.Screen name="Landing" component={LandingScreen} />
<Drawer.Screen name="Chat" component={ChatScreen} />
</Drawer.Navigator>
Within DrawerContent, there is a FlatList of chat items, each with an onPress handler such as:
const onPress = (chatId) => {
navigation.navigate('Chat', {id: chatId});
};
The drawer navigator itself is a screen within a Stack Navigator:
<Stack.Navigator>
<Stack.Screen name="Chats" component={ChatNavigator} />
<Stack.Screen name="Settings" component={Settings} />
</Stack.Navigator>
Anyone have any advice on this approach? Is there a way I can use the existing behaviour of the drawer navigator on web while being able to navigate to the same screen multiple times with different params with full browser history support?