How can I navigate user to login Screen when users is authenticated?

Question

I have a root StackNavigator which has other two navigator 1 stack navigator (login, signup) 2 tab navigator (home, profile, settings)

so when user login success how can I nevigate to tabNavigator from rootNavigator?

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

import authNavi from './AuthRoute';  /// this is StackNavigator with login signup screen

import appNavi from './AppRoute' /// this is tabNAvigator with profile home setting screen

const RootRoute = createStackNavigator({ 

    auth: {screen: authNavi },
    app: {screen: appNavi }
})

const RootNavi = createAppContainer(RootRoute);
export default RootNavi;  /// this is rootNavigator whih is rendered in App.js

here is the image of App.js and RootRouter

Answer 1

You could navigate from your auth stack to you tabNavigator by:

this.props.navigation.navigate('app');

Suggestion I suugest you replace your main StackNavigator by a SwitchNavigator ... cause after the user is logged in successully, you won't need them to have access to your auth flow again.

Answer 2

By using Switch Navigator you can achieve this.

import createSwitchNavigator from react-navigation

eg:

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

After that add switch navigator.

...
const switchNavigator = createSwitchNavigator(
  {
    LoginStack: authNavi,
    AppTabs: appNavi
  },
  { headerMode: "none", initialRouteName: "LoginStack" }
);

const App = createAppContainer(switchNavigator);

export default App;

And when you want to change to home, use this

this.props.navigation.navigate("AppTabs");

It will switch the navigation to TabBar navigation.