Redirect after Login causes in three header and a bottom tab nav

Question

In my apllikation, i logged in after my splashscreen. The bottom nav works fine. If i go to settings and click the „Logged out“ button. The app navigates me back to login. Great.

But there are THREE headers show and the bottom nav is still shown.

There is something in this navigation i do not understand. It would be awesome if you can check my code below and tell me my mistake.

Appnavigator.js

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';
import CreateScreen from './screens/CreateScreen';
import HomeScreen from './screens/HomeScreen';
import JoinScreen from './screens/JoinScreen';
import SettingsScreen from './screens/SettingsScreen';
import LoginScreen from './screens/LoginScreen';
import EventScreen from './screens/EventScreen';
import CamScreen from './screens/CamScreen';
import { MaterialIcons } from '@expo/vector-icons';

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

function LoginStack() {
    return (
        <Stack.Navigator _dark={{ bg: "blueGray.900" }} _light={{ bg: "blueGray.50" }} px={4} flex={1}>
            <Stack.Screen options={{ headerShown: true }} name="LoginScreen" component={LoginScreen} />
            <Stack.Screen options={{ headerShown: true }} name="EventStack" component={EventStack} />
            <Stack.Screen name="HomeScreen" component={HomeScreen} />
        </Stack.Navigator>
    )
}

function EventStack() {
    return (

        <Stack.Navigator _dark={{ bg: "blueGray.900" }} _light={{ bg: "blueGray.50" }} px={4} flex={1}>
            <Stack.Screen options={{ headerShown: false }} name="HomeScreen" component={HomeScreen} />
            <Stack.Screen options={{ headerShown: true }} name="EventScreen" component={EventScreen} />
        </Stack.Navigator>
    );
}

// function JoinStack() {
//     <Stack.Navigator _dark={{ bg: "blueGray.900" }} _light={{ bg: "blueGray.50" }} px={4} flex={1}>
//         <Stack.Screen options={{ headerShown: false }} name="Join" component={JoinScreen} />
//         <Stack.Screen options={{ headerShown: true }} name="EventScreen" component={EventScreen} />

//     </Stack.Navigator>
// }

// function CreateStack() {
//     <Stack.Navigator _dark={{ bg: "blueGray.900" }} _light={{ bg: "blueGray.50" }} px={4} flex={1}>
//         <Stack.Screen options={{ headerShown: false }} name="Create" component={CreateScreen} />
//         <Stack.Screen options={{ headerShown: true }} name="HomeScreen" component={HomeScreen} />

//     </Stack.Navigator>
// }

function SettingsStack() {
    return (
        <Stack.Navigator _dark={{ bg: "blueGray.900" }} _light={{ bg: "blueGray.50" }} px={4} flex={1}>
            <Stack.Screen options={{ headerShown: false }} name="SettingsScreen" component={SettingsScreen} />
            <Stack.Screen options={{ headerShown: true }} name="LoginStack" component={LoginStack} />

        </Stack.Navigator>
    )
}

function BottomTabs() {
    return (
        <Tab.Navigator
            screenOptions={({ route }) => ({
                tabBarIcon: ({ focused, color, size }) => {
                    let icon;
                    // TODO: Maybe later some different icons
                    if (route.name === 'Events') {
                        icon = focused ? 'list' : 'list';
                    } else if (route.name === 'Join') {
                        icon = focused ? 'login' : 'login';
                    } else if (route.name === 'Cam') {
                        icon = focused ? 'camera' : 'camera';
                    } else if (route.name === 'Create') {
                        icon = focused ? 'edit' : 'edit';
                    } else if (route.name === 'Settings') {
                        icon = focused ? 'settings' : 'settings';
                    }

                    return (
                        <MaterialIcons
                            name={icon}
                            size={size}
                            color={color}
                        />
                    );
                },
                tabBarActiveTintColor: '#22d3ee',
                tabBarHideOnKeyboard: true,
            })
            }
        >
            <Tab.Screen name="Events" component={EventStack} options={{ headerShown: false }} />
            <Tab.Screen name="Join" component={JoinScreen} options={{ headerShown: false }} />
            <Tab.Screen name="Cam" component={CamScreen} options={{ headerShown: false }} />
            <Tab.Screen name="Create" component={CreateScreen} options={{ headerShown: false }} />
            <Tab.Screen name="Settings" component={SettingsStack} options={{ headerShown: false }} />
        </Tab.Navigator>
    )
}

export default () => (
    <NavigationContainer>

        <Stack.Navigator _dark={{ bg: "blueGray.900" }} _light={{ bg: "blueGray.50" }} px={4} flex={1}>
            <Stack.Screen options={{ headerShown: true }} name="LoginScreen" component={LoginScreen} />
            <Stack.Screen options={{ headerShown: true }} name="BottomTabs" component={BottomTabs} />
        </Stack.Navigator>
    </NavigationContainer>
);

handleSignOut Funtion on Button Click

const handleSignOut = (navigation) => {
    const auth = getAuth();
    auth.signOut().then(() => { console.log('User signOut success') })
        .catch(error => alert(error.message))
    navigation.navigate("LoginStack")
}

Answer 1

a lot of hours i wasted... now after clicked send at stackoverflow I got the mistake for the headers.

It seems i pasted wrong code and passed options TRUE in Appnavigator.js

But why is the bottom nav still active?