title: React Navigation 5 , Moving screen to different navigator
body: <p>still try to understand about multiple navigator here.</p>
  
  <p>Basically i have 2 navigator, one rootnavigator for login page, and the appnavigator for any screen after login, below is the app.js</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import * as React from 'react';
  import { Button } from 'react-native';
  import { NavigationContainer } from '@react-navigation/native';
  import { createStackNavigator } from '@react-navigation/stack';
  
  import LoginScreen from './src/pages/auth/Login';
  import HomeScreen from './src/pages/auth/Home';
  import MemoryScreen from './src/pages/games/Memory';
  
  const AppStack = createStackNavigator();
  const RootStack = createStackNavigator();
  
  function HomeNavigator() {
    return (
      &lt;AppStack.Navigator mode="modal" initialRouteName="Login" screenOptions={({ route, navigation }) =&gt; ({
        headerStyle: {
          backgroundColor: '#f4511e',
        },
        headerRight: () =&gt; (
          &lt;Button
            onPress={() =&gt; navigation.navigate('Login')}
            title="Logout"
            color="#fff"
          /&gt;
        ),
        headerTintColor: '#fff',
        headerTitleStyle: {
          fontWeight: 'bold',
        },
      })}&gt;
        &lt;AppStack.Screen
          name="Home"
          component={HomeScreen}
          options={{
            title: 'Simple Scorecard',
          }}
        /&gt;
        &lt;AppStack.Screen
          name="Memory"
          component={MemoryScreen}
          options={{
            title: 'Memory Games',
          }} /&gt;
      &lt;/AppStack.Navigator&gt;
    );
  }
  
  export default function App() {
    return (
      &lt;NavigationContainer&gt;
        &lt;RootStack.Navigator initialRouteName="Login"&gt;
          &lt;RootStack.Screen
            name="Login"
            component={LoginScreen}
            options={{
              title: 'Simple Scorecard',
            }} /&gt;
          &lt;RootStack.Screen name="App" component={HomeNavigator} /&gt;
        &lt;/RootStack.Navigator&gt;
      &lt;/NavigationContainer&gt;
    );
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>From login page i try to move to home screen like below . (Login.js)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import { Button, TextInput, View, StyleSheet } from 'react-native';
  
  export default class Login extends Component {
      constructor(props) {
          super(props);
          this.state = {
              username: '',
              password: '',
          };
      }
  
      onLogin({ navigation }) {
          const { username, password } = this.state;
          // navigation.navigate('HomeNavigator', {
          //     screen: 'Home',
          //   })
          this.props.navigation.navigate('HomeNavigator', {
              screen: 'Home',
            })
      }
  
      render() {
          return (
              &lt;View style={styles.container}&gt;
                  &lt;TextInput
                      value={this.state.username}
                      onChangeText={(username) =&gt; this.setState({ username })}
                      placeholder={'Username'}
                      style={styles.input}
                  /&gt;
                  &lt;TextInput
                      value={this.state.password}
                      onChangeText={(password) =&gt; this.setState({ password })}
                      placeholder={'Password'}
                      secureTextEntry={true}
                      style={styles.input}
                  /&gt;
  
                  &lt;Button
                      title={'Login'}
                      style={styles.input}
                      onPress={this.onLogin.bind(this)}
                  /&gt;
              &lt;/View&gt;
          );
      }
  }
  
  const styles = StyleSheet.create({
      container: {
          flex: 1,
          alignItems: 'center',
          justifyContent: 'center',
          backgroundColor: '#ecf0f1',
      },
      input: {
          width: 200,
          height: 44,
          padding: 10,
          borderWidth: 1,
          borderColor: 'black',
          marginBottom: 10,
      },
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>Problem is, i can't navigate to home page, error notice below : </p>
  
  <blockquote>
    <p>The action 'NAVIGATE' with payload {"name":"HomeNavigator","params":{"screen":"Home"}} was not handled by any navigator.</p>
  </blockquote>
  
  <p>Do you have a screen named 'HomeNavigator'?</p>
  
  <p>May i know how to solve this?
  Thanks</p>