React navigation 5 ( navigate to another stack Screen)

Question

this is my appNavigator: I divide into 3 stackScreen include HomeStack, SettingsStack and ProfileStack. AuthStack contain SignUp and Signin Screen, and i create bottom tab contain 3 StackScreen above

const HomeStack = createStackNavigator();
function HomeStackScreen() {
  return (
    <HomeStack.Navigator headerMode="none">
      <HomeStack.Screen name="Home" component={HomeScreen} />
      <HomeStack.Screen name="Details" component={DetailsScreen} />
    </HomeStack.Navigator>
  );
}

const SettingsStack = createStackNavigator();
function SettingsStackScreen() {
  return (
    <SettingsStack.Navigator>
      <SettingsStack.Screen name="Settings" component={SettingsScreen} />
      <SettingsStack.Screen name="Details" component={DetailsScreen} />
    </SettingsStack.Navigator>
  );
}
const ProfileStack = createStackNavigator();
function ProfileStackScreen({navigation}) {
  return (
    <ProfileStack.Navigator>
      <ProfileStack.Screen name="Profile" component={ProfileScreen} />
    </ProfileStack.Navigator>
  );
}

// ** AUTH ** //
const AuthStack = createStackNavigator();
function AuthStackScreen() {
  return (
    <AuthStack.Navigator headerMode="none">
      <AuthStack.Screen name="SignIn" component={LoginScreen} />
      <AuthStack.Screen name="SignUp" component={SignUpScreen} />
    </AuthStack.Navigator>
  );
}
// ** APP ** //
const AppStack = createBottomTabNavigator();
function AppStackScreen() {
  return (
    <AppStack.Navigator name="mainApp">
      <AppStack.Screen name="Dashboard" component={HomeStackScreen} />
      <AppStack.Screen name="Favorite" component={SettingsStackScreen} />
      <AppStack.Screen name="Profile" component={ProfileStackScreen} />
    </AppStack.Navigator>
  );
}
// ** ROOT ** //
const RootStack = createStackNavigator();
const RootStackScreen = ({userToken}) => {
  return (
    <RootStack.Navigator headerMode="none">
        <RootStack.Screen name="Auth" component={AuthStackScreen} />
        <RootStack.Screen name="App" component={AppStackScreen} />
    </RootStack.Navigator>
  );
};

export default function AppNavigator() {
  const [loading, setloading] = React.useState(true);
  const [userToken, setUserToken] = React.useState();

  React.useEffect(() => {
    setTimeout(() => {
      setloading(false);
    }, 1000);
  });
  if (loading) {
    return <SplashScreen />;
  }

  // })
  return (
    <NavigationContainer>
      <RootStackScreen />
    </NavigationContainer>
  );
}

and this is my Login Screen :

const LoginScreen = ({ navigation, props }) => {
    console.tron.log("debug: LoginScreen -> 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 = () => {
        if (email === '' && password === '') {
            Alert.alert('Enter details to signin!')
        } else {
        setLoading(true)
            firebase
                .auth()
                .signInWithEmailAndPassword(email,password)
                .then((res) => {
                    console.log(res)
                    console.log('User logged-in successfully!')
                    setLoading(false)
                    setEmail('')
                    setPassword('')
                    navigation.navigate("AppStack", {screen: "Dashboard"})
                })
                .catch(error => setError(error.message))
        }
    }

    return (
        <ImageBackground source={require('../images/background.jpg')} style={styles.imageBack}>
            <View style={styles.area1}>
                <Image
                    source={require('../images/vaccines.png')}
                    style={styles.logo} />
                <View style={styles.box}>
                    <TextInput
                        placeholder='Email'
                        onChangeText={email => setEmail(email)}
                        value={email}
                        maxLength={15}
                    />
                </View>
                <View style={styles.box}>
                    <TextInput
                        placeholder='Password'
                        secureTextEntry={true}
                        onChangeText={password => setPassword(password)}
                        value={password}
                        maxLength={15}
                    />
                </View>
                <BlockIcon />
                <TouchableOpacity style={styles.buttonLogin} onPress={handleLogin}>
                    <Text style={styles.text1}>Sign In</Text>
                </TouchableOpacity>
                <View style={{ flexDirection: 'row', justifyContent: 'center', marginTop: 50 }}>
                    <Text style={styles.text2}> If you don't have an account ?</Text>
                    <TouchableOpacity onPress={() => navigation.push('SignUp')}>
                        <Text style={styles.text3}> Sign Up </Text>
                    </TouchableOpacity>
                </View>

            </View>
        </ImageBackground>
    )
}

I navigate at navigation.navigate("AppStack", {screen: "Dashboard"}) when I login successful. I want to navigate to AppStack (bottomtab with initial Screen name is Dasboard) I try to use nesting navigator but unsuccessful. I also try to use navigation.navigate('HomeScreen'), but it not work. Anyone can help me =((. Thanks

Answer 1

I know this is a month old but maybe this will help someone else.

Looks like you're close. In your RootStackScreen, you have two screens: "Auth" and "App". And it sounds like you want to go to your "App" screen from your "Auth" screen. You just need to use the name of the screen.

navigation.navigate("App", {screen: "Dashboard"})