The action 'NAVIGATE' with payload {"name":"Home"} was not handled by any navigator

Question

Current Behavior Getting Error

Private Route in react native not working on page changes. The action 'NAVIGATE' with payload {"name":"Home"} was not handled by any navigator. Do you have a screen named 'Home'?

If you're trying to navigate to a screen in a nested navigator, see https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator.

This is a development-only warning and won't be shown in production.

Expected Behavior Not able to navigate using Auth flow.

How to reproduce Used code from : https://reactnavigation.org/docs/auth-flow

<NavigationContainer>
        <Stack.Navigator
          screenOptions={{
            headerShown: false,
          }}>
           {isSignedIn === "true"? ( 
            <> 
            <Stack.Screen name="Home" component={Home} />
            <Stack.Screen name="Bookorder" component={Bookorder} />
             </> 
           ) : (
            <>
            <Stack.Screen name="Login" component={Login} />
            </>
          )}
        </Stack.Navigator>
  </NavigationContainer>

Environment System: OS: macOS 10.15.4 CPU: (4) x64 Intel(R) Core(TM) i5-5350U CPU @ 1.80GHz Memory: 46.17 MB / 8.00 GB Shell: 3.2.57 - /bin/bash Binaries: Node: 13.12.0 - /usr/local/bin/node Yarn: Not Found npm: 6.14.4 - /usr/local/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman

Answer 1

I get a temporary solution :

import React, {Component} from 'react';
import {Provider} from 'react-redux';
import configureStore from './redux/store/Store';
import {View} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {
  createStackNavigator,
  CardStyleInterpolators,
} from '@react-navigation/stack';
import HomeRoot from './appRoot/HomeRoot';
import AuthRoot from './appRoot/AuthRoot';
import LocalStorage from './common/LocalStorage';
import {Root} from 'native-base'; //for toast
const store = configureStore();

const RootStack = createStackNavigator();

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLogin: false,
      isCheckLogin: false,
    };
  }

  setLoginState = async () => {
    let isLogin = await LocalStorage.read('isLogin');
    this.setState({isLogin: isLogin, isCheckLogin: true});
  };

  componentDidMount = async () => {
    await this.setLoginState();
  };

  render() {
    const {isLogin, isCheckLogin} = this.state;
    if (!isCheckLogin) {
      return <View />;
    }

    return (
      <Provider store={store}>
        <Root>
          <NavigationContainer>
            <RootStack.Navigator
              initialRouteName="Home"
              headerMode="none"
              screenOptions={{
                gestureEnabled: false,
                cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
              }}>
              {isLogin ? (
                <>
                  <RootStack.Screen
                    initialParams={{setLogin: this.setLoginState()}}
                    name="Home"
                    component={HomeRoot}
                  />
                </>
              ) : (
                <>
                  <RootStack.Screen
                    initialParams={{setLogin: this.setLoginState()}}
                    name="Login"
                    component={AuthRoot}
                  />
                </>
              )}
            </RootStack.Navigator>
          </NavigationContainer>
        </Root>
      </Provider>
    );
  }
}
export default App;