React stack navigation automatically starts first screen

Question

I have a following stack and switch navigator. Here is code:

Parent Stack

const ParentStack = createStackNavigator(
  {
    Screen1,
    Screen2,
    Screen3,
  },
  {headerMode: 'none', initialRouteName: 'Screen1'},
);

User Stack

const UserStack = createStackNavigator(
  {
    Screen11,
    Screen22,
    Screen33,
  },
  {headerMode: 'none', initialRouteName: 'Screen11'},
);

Switch Stack

    const AppNavigator = createSwitchNavigator(
  {
    Auth,
    ParentStack,
    UserStack,
  },
  {
    initialRouteName: 'Auth',
  },
);

When I am on 'Auth' Screen, and I start the Screen2 using below code:

this.props.navigation.navigate('Screen2')

Screen2 started successfully. But when I press Back, then Screen1 also present in stack. But I had only started the Screen2.

Is this default react native behavior to start the first screen in stack automatically?
Is there any way to start only Screen2?

Yes, because you are redirecting from screen1 to screen2 so screen1 is there in stack — Ravi
@Ravi But I started Screen2 from Auth. So why Screen1 started, just because of first entry in stack? — Dev_1
you can change it through initialRouteName in Auth stack — Ravi

vijay kahar vijay kahar · Accepted Answer · 2020-01-08T14:09:13

import {NavigationActions, StackActions} from 'react-navigation';

const resetAction = StackActions.reset({
          index: 0,
          actions: [
            NavigationActions.navigate({routeName: 'your_screen_name'}), //MainTabbarScreen NavigationActions.navigate({ routeName: 'MainTabbarScreen' })//Login
          ],
        });
        this.props.navigation.dispatch(resetAction);

Use above code while you navigate to screen2.

React stack navigation automatically starts first screen

1 Answers