Discount !! E-commerce App With Backend Source Code Video and Voice Chatting App Firebase Chatting App Source Code Complete Gym App BLoC State Management Source Code Complete Study App Buy Ticket Booking App Source Code Buy Travel App With Backend Source Code Complete Chat App Udemy Course Special Offer Discount !! Online Learning Course App (BLoC) Online Learning Course App (Riverpod) Online Learning Course App (Getx) Discount !! Shopping App (Provider) Cool Flutter Game Nodejs Flutter Complete App
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;