Show Bottom Tab Bar on Stack Screen React Native

Question

I have a Nested Navigation in my React App

There are some stack screen in which i want to show bottom tab bar also

like 1st stack screen is clear & the 2nd has a bottom tab within it

Code

    const Tab = createBottomTabNavigator();
    const Stack = createStackNavigator();

    //Screen Names
    const homeName = "Home";
    const manage = "Manage";
    const stats = "Stats";
    const profile = "Profile";
    const live = "Live";


    //Bottom Tab Navigation
    function TabsNav() {
        return (
            <Tab.Navigator
                initialRouteName={homeName}
                screenOptions={({ route }) => ({
                     ...
                    },
                })}
            >
                <Tab.Screen
                    name="Home"
                    ...
                />
                ...
            </Tab.Navigator>
        );
    };

        function MyStack() {
        return (
            <NavigationContainer>
                <Stack.Navigator>
                    <Stack.Screen name="Search_Teams" component={Search_Teams} options={{ headerShown: false }} />
                    <Stack.Screen name="Select_Match" component={Select_Match} options={{ headerShown: false }} />
                    ...
                </Stack.Navigator>
            </NavigationContainer>
        );
    }

Answer 1

See this documentation:

1. (https://reactnavigation.org/docs/tab-based-navigation/#a-stack-navigator-for-each-tab)
2. (https://reactnavigation.org/docs/tab-based-navigation/#a-stack-navigator-for-each-tab)

Make stack for each tab React Navigation Version 6.