Repository: react-navigation/react-navigation

Issue #10263: [WEB] browser back button handling is broken
Created: 2022-01-14T07:58:00Z
Current behavior
Whenever the initial screen is reached, the rest of the history gets wiped out. Eg. when you navigate to:
FirstScreen -> HomeScreen -> SecondScreen and start going back with browser button, you won't be able to go back to FirstScreen.
What is worse, if your browser tab has a longer history, you will get out of the app unexpectedly, eg:
google.com -> FirstScreen -> HomeScreen -> SecondScreen -back-> HomeScreen -back-> google.com
Pasting minimal example below, it's App.js of freshly expo init-ed app.
import { Text, View, Pressable } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

const HomeScreen = ({navigation}) => {
  return <View>
    <Pressable onPress={() => {navigation.navigate('FirstScreen')}}>
      <Text>1. Go to first screen</Text>
    </Pressable>
    <Pressable onPress={() => {navigation.navigate('SecondScreen')}}>
      <Text>2. Go to second screen</Text>
    </Pressable>
  </View>
}

const FirstScreen = ({navigation}) => {
  return <View>
    <Pressable onPress={() => {navigation.navigate('HomeScreen')}}>
      <Text>Go to home screen</Text>
    </Pressable>
  </View>
}

const SecondScreen = ({}) => {
  return <View>
      <Text>Go back to first screen using browser's back button</Text>
  </View>
}

export default function App() {
  return (
    <NavigationContainer linking={{
      config: {
        screens: {
          HomeScreen: '/',
          FirstScreen: '/first',
          SecondScreen: '/second',
        },
      },
    }}>
      <Stack.Navigator screenOptions={{ headerShown: false }}>
        <Stack.Screen name="HomeScreen" component={HomeScreen} />
        <Stack.Screen name="FirstScreen" component={FirstScreen} />
        <Stack.Screen name="SecondScreen" component={SecondScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Expected behavior
History is preserved and your able to use browser's forward/back buttons
Reproduction
expo init and copy-paste the included snippet
Platform

 Android
 iOS
 Web
 Windows
 MacOS

Packages

 @react-navigation/bottom-tabs
 @react-navigation/drawer
 @react-navigation/material-bottom-tabs
 @react-navigation/material-top-tabs
 @react-navigation/stack
 @react-navigation/native-stack

Environment
In the minimal example I used:
@react-navigation/native 6.0.6
@react-navigation/stack 6.0.11

Duplicate issue #10355: go back and go forward button wrong
Created: 2022-02-16T15:29:47Z
Current behavior
Let's say I have two links A and B of my react native web app.
I start the navigation from a third-party page. I then enter the link to A. I go to page B using the hook useLinkTo(); I then go to page A using the same hook. At this point, my browser's "go forward" button can be pressed and sent me to page B. The browser's "go backward" button can also be pressed and sent me to the original third-party page.
Expected behavior
I would expect the "go forward" button not being active. I would expect the back button to sent me to page B.
Reproduction
not_today
Platform

 Android
 iOS
 Web
 Windows
 MacOS

Packages

 @react-navigation/bottom-tabs
 @react-navigation/drawer
 @react-navigation/material-bottom-tabs
 @react-navigation/material-top-tabs
 @react-navigation/stack
 @react-navigation/native-stack

Environment
"@react-navigation/native": "6.0.8",
"@react-navigation/native-stack": "6.5.0",
"@react-navigation/stack": "6.1.1",

Closing comment (2022-02-16T21:14:07Z): Probably similar to #10263? In case the workaround there works for you