Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

293
Views
The action 'NAVIGATE' with payload {"name":"CoursesPlaylistScreen"} was not handled by any navigator in React native

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?

about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

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

about 4 years ago · Juan Pablo Isaza Report

0

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.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!