React Native Navigation v5 - Whats wrong with my navigation Setup? - reactjs

Question

I have a problem depending the Navigator setup that is used with Version 5 of React Navigation.
Here is my Code:
import React from "react";
import { LogBox, Platform, TouchableOpacity } from "react-native";
import { NavigationContainer } from "#react-navigation/native";
import { createStackNavigator } from "#react-navigation/stack"
import { createBottomTabNavigator } from "#react-navigation/bottom-tabs";
import {
Auth,
Monatsübersicht2,
StundenChecken,
StundenEintragen,
Logout,
TagesübersichtDiff,
StundenEdit,
MonatsberichtComponent,
} from "../screens/index";
import Icon from "react-native-vector-icons/Ionicons";
import AsyncStorage from "#react-native-async-storage/async-storage";
LogBox.ignoreAllLogs();
const Stack = createStackNavigator();
function EintragenStack() {
return (
<Stack.Navigator initialRouteName="Eintragen">
<Stack.Screen
name="Eintragen"
component={StundenEintragen}
options={{
headerTitle: "Stundenverwaltung",
headerTitleStyle: {
color: "white",
alignSelf: "center",
},
headerStyle: {
backgroundColor: "#a51717",
},
headerRight: () => (
<TouchableOpacity onPress={console.log("unlockUserHandler")}>
<Icon
style={{ paddingRight: 20 }}
size={25}
color="white"
name="lock-open"
/>
</TouchableOpacity>
),
}}
/>
</Stack.Navigator>
)};
function CheckStack(){
return (
<Stack.Navigator initialRouteName="Übersicht" >
<Stack.Screen
name="Übersicht"
component={StundenChecken}
/>
<Stack.Screen
name="Monat"
component={Monatsübersicht2}
options={({navigation}) => ({
title: "Monatsübersicht"
})}
/>
<Stack.Screen
name="Tag"
component={TagesübersichtDiff}
options={({navigation}) => ({
headerRight: () => (
<TouchableOpacity onPress={() => console.log("Ahllo")}>
<Icon
style={{ paddingRight: 20 }}
size={25}
color="#a51717"
name="lock-open"
/>
</TouchableOpacity>
),
title: "Tagesübersicht"
})}
/>
<Stack.Screen
name="Edit"
component={StundenEdit}
options={{
headerTitle: "Stunden bearbeiten",
headerTitleStyle: {
color: "white",
alignSelf: "center",
},
headerStyle: {
backgroundColor: "#F39237",
},
headerRight: () => (
<TouchableOpacity onPress={console.log("unlockUserHandler")}>
<Icon
style={{ paddingRight: 20 }}
size={25}
color="white"
name="lock-open"
/>
</TouchableOpacity>
),
}}
/>
</Stack.Navigator>
)}
const Tab = createBottomTabNavigator();
function Tabs() {
return (
<Tab.Navigator
initialRouteName="Eintragen"
screenOptions={{
backBehavior: "history",
resetOnBlur: true,
tabBarOptions: {
labelStyle: {
fontSize: 12,
color: "black",
},
showIcon : true,
activeTintColor: "red",
activeBackgroundColor: "#ccc",
}
}}>
<Tab.Screen name="Eintragen" component={EintragenStack} options={{ tabBarIcon:() => (<Icon name="add-circle-outline" size={Platform.OS == "ios" ? 30 : 28} color={"green"} />)}}/>
<Tab.Screen name="Übersicht" component={CheckStack} options={{ tabBarIcon:() => (<Icon name="calendar" size={Platform.OS == "ios" ? 30 : 28} color={"black"} />)}}/>
<Tab.Screen name="Monatsbericht" component={MonatsberichtComponent} options={{headerTitle: "Monatsbericht abschließen", tabBarIcon:() => (<Icon name="download" size={Platform.OS == "ios" ? 30 : 28} color={"black"} />)}}/>
<Tab.Screen name="Logout" component={Logout} options={{ tabBarIcon:() => (<Icon name="power" size={Platform.OS == "ios" ? 30 : 28} color={"red"} />)}}/>
</Tab.Navigator>
)
}
const AppNavigator = () => {
return (
<NavigationContainer>
<Stack.Navigator
screenOptions={{
headerShown: false,
headerLeft: null,
gestureEnabled: false
}}
>
<Stack.Screen name="Auth" component={Auth} />
<Stack.Screen name="Tabs" component={Tabs} />
</Stack.Navigator>
</NavigationContainer>
)
}
export default function App() {
return <AppNavigator/>;
}
Now in my Auth Screen I can navigate to Tabs - so basically Log into the App by calling:
navigation.replace("Tabs");
But when I try to navigate to my CheckStack for example it wont work and I get thrown this error:
The Call: navigation.replace("CheckStack");
The Error:
ERROR The action 'REPLACE' with payload {"name":"CheckStack"} was not handled by any navigator.
Do you have a screen named 'CheckStack'?

Answer 1

So basically the fix is that my "CheckStack" has to be inside the StackNavigator that is used in NavigationContainer - otherwise it wont be able to use navigation inside.
<NavigationContainer>
<Stack.Navigator
screenOptions={{
headerShown: false,
headerLeft: null,
gestureEnabled: false
}}
>
<Stack.Screen name="Auth" component={Auth} />
<Stack.Screen name="Tabs" component={Tabs} />
<Stack.Screen name="CheckStack" component={CheckStack} />
</Stack.Navigator>
</NavigationContainer>

Answer 2

the problem is that you are referring to the name of the function and not specifically to the name of the screen
It's screen name
navigation.replace("Tabs");
It's a function not screen name
navigation.replace("CheckStack");