React Navigation navigate to specific tab

Question

The example on React Navigation shows how you can jump to a tab, but it shows it in the case you are in the navigator the tabs are part of. But how do you navigate to a specific tab from a screen which is part of a different navigator?

I have:

function MealsNavigator() {
  const MealsStack = createStackNavigator();
  return (
    <MealsStack.Navigator>
      <MealsStack.Screen
        name="Meals"
        component={MealsScreenTabs}
      />
    </MealsStack.Navigator>
  );
}

function MealsScreenTabs() {
  const MealsTabs = createMaterialTopTabNavigator();
  return (
    <MealsTabs.Navigator>
      <MealsTabs.Screen name="Upcoming" component={MealsUpcomingScreen} />
      <MealsTabs.Screen name="Past" component={MealsPastScreen} />
    </MealsTabs.Navigator>
  );
}

I want to be able to navigate to Meals > Past with a button click from my Profile screen inside the Account navigator. How?

Answer 1

in react navigation v5

navigation.navigate('Meals', {screen: 'Past'});

Answer 2

Got some help from the community on Discord. Here' how you do it:

navigation.navigate('Meals', {
  screen: 'Meals',
  params: {screen: 'Past'},
})

And to see it in action, have a look at a snack I created