title: React navigation 5 ( navigate to another stack Screen)
body: <p>this is my appNavigator: I divide into 3 stackScreen include <code>HomeStack</code>,  <code>SettingsStack</code> and <code>ProfileStack</code>. <code>AuthStack</code> contain SignUp and Signin Screen, and i create bottom tab contain 3 StackScreen above</p>
  
  <pre><code>
  const HomeStack = createStackNavigator();
  function HomeStackScreen() {
    return (
      &lt;HomeStack.Navigator headerMode="none"&gt;
        &lt;HomeStack.Screen name="Home" component={HomeScreen} /&gt;
        &lt;HomeStack.Screen name="Details" component={DetailsScreen} /&gt;
      &lt;/HomeStack.Navigator&gt;
    );
  }
  
  const SettingsStack = createStackNavigator();
  function SettingsStackScreen() {
    return (
      &lt;SettingsStack.Navigator&gt;
        &lt;SettingsStack.Screen name="Settings" component={SettingsScreen} /&gt;
        &lt;SettingsStack.Screen name="Details" component={DetailsScreen} /&gt;
      &lt;/SettingsStack.Navigator&gt;
    );
  }
  const ProfileStack = createStackNavigator();
  function ProfileStackScreen({navigation}) {
    return (
      &lt;ProfileStack.Navigator&gt;
        &lt;ProfileStack.Screen name="Profile" component={ProfileScreen} /&gt;
      &lt;/ProfileStack.Navigator&gt;
    );
  }
  
  // ** AUTH ** //
  const AuthStack = createStackNavigator();
  function AuthStackScreen() {
    return (
      &lt;AuthStack.Navigator headerMode="none"&gt;
        &lt;AuthStack.Screen name="SignIn" component={LoginScreen} /&gt;
        &lt;AuthStack.Screen name="SignUp" component={SignUpScreen} /&gt;
      &lt;/AuthStack.Navigator&gt;
    );
  }
  // ** APP ** //
  const AppStack = createBottomTabNavigator();
  function AppStackScreen() {
    return (
      &lt;AppStack.Navigator name="mainApp"&gt;
        &lt;AppStack.Screen name="Dashboard" component={HomeStackScreen} /&gt;
        &lt;AppStack.Screen name="Favorite" component={SettingsStackScreen} /&gt;
        &lt;AppStack.Screen name="Profile" component={ProfileStackScreen} /&gt;
      &lt;/AppStack.Navigator&gt;
    );
  }
  // ** ROOT ** //
  const RootStack = createStackNavigator();
  const RootStackScreen = ({userToken}) =&gt; {
    return (
      &lt;RootStack.Navigator headerMode="none"&gt;
          &lt;RootStack.Screen name="Auth" component={AuthStackScreen} /&gt;
          &lt;RootStack.Screen name="App" component={AppStackScreen} /&gt;
      &lt;/RootStack.Navigator&gt;
    );
  };
  
  export default function AppNavigator() {
    const [loading, setloading] = React.useState(true);
    const [userToken, setUserToken] = React.useState();
  
    React.useEffect(() =&gt; {
      setTimeout(() =&gt; {
        setloading(false);
      }, 1000);
    });
    if (loading) {
      return &lt;SplashScreen /&gt;;
    }
  
    // })
    return (
      &lt;NavigationContainer&gt;
        &lt;RootStackScreen /&gt;
      &lt;/NavigationContainer&gt;
    );
  }
  </code></pre>
  
  <p>and this is my Login Screen :</p>
  
  <pre><code>const LoginScreen = ({ navigation, props }) =&gt; {
      console.tron.log("debug: LoginScreen -&gt; props", props, navigation)
      const [email, setEmail] = React.useState('');
      const [password, setPassword] = React.useState('');
      const [error, setError] = React.useState('');
      const [loading, setLoading] =React.useState(false)
  
      const handleLogin = () =&gt; {
          if (email === '' &amp;&amp; password === '') {
              Alert.alert('Enter details to signin!')
          } else {
          setLoading(true)
              firebase
                  .auth()
                  .signInWithEmailAndPassword(email,password)
                  .then((res) =&gt; {
                      console.log(res)
                      console.log('User logged-in successfully!')
                      setLoading(false)
                      setEmail('')
                      setPassword('')
                      navigation.navigate("AppStack", {screen: "Dashboard"})
                  })
                  .catch(error =&gt; setError(error.message))
          }
      }
  
      return (
          &lt;ImageBackground source={require('../images/background.jpg')} style={styles.imageBack}&gt;
              &lt;View style={styles.area1}&gt;
                  &lt;Image
                      source={require('../images/vaccines.png')}
                      style={styles.logo} /&gt;
                  &lt;View style={styles.box}&gt;
                      &lt;TextInput
                          placeholder='Email'
                          onChangeText={email =&gt; setEmail(email)}
                          value={email}
                          maxLength={15}
                      /&gt;
                  &lt;/View&gt;
                  &lt;View style={styles.box}&gt;
                      &lt;TextInput
                          placeholder='Password'
                          secureTextEntry={true}
                          onChangeText={password =&gt; setPassword(password)}
                          value={password}
                          maxLength={15}
                      /&gt;
                  &lt;/View&gt;
                  &lt;BlockIcon /&gt;
                  &lt;TouchableOpacity style={styles.buttonLogin} onPress={handleLogin}&gt;
                      &lt;Text style={styles.text1}&gt;Sign In&lt;/Text&gt;
                  &lt;/TouchableOpacity&gt;
                  &lt;View style={{ flexDirection: 'row', justifyContent: 'center', marginTop: 50 }}&gt;
                      &lt;Text style={styles.text2}&gt; If you don't have an account ?&lt;/Text&gt;
                      &lt;TouchableOpacity onPress={() =&gt; navigation.push('SignUp')}&gt;
                          &lt;Text style={styles.text3}&gt; Sign Up &lt;/Text&gt;
                      &lt;/TouchableOpacity&gt;
                  &lt;/View&gt;
  
              &lt;/View&gt;
          &lt;/ImageBackground&gt;
      )
  }
  </code></pre>
  
  <p>I navigate at <code>navigation.navigate("AppStack", {screen: "Dashboard"})</code>
  when I login successful. I want to navigate to <code>AppStack</code> (bottomtab with initial Screen name is Dasboard) I try to use nesting navigator but unsuccessful. I also try to use <code>navigation.navigate('HomeScreen')</code>, but it not work. Anyone can help me =((. Thanks</p>