React Native Combine Stack and Tab Navigation

React Native Combine Stack and Tab Navigation

    Learn react native how to put stack and tab navigator together. It works better for onboard screen. Here I covered how to show stack navigator first and then show bottom navigator.

    First make sure that you have installed and imported

    import { NavigationContainer } from '@react-navigation/native';
    import { createNativeStackNavigator } from '@react-navigation/native-stack';
    import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'

    After that we need to create stack and tab navigator object

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

    Now the main idea

    1. you must return a NavigatorContainer

    2. Inside the NavigatorContainer you should have <Stack.Navigator />

    3. inside <Stack.Navigator /> you should place <Stack.Screen />

    4. the first <Stack.Screen /> would contain your welcome or onboarding screen

    5. second <Stack.Screen />  would contain Tab navigator component

    6. that component must return <Tab.Navigator />

    7. inside <Tab.Navigator /> you should return <Tab.Screen />

    8. each <Tab.Screen /> should contain your bottom tab

    See the code

    import * as React from 'react';
    import Welcome from '../screen/Welcome';
    import InfoScreen from '../screen/InfoScreen';
    import DetailScreen from '../screen/DetailScreen';
    import { NavigationContainer } from '@react-navigation/native';
    import { createNativeStackNavigator } from '@react-navigation/native-stack';
    import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
    import
     MaterialCommunityIcons
    from 'react-native-vector-icons/MaterialCommunityIcons';
    
    const Stack = createNativeStackNavigator();
    const Tab = createBottomTabNavigator();
    
    
    function HomeScreen() {
      return (
        <Tab.Navigator
          initialRouteName="Home"
          screenOptions={{headerShown: false}}
         >
          <Tab.Screen
            name="Home"
            component={InfoScreen}
            options={{ title: 'Setting Page' ,
            tabBarIcon:({size,color})=>(
                    <MaterialCommunityIcons name="home" 
                    size={size} color={color} />
                )
            }}
          />
          <Tab.Screen
            name="Details"
            component={DetailScreen}
            options={{ title: 'Details Page',
            tabBarIcon:({size,color})=>(
                <MaterialCommunityIcons name="details" size={size} 
                color={color} />
              )
             }}
          />
           
        </Tab.Navigator>
      );
    }
    
    function Auth(props) {
     
        return (
               <NavigationContainer>
                <Stack.Navigator
                 screenOptions={{headerShown: false}}
                >
                    <Stack.Screen name="Welcome" component={Welcome}/>
                    <Stack.Screen name="HomeScreen" component={HomeScreen}/>
                </Stack.Navigator>
               </NavigationContainer>
        );
    }
    
    export default Auth;