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'?

CodePudding user response：

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>

CodePudding user response：

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");