initialRouteName not working properly when using nested navigators

Question

I am organizing my app in the following way:

• Stack Navigator:
  • Login Screen
  • Signup Screen
  • Tab Navigator
    • Home Screen
    • Other Screens

However, when I run it, the first screen that pops up is the Home, even though I set initialRouteName="Login". Also, clicking the back button goes to the Login Screen but then to button doesn't work anymore.

Here is the relevant code:

return (
        <NavigationContainer>
            <Stack.Navigator initialRouteName="Login">
                <Stack.Screen name="Login" component={telaLogin} options={{ headerStyle: {backgroundColor: '#766ec5', borderBottomWidth: 0, shadowColor: "transparent", elevation: 0,}, headerTitleStyle: {color: "#d9d9d9", }, headerTintColor: "#d9d9d9",}}/>
                <Stack.Screen name="Cadastro" component={telaCadastro} options={{headerStyle: {backgroundColor: "#766ec5", borderBottomWidth: 0, shadowColor: "transparent", elevation: 0,}, headerTitleStyle: {color: "#d9d9d9", }, headerTintColor: "#d9d9d9",}}/>
                <Stack.Screen name="Home" component={homeTabs} options={{ headerTitle: props => <LogoTitle {...props} />, headerTitleAlign: 'center', headerTintColor: "#d9d9d9", headerStyle: {backgroundColor: '#766ec5', borderBottomWidth: 0, shadowColor: "transparent", elevation: 0,}}}/>
            </Stack.Navigator>
        </NavigationContainer>
    )

function telaLogin({navigation}){
    return(
        <View style={styles.container}>
            <Image style={styles.logo1} source={logo} />
            <TextInput style={styles.txtinput} placeholder='Nome de usuário' placeholderTextColor='#d9d9d9' />
            <TextInput style={styles.txtinput} placeholder='Senha' placeholderTextColor='#d9d9d9' secureTextEntry = {true} />
            <TouchableOpacity style={styles.butao} onPress={navigation.navigate("Home")}> //this button specifically, it doesn't do anything
                <Text style={styles.txtbotao}> Entrar </Text>
            </TouchableOpacity>
             ...

function homeTabs({navigation}){
    return(
        <Tab.Navigator tabBarOptions={{showLabel: false, activeBackgroundColor: '#a5a7a7', inactiveBackgroundColor: '#d9d9d9', activeTintColor: '#766ec5',}} >
            <Tab.Screen name="Gerenciar Turmas" component={telaGerenciarTurmas} options={() => ({
                ...
            <Tab.Screen name="Preparação Para o Conselho" component={telaPrepConselho} options={() => ({
                ...
            <Tab.Screen name="Visualizar Estatísticas" component={telaVisualizarEstat} options={() => ({
                ...
        </Tab.Navigator>
    );
}

Answer 1

You can use the Authorization Flow example from react-navigation docs for auth screen visualization logic: https://reactnavigation.org/docs/auth-flow/

Answer 2

It seems when you started the app first, the Screen with name Home was at the top (Used as initial route by default ) of Stack. Any changes or arrangements in stack doesn't reflect its changes unless you reload the app. I faced same issue for expo app, but reloading the Expo Go by pressing r in terminal worked for me.