react native login screen and redirect to a main navigation - bottom tab

Normally, you would create all the necessary screen under a main navigation. That's fine until you introduce your 'Login' screen. The only problem with that is, your user would be able to switch to other screen via bottom tab (for example)


Introducing createSwitchNavigator   which allows us to create individual section of our screen.


An example code would looks something like this

import React from 'react';

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

import MainTabNavigator from './MainTabNavigator';

import LoginScreen from '../screens/LoginScreen';

export default createSwitchNavigator({

// You could add another route here for authentication.

// Read more at https://reactnavigation.org/docs/en/auth-flow.html

Main: MainTabNavigator,

Login : LoginScreen

},

{

initialRouteName: 'Login',

});

This allow us to show Login screen as a separate screen and independent from other screen.

Please consult reference here for more information :

https://reactnavigation.org/docs/en/auth-flow.html