React Navigation passing parameters to Brother Stack route

Question

Hello, I have the following structure:

• Workouts
  • index.jsx
  • Workoutinfo
    • index.jsx
• Home
  • index.jsx
• Profile
  • index.jsx
• Notifications
  • index.jsx

It’s a regular Home page and a Workouts page that shows all workouts, that when the user clicks on some workout shows the Workoutinfo page, which shows information about that workout. To do this I made 2 Routes, a Bottom Tabs and another Stack:

Apptabs.jsx

const { Navigator, Screen } = createBottomTabNavigator();

const AppTabs = () => {
  return (
    <Navigator>
      <Screen name="Home" component={Home} />
      <Screen name="AllWorkouts" component={WorkoutStack} />
      <Screen name="Profile" component={Profile} />
      <Screen name="Notifications" component={Notifications} />
    </Navigator>
  );
}

export default AppTabs;

Workoutstack.jsx

const { Navigator, Screen } = createStackNavigator();

const WorkoutStack = () => {
  return (
    <Navigator>
      <Screen name="AllWorkouts" component={Workouts} />
      <Screen name="WorkoutInfo" component={WorkoutInfo} />
    </Navigator>
  );
}

export default WorkoutStack;

Within the Workouts/index.jsx I only made one onPress={() => navigate('WorkoutInfo', { workoutId: id })}, nothing much.

What’s the matter?

Within my Home, there is an area where some workouts are shown, only a few, and the user can click and should go to the same page "Workoutinfo". So I wrote identical to what I wrote on Workouts/index.jsx, onPress{() => navigate('WorkoutInfo', { workoutId: id }) but when I click on practice, I get an error saying:

The action 'NAVIGATE' with payload {"name": "Workoutinfo", "params": { workoutId: 6 }} was not handled by any Navigator.

Do you have a screen named "Workoutinfo"??

And I just don’t know what I’m doing wrong. If anyone can give me a light.

Answer 1

Navigators nested do not receive events from their parents

Given the following structure:

Home (Home)
AllWorkouts (WorkoutStack)
    AllWorkouts (Workouts)
    WorkoutInfo (WorkoutInfo)
Profile (Profile)
Notifications (Notifications)

You have two levels of navigation: the main (Home, AllWorkouts, Profile and Notifications) and an intern of AllWorkouts (AllWorkouts and WorkoutInfo).

When you are on an internal screen (e. g. WorkoutInfo) and uses navigation.navigate, an event is issued to be received by some Navigator, can be both the most internal (WorkoutStack) the more external (AppTabs). The reverse is not true, so it is not possible to navigate from Home for WorkoutInfo the way it is in the question and the error arises was not handled by any Navigator.

---

Navigating to a screen in a Nested Gator

To solve the problem, two things must be done:

1. Stop using duplicate names (there are two AllWorkouts) - this will not cause problems directly, but makes the code more confusing.

2. Navigate from Home to the Navigator AllWorkouts, indicating which screen is desired and passing the parameter that this screen needs:

navigation.navigate('AllWorkouts', {
  screen: 'WorkoutInfo',
  params: { workoutId: id }
});

For more details on Nestling Gators, read the entire documentation page Nesting Navigators, there are examples of various situations that will probably be useful to you.