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;
