React native navigation 5 combining stack and tab navigator visibility in every stack

Solution for React native navigation 5 combining stack and tab navigator visibility in every stack
is Given Below:

I’m just playing around with react native

my first attempt. I’m following the Maximilian Schwarzmüller

course on Udemy but he is using navigation 4 and I want

to use version 5 so I came up with this code:

const tabs = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Categories" component={CategoriesScreen} />
      <Tab.Screen name="Favorites" component={FavoritesScreen} />
    </Tab.Navigator>
  );
};
<NavigationContainer theme={MyTheme}>
  <Stack.Navigator initialRouteName="Categories">
    <Stack.Screen name="Categories" component={tabs} />
    <Stack.Screen name="CategoryMeal" component={CategoryMealScreen} />
    <Stack.Screen name="MealDetail" component={MealDetailScreen} />
  </Stack.Navigator>
</NavigationContainer>;

But doing so I can see the tab navigation in Categories screen

how can set up the code to see the tab navigation
in CategoryMeal e MealDetail as well?

If I understand your problem correctly, you want to keep the CategoriesScreen, CategoryMealScreen and MealDetailScreen inside the Tabs and other screens in the Stack. For this navigation config, you can try the following arrangement of screens:

const tabs = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Categories" component={CategoriesScreen} />
      <Tab.Screen name="CategoryMeal" component={CategoryMealScreen} />
      <Tab.Screen name="MealDetail" component={MealDetailScreen} />
    </Tab.Navigator>
  );
};
<NavigationContainer theme={MyTheme}>
  <Stack.Navigator initialRouteName="TabNavigator">
    <Stack.Screen name="TabNavigator" component={tabs} />
    <Stack.Screen name="Favorites" component={FavoritesScreen} />
  </Stack.Navigator>
</NavigationContainer>