why we have multiple stackNavigators?

Question

for example this code form react-navigation documentation for authentication:

import { createSwitchNavigator, createStackNavigator, createAppContainer } from 'react-navigation';

// Implementation of HomeScreen, OtherScreen, SignInScreen, AuthLoadingScreen
// goes here.

const AppStack = createStackNavigator({ Home: HomeScreen, Other: OtherScreen });
const AuthStack = createStackNavigator({ SignIn: SignInScreen });

export default createAppContainer(createSwitchNavigator(
  {
    AuthLoading: AuthLoadingScreen,
    App: AppStack,
    Auth: AuthStack,
  },
  {
    initialRouteName: 'AuthLoading',
  }
));

Why we have two different stack navigators? Why we just don't wrap all of our screens into one navigator? What should be the logic for wrapping different screens in same navigators?

Answer 1

If you're only considering navigation, then there is no real reason to have one stack navigator in another.

There are, however, visual reasons that might require using different navigators - different transitions, header layout, and other styling options, all of which can be found here.

That said, it is not strictly necessary to use multiple navigators, as most of these options can be set in a screen-by-screen basis, but it might be beneficial when trying to minimize the amount of boilerplate code.