The action 'NAVIGATE' with payload {"name":"CoursesPlaylistScreen"} wa-CodePudding

I have tried nesting the naviagtors so I don't have to face this issue but still I am getting this error as I have main navigator which is contains the first screen BootcampWeeksScreen.js then I can easily navigating through it new screen which contains const tab= createMaterialTopTabNavigator().

BootcampWeeksScreen.js:

import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";
import Courses from "./BootcampAdditionalScreens/Courses";
import Tests from "./BootcampAdditionalScreens/Test";
import Roadmap from "./BootcampAdditionalScreens/Roadmap";
import CoursesPlaylistScreen from "../screens/BootcampAdditionalScreens/CoursesPlaylistScreen.js";
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();
const Tab = createMaterialTopTabNavigator();
const BootcampWeeksScreen=()=>{
  return (

    <NavigationContainer>

      <Tab.Navigator tabBarOptions={{ scrollEnabled: true }}>
      <Tab.Screen name="Course" component={Courses} />
      <Tab.Screen name="Tests" component={Tests} />
        <Tab.Screen name="Roadmap" component={Roadmap} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}
 function App() {
    return (
      <NavigationContainer>
        <Stack.Navigator screenOptions={{ headerShown: false }}>
          <Stack.Screen name="BootcampWeeksScreen" component={BootcampWeeksScreen} />
          <Stack.Screen name="CoursesPlaylistScreen" component={CoursesPlaylistScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }

  export default BootcampWeeksScreen;

Now I want to navigate through the screen CoursesPlaylistScreen from the Course screen but I am getting this error and also I have tried nesting the navigators.

I have tried this also to navigate though the screen: ```onPress={() =>navigation.navigate("BootcampStack",{screen:"CoursesPlaylistScreen"})} ````

Still, I am getting this error.

 ERROR  The action 'NAVIGATE' with payload {"name":"CoursesPlaylistScreen"} was not handled by any navigator.

Do you have a screen named 'CoursesPlaylistScreen'?

If you're trying to navigate to a screen in a nested navigator, see https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator.

I don't know How can I do this?

CodePudding user response：

You can only have one NavigationContainer. Try removing NavigationContainer from BootcampWeeksScreen.

CodePudding user response：

The NavigationContainer is responsible for managing your app state and linking your top-level navigator to the app environment. By giving two navigators, you're resetting the whole navigator and hence unable to find the other stack.

You should only wrap your stacks in NavigationContainer on the root/top level of your navigation, i.e. function App in your situation.