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>
  );
}

Leave a Comment