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;