How to combine bottom tab navigator with drawer navigator

Question

My tab below code is a bottom-tab navigator code and I want to display it on every screen by rendering it on app.js as I did for the drawer navigator (in simple words I want to call the bottom tab navigator on screen)

const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();
let user1=""
let data=""
export function DrwaerNav(props) {


  
  if(props.route.params!=undefined){

    console.log('props arent undefined')


    
   
 user1=props.route.params.user.auth
 data=props.route.params.user.auth


  }


  return (

      <Drawer.Navigator initialRouteName="homeS"  drawerContent={(props) => <DrawerContent props={props} data={user1}/>}
      
      screenOptions={{
        headerStyle:{
          backgroundColor:'transparent',
          },
        headerTintColor:'black',
        headerTitleStyle:{
          fontWeight:'bold',
        }
      }}
      >
 
        <Drawer.Screen name="complaints" component={complaints} 
        options={{
          title:'Home',
          headerTitleAlign:'left',
          headerRight:()=>(
            <View style={{marginEnd:10,flexDirection:'row'}}> 
           <Text style={{paddingRight:15,paddingTop:13,fontWeight:"normal",}}>{user1.email}</Text>
            <Avatar.Image 
            source={{   uri:base64.decode(user1.avatar)}} 
            size={40}
            />
{/* <Text>Email:{user1.email}</Text> */}
            </View>
          ),
        }}/>

        <Drawer.Screen name="homeS" component={homeS} options={{
          title:'Home',
          headerTitleAlign:'left',
          headerRight:()=>(
            <View style={{marginEnd:10,flexDirection:'row'}}> 
           {/* <Text style={{paddingRight:15,paddingTop:13,fontWeight:"normal",fontSize:12,}}>{user1.email}</Text> */}
            <TouchableOpacity 
            onPress={()=>{
              props.navigation.navigate('Profile',data={data})
              }
            }>

            <Avatar.Image 
            source={{   uri:base64.decode(user1.avatar)}} 
            size={40}
            />
            </TouchableOpacity>
{/* <Text>Email:{user1.email}</Text> */}
            </View>
          ),
        }}/>
        <Drawer.Screen name="Updates" component={updates} 
        
        options={{
          title:'Home',
          headerTitleAlign:'left',
          headerRight:()=>(
            <View style={{marginEnd:10,flexDirection:'row'}}> 
           <Text style={{paddingRight:15,paddingTop:13,fontWeight:"normal",}}>{user1.email}</Text>
            <Avatar.Image 
            source={{   uri:base64.decode(user1.avatar)}} 
            size={40}
            />
{/* <Text>Email:{user1.email}</Text> */}
            </View>
          ),
        }}/>
        <Drawer.Screen name="userComplaints" component={userComplaints} 
        
        options={{
          title:'Home',
          headerTitleAlign:'left',
          headerRight:()=>(
            <View style={{marginEnd:10,flexDirection:'row'}}> 
           <Text style={{paddingRight:15,paddingTop:13,fontWeight:"normal",}}>{user1.email}</Text>
            <Avatar.Image 
            source={{   uri:base64.decode(user1.avatar)}} 
            size={40}
            />
{/* <Text>Email:{user1.email}</Text> */}
            </View>
          ),
        }}/>
        <Drawer.Screen name="GuestReg" component={Guest} 
       options={{
        title:'Home',
        headerTitleAlign:'left',
        headerRight:()=>(
          <View style={{marginEnd:10,flexDirection:'row'}}> 
         <Text style={{paddingRight:15,paddingTop:13,fontWeight:"normal",}}>{user1.email}</Text>
          <Avatar.Image 
          source={{   uri:base64.decode(user1.avatar)}} 
          size={40}
          />
{/* <Text>Email:{user1.email}</Text> */}
          </View>
        ),
      }}/>
        <Drawer.Screen name="myGuests" component={myGuest} 
        
        options={{
          title:'Home',
          headerTitleAlign:'left',
          headerRight:()=>(
            <View style={{marginEnd:10,flexDirection:'row'}}> 
           <Text style={{paddingRight:15,paddingTop:13,fontWeight:"normal",}}>{user1.email}</Text>
            <Avatar.Image 
            source={{   uri:base64.decode(user1.avatar)}} 
            size={40}
            />
{/* <Text>Email:{user1.email}</Text> */}
            </View>
          ),
        }}/>
        <Drawer.Screen name="Updateguest" component={Updateguest} 
        
        options={{
          title:'Home',
          headerTitleAlign:'left',
          headerRight:()=>(
            <View style={{marginEnd:10,flexDirection:'row'}}> 
           <Text style={{paddingRight:15,paddingTop:13,fontWeight:"normal",}}>{user1.email}</Text>
            <Avatar.Image 
            source={{   uri:base64.decode(user1.avatar)}} 
            size={40}
            />  
{/* <Text>Email:{user1.email}</Text> */}
            </View>
          ),
        }}/>



<Drawer.Screen name="updateprofile" component={updateprofile} 
        
        options={{
          title:'Update Profile',
          headerTitleAlign:'left',
          headerRight:()=>(
            <View style={{marginEnd:10,flexDirection:'row'}}> 
           <Text style={{paddingRight:15,paddingTop:13,fontWeight:"normal",}}>{user1.email}</Text>
            <Avatar.Image 
            source={{   uri:base64.decode(user1.avatar)}} 
            size={40}
            />  
{/* <Text>Email:{user1.email}</Text> */}
            </View>
          ),
        }}/>


        <Drawer.Screen name="Profile" component={Profile}  />
        
       
      </Drawer.Navigator>

      
  );
}

My drawer navigator is working fine I want to add a bottom tab navigator its code is below:

const Tab = createMaterialBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator
     
      activeColor="#e91e63"
      barStyle={{ backgroundColor: 'tomato' }}
    >
      <Tab.Screen
        name="homes"
        component={DrwaerNav}
        options={{
          tabBarLabel: 'Home',
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="home" color={color} size={26} />
          ),
        }}
      />
      <Tab.Screen
        name="Updates"
        component={updates}
        options={{
          tabBarLabel: 'Updates',
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="bell" color={color} size={26} />
          ),
        }}
      />
      <Tab.Screen
        name="Profile"
        component={Profile}
        options={{
          tabBarLabel: 'Profile',
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="account" color={color} size={26} />
          ),
        }}
      />
    </Tab.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      
    <Stack.Navigator initialRouteName="Login" screenOptions={{
        headerShown: false
      }}>
    {/* <Stack.Navigator initialRouteName="SignUp" headerShown="false"> */}
      <Stack.Screen name="Login" component={Login} />
      <Stack.Screen name="SignUp" component={SignUp} />
      <Stack.Screen name="dashboard" component={DrwaerNav} />  
    </Stack.Navigator>
    
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Hardik Desai · Answer 1 · 2023-02-17T05:44:29.597

Please try below code with basic setup

import React from 'react'
import {NavigationContainer} from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack'
import { createDrawerNavigator } from '@react-navigation/drawer'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import { View, Text } from 'react-native'

const Stack = createStackNavigator()
const DrawerStack = createDrawerNavigator()
const BottomStack = createBottomTabNavigator()

// Drawer code
function AppDrawerStack() {
    return (
        <DrawerStack.Navigator drawerContent={props => <DrawerView {...props} />}>
            <DrawerStack.Screen name='AppBottomStack' component={AppBottomStack} />
        </DrawerStack.Navigator>
    )


}

function DrawerView() {
    return (
        <View>
            <Text>
                Drawer View
            </Text>
        </View>
    )
}

// Bottom Stack Part

function AppBottomStack() {
    return (
        <BottomStack.Navigator>
            <BottomStack.Screen
                name='BottomScreenOne'
                component={BottomScreenOne}

            />
            <BottomStack.Screen
                name='BottomScreenTwo'
                component={BottomScreenTwo}
            />
        </BottomStack.Navigator>
    )
}

function BottomScreenOne() {
    return (
        <View>
            <Text>
                BottomScreenOne
            </Text>
        </View>
    )
}

function BottomScreenTwo() {
    return (
        <View>
            <Text>
                BottomScreenTwo
            </Text>
        </View>
    )
}



export default function App() {
    return (
      <NavigationContainer>
        <Stack.Navigator>
            <Stack.Screen name="AppDrawerStack" component={AppDrawerStack} />
        </Stack.Navigator>
      </NavigationContainer>
    )
}

Gyan Prakash · Answer 2 · 2022-10-22T07:27:49.833

Please follow this GitHub repo here I have combined drawer, bottom and stack navigation https://github.com/Gyanprakash73/DTSNavigator

Otherwise, Follow this below code

App.js

import 'react-native-gesture-handler';
import React from 'react';
import {createStackNavigator} from '@react-navigation/stack';
import {NavigationContainer} from '@react-navigation/native';
import DrawerNavigator from './src/navigation/DrawerNavigator';

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="DrawerNavigator">
        <Stack.Screen
          name="DrawerNavigator"
          component={DrawerNavigator}
          options={{headerShown: false}}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

DrawerNavigator.js

import * as React from 'react';
import {View, StyleSheet, Image, Text, TouchableOpacity} from 'react-native';
import {
  createDrawerNavigator,
  DrawerContentScrollView,
  DrawerItemList,
} from '@react-navigation/drawer';
import MyRewardsStackNavigator from './stack-navigators/MyRewardsStackNavigator';
import LocationsStackNavigator from './stack-navigators/LocationsStackNavigator';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

import BottomTabNavigator from './BottomTabNavigator';

const Drawer = createDrawerNavigator();

const DrawerNavigator = () => {
  const DrawerHeaderContent = props => {
    return (
      <DrawerContentScrollView contentContainerStyle={{flex: 1}}>
        <View
          style={{
            backgroundColor: '#4f4f4f',
            height: 100,
            justifyContent: 'center',
            alignItems: 'center',
            top: -5,
          }}>
          <Text style={{color: '#fff'}}>Home</Text>
        </View>
        <DrawerItemList {...props} />
      </DrawerContentScrollView>
    );
  };

  return (
    <Drawer.Navigator
      screenOptions={{
        drawerStyle: {
          backgroundColor: '#fff',
        },
      }}
      drawerContent={DrawerHeaderContent}>
      <Drawer.Screen
        name={'BottomTabNavigator'}
        component={BottomTabNavigator}
        options={{
          drawerLabel: 'Home Screen',
          drawerIcon: ({focused, size, color}) => (
            <MaterialCommunityIcons name="home" color={color} size={size} />
          ),
        }}
      />
      <Drawer.Screen
        name={'MyRewardsStackNavigator'}
        component={MyRewardsStackNavigator}
        options={{
          drawerLabel: 'My Rewards Screen',
          drawerIcon: ({focused, size, color}) => (
            <MaterialCommunityIcons name="firewire" color={color} size={size} />
          ),
        }}
      />
      <Drawer.Screen
        name={'LocationsStackNavigator'}
        component={LocationsStackNavigator}
        options={{
          drawerLabel: 'Locations Screen',
          drawerIcon: ({focused, size, color}) => (
            <MaterialCommunityIcons
              name="location-enter"
              color={color}
              size={size}
            />
          ),
        }}
      />
    </Drawer.Navigator>
  );
};

const styles = StyleSheet.create({
  headerLeft: {
    marginLeft: 15,
  },
  headerTitle: {
    color: 'white',
    fontSize: 18,
    fontWeight: '500',
  },
  headerRight: {
    marginRight: 15,
  },
  // drawer content
  drawerLabel: {
    fontSize: 14,
  },
  drawerLabelFocused: {
    fontSize: 14,
    color: '#551E18',
    fontWeight: '500',
  },
  drawerItem: {
    height: 50,
    justifyContent: 'center',
  },
  drawerItemFocused: {
    backgroundColor: '#ba9490',
  },
});

export default DrawerNavigator;

BottomTabNavigator.js

import * as React from 'react';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {Text, StyleSheet, View} from 'react-native';

import HomeStackNavigator from './stack-navigators/HomeStackNavigator';
import BookStackNavigator from './stack-navigators/BookStackNavigator';
import ContactStackNavigator from './stack-navigators/ContactStackNavigator';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

const Tab = createBottomTabNavigator();

const BottomTabNavigator = () => {
  return (
    <Tab.Navigator initialRouteName="HomeScreen" screenOptions={{}}>
      <Tab.Screen
        name={'HomeStackNavigator'}
        component={HomeStackNavigator}
        options={{
          tabBarLabel: 'Home Screen',
          headerShown: false,
          tabBarIcon: ({color, size}) => (
            <MaterialCommunityIcons name="home" color={color} size={size} />
          ),
        }}
      />
      <Tab.Screen
        name={'BookStackNavigator'}
        component={BookStackNavigator}
        options={{
          tabBarLabel: 'Book Screen',
          headerShown: false,
          tabBarIcon: ({color, size}) => (
            <MaterialCommunityIcons
              name="book-open-blank-variant"
              color={color}
              size={size}
            />
          ),
        }}
      />
      <Tab.Screen
        name={'ContactStackNavigator'}
        component={ContactStackNavigator}
        options={{
          tabBarLabel: 'Contact Screen',
          headerShown: false,
          tabBarIcon: ({color, size}) => (
            <MaterialCommunityIcons name="contacts" color={color} size={size} />
          ),
        }}
      />
    </Tab.Navigator>
  );
};

const styles = StyleSheet.create({
  tabBarLabel: {
    color: '#292929',
    fontSize: 12,
  },
  tabContainer: {
    height: 60,
  },
});

export default BottomTabNavigator;

I followed this code and ran into a strange situation. When selecting the 'Home Screen' screen from the Drawer I see the bottom navigator (and also I can use the bottom navigator). But when selecting the 'My Rewards Screen' from the Drawer I don't see the bottom navigator anymore. How to solve this? — rene, Apr 18 '23 at 14:57

How to combine bottom tab navigator with drawer navigator

2 Answers2

Linked