How to create Stack, Drawer and Tab navigation in react native Boilerplate.
Step-1: Create some screen.js and import it into app.js
In this file I have created, three screens.js, HomeScreen, ProfileScreen and MessageScreen.
Then copy paste the below full code in app.js
import ‘react-native-gesture-handler’;
import Animated, { useSharedValue, withTiming, useAnimatedStyle, Easing,} from ‘react-native-reanimated’;
import * as React from ‘react’;
import { Button, Text, View } from ‘react-native’;
import { NavigationContainer } from ‘@react-navigation/native’;
import { createDrawerNavigator, DrawerContentScrollView, DrawerItemList, DrawerItem, } from ‘@react-navigation/drawer’;
import { createNativeStackNavigator } from ‘@react-navigation/native-stack’;
import { createBottomTabNavigator } from ‘@react-navigation/bottom-tabs’;
import HomeScreen from ‘./src/screens/HomeScreen’;
import ProfileScreen from ‘./src/screens/ProfileScreen’;
import Message from ‘./src/screens/MessagesScreen’;
const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();
const Drawer = createDrawerNavigator();
function Tabs() {
return (
<Tab.Navigator>
<Tab.Screen name=”Home” component={HomeScreen} options={{ headerShown: false }} />
<Tab.Screen name=”Profile” component={ProfileScreen} options={{ headerShown: false }} />
<Tab.Screen name=”Message” component={Message} options={{ headerShown: false }} />
</Tab.Navigator>
);
}
function StackNavigator() {
return (
<Stack.Navigator>
<Stack.Screen name=”HomeScreen” component={HomeScreen} options={{ headerShown: false }} />
<Stack.Screen name=”Message” component={Message} />
</Stack.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<Drawer.Navigator initialRouteName=”Home”>
// This Line is important, Without this line, Tabnav won’t show.
<Drawer.Screen name=”Home”component={Tabs} />
<Drawer.Screen name=”Message” component={Message} />
</Drawer.Navigator>
</NavigationContainer>
);
}