How to navigate to a Screen without adding it to backstack?

Question

My Navigator is:

const MyStack = createStackNavigator();

const MyRoutes= () => (
  <MyStack.Navigator headerMode='none' initialRouteName='First'>
    <MyStack.Screen name='First' component={ScreenFirst} />
    <MyStack.Screen name='Second' component={ScreenSecond} />
  </MyStack.Navigator>
);

My actual flow is:

First -> (next) -> Second -> (back) -> First

But I want to show the First route without adding it to the backstack, so it would be:

First -> (next) -> Second -> (back) -> (default OS behavior)

Is it possible? If yes, how? I am using "@react-navigation/native": "^5.6.1".

I know I can control the Back behavior in Second route but since in Android (Java/Kotlin) it is possible to show a Fragment without adding it to the backstack, I suppose something similar exists in React Native.

Answer 1

You can use navigation.replace('Second'). More info here https://reactnavigation.org/docs/stack-actions#replace.