Drawer navigation inside Tab navigation but on top (react native)

Asked
Active3 hr before
Viewed126 times

10 Answers

drawernativeinsidenavigationreact
90%

You will have to nest a drawer navigator inside your tab navigator.,I'm coding a react native app similar to Instagram. I have already a bottom tab navigator with 5 items, the last one is the profile tab. ,I am using the react-navigation library for this. My question is: is this possible? If yes, how could I implement it on my code?

The high level structure will be as below

const Drawer = createDrawerNavigator();
const Tab = createBottomTabNavigator();

function AppDraw() {
  return (
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Notifications" component={NotificationsScreen} />
      </Drawer.Navigator>
  );
}

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
  );
}

function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={AppDraw} />
    </Tab.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <MyTabs />
    </NavigationContainer>
  );
}
88%

Tab navigation is a navigation that is tabbed at either the bottom or top of a screen and can be used to switch between different screens.,My default screen is SignInScreen and this screen has a button to it. On a click of this, I want to go to Tab Navigation which I created. ,The dependencies below are the core utility used by the navigators to create the navigation structure, as well as our Stack, Tab, and Drawer navigation.

npm install - g expo - cli
load more v
72%

Pretag
 Pretag team - issue, fix, solve, resolve
65%

5. These steps are enough for the drawer navigation but in this example, we are also using between screens so we will also need Stack Navigator,1. Install react-navigation,In this example, we will make a Tab Navigator inside a Drawer Navigator so let’s get started.

Pretag
 Pretag team - issue, fix, solve, resolve
75%

React Navigation provides seamless routing and navigation on both iOS and Android for your React Native apps. Having recently taken a course on React Native, I learned that there were a lot of useful features you can add to your app through navigation, much of which I’ll explain here.,React Navigation provides an easy way to handle navigation throughout your React Native app. With the help of stacks, tabs, and drawers, transitioning through screens is a breeze.,We now have a React Native application making use of stack, tab, and drawer navigators through the React Navigation package.

If you haven’t already done so, let’s install the react-navigation package. You’ll need to run the expo install command as well to install its dependencies if you’re using Expo!

npm install @react - navigation / nativeexpo install react - native - gesture - handler react - native - reanimated react - native - screens react - native - safe - area - context @react - native - community / masked - viewOR
if you using yarn: yarn add @react - navigation / native
load more v
40%

Here you can see the BlueScreen and Default screen now aren’t inside of the DrawerNavigator.  We add these two screens to StackNavigator that also contains the DrawerNavigator. This way these screens are opened on top of the drawer navigator. This is all made possible by the contentComponent property on the DrawerNavigator, this allows us to make custom content for the menu and use the stack navigator to navigate to these pages.  Obviously in this example we made the drawer menu very simple in design but React Native gives you the tools to customize how you would like. ,There you have it! A simple React Native application with bottom tab navigation, top tabs, and a hamburger menu.  No matter what direction you would like to take with navigation inside you app React Native gives you the freedom and the ability to create the experience you want.  See the finished product below! For more information on the packages I used check the links below.,Once initialized we will need to install some packages. The first package we will install is react-navigation.  This will give you the hamburger menu and the bottom tabs and as the name might suggest allow you to navigate between different screens.  Run the following commands:

Android requires one extra step. Make sure your MainActivity.java looks like this:

package com.navigationexample;

import com.facebook.react.ReactActivity;
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactActivity {

   /**
    * Returns the name of the main component registered from JavaScript.
    * This is used to schedule rendering of the component.
    */
   @Override
   protected String getMainComponentName() {
      return "navigationExample";
   }

   @Override
   protected ReactActivityDelegate createReactActivityDelegate() {
      return new ReactActivityDelegate(this, getMainComponentName()) {
         @Override
         protected ReactRootView createRootView() {
            return new RNGestureHandlerEnabledRootView(MainActivity.this);
         }
      };
   }
}

src/DefaultScreen.js

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import Icon from 'react-native-vector-icons/SimpleLineIcons';

const instructions = Platform.select({
 ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
 android:
   'Double tap R on your keyboard to reload,\n' +
   'Shake or press menu button for dev menu',
});

export default class DefaultScreen extends Component {
 render() {
   return (
     <View style={styles.container}>
       <Text style={styles.welcome}>Welcome to React Native!</Text>
       <Text style={styles.instructions}>To get started, edit App.js</Text>
       <Text style={styles.instructions}>{instructions}</Text>
     </View>
   );
 }
}

const styles = StyleSheet.create({
 container: {
   flex: 1,
   justifyContent: 'center',
   alignItems: 'center',
   backgroundColor: '#F5FCFF',
 },
 welcome: {
   fontSize: 20,
   textAlign: 'center',
   margin: 10,
 },
 instructions: {
   textAlign: 'center',
   color: '#333333',
   marginBottom: 5,
 },
});

src/BlueScreen.js

import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';
import Icon from 'react-native-vector-icons/SimpleLineIcons';


export default class BlueScreen extends Component {
    render() {
 	 return (
        <View style={styles.container}>
     	 <Text style={styles.title}>Blue Screen</Text>
        </View>
 	 );
    }
 }
  const styles = StyleSheet.create({
    container: {
 	 flex: 1,
 	 justifyContent: 'center',
 	 alignItems: 'center',
 	 backgroundColor: 'blue',
    },
    title: {
 	 fontSize: 20,
 	 textAlign: 'center',
 	 margin: 10,
    }
 });

src/HamburgerNavigation.js

import {
   createAppContainer,
   createDrawerNavigator,
} from 'react-navigation';
import BlueScreen from './BlueScreen';
import DefaultScreen from './DefaultScreen';

const HamburgerNavigation = createDrawerNavigator({
   BlueScreen: BlueScreen,
   DefaultScreen: {
      screen: DefaultScreen,
   }
}, {
   initialRouteName: ‘DefaultScreen’,

});

export default createAppContainer(HamburgerNavigation);

App.js

import React, {Component} from 'react';
import HamburgerNav from './src/HamburgerNav'


export default class App extends Component {
 render() {
   return (
     <HamburgerNav/>
   );
 }
}

src/BottomTabs.js

import React from 'react';
import { createStackNavigator, createBottomTabNavigator, createAppContainer } from "react-navigation";
import Icon from 'react-native-vector-icons/SimpleLineIcons';
import GreenScreen from "./GreenScreen";
import RedScreen from "./RedScreen";



const GreenTab = createStackNavigator({
    Green: GreenScreen
});

const RedTab = createStackNavigator({
    Red: RedScreen
});

const Tabs = createBottomTabNavigator({
    Green: GreenTab,
    Red: RedTab
}, {
    defaultNavigationOptions: ({ navigation }) => ({
        tabBarIcon: () => {
            const { routeName } = navigation.state;
            let tabName;
            tabName = routeName === 'Green' ? 'home' : 'grid';

            return <Icon name={tabName} size={20} />
        }
    })
});

export default createAppContainer(Tabs);

This file holds the logic for the bottom tab navigation.  Each tab has its own stack navigator that way if you wanted to add more screens on to one tab you could by simply adding them to the correct stack.  To set the icons for the specific tabs we use the tabBarIcon property within defaultNavigationOptions and set the icon based on the title of the tab.  You can do some more customizing of the tabs (active color, inactive color, padding, font etc.) with the tabBarOptions property. For now we are just sticking with the default tab styling.  For the sake of not showing too much of the same code GreenScreen and RedScreen are the same as the BlueScreen from earlier except for one minor difference.

import HamburgerIcon from './HamburgerIcon';

export default class GreenScreen extends Component {
    static navigationOptions = () => {
        return {
            headerLeft: <HamburgerIcon/>
        };
    };

src/HamburgerIcon.js

import React, {Component} from 'react';
import { withNavigation } from 'react-navigation';
import { TouchableOpacity } from "react-native-gesture-handler";
import Icon from 'react-native-vector-icons/SimpleLineIcons';


class HamburgerIcon extends Component{
    render() {
 	 return (
        <TouchableOpacity
        style={{
            width: 44,
            height: 44,
            marginLeft: 20
        }}
        onPress={()=>{
            this.props.navigation.openDrawer();
        }}>
            <Icon name='menu' size={20} color='black'/>
        </TouchableOpacity>
 	 )
    };
}

export default withNavigation(HamburgerIcon);
load more v
22%

StackNavigator: When user taps a link, a new screen is put on top of old screens.,TabNavigator: User navigates to different screens by tapping on tabs along the top or bottom of the screen.,Navigators come in three flavors:

Now to render our App. We’ll import our DrawerNavigator into index.ios.js and pass it to the AppRegistry. Here’s the entirety of that file:

import {
   Drawer
} from './src/navigators'
import {
   AppRegistry
} from 'react-native'
AppRegistry.registerComponent('RNNavigators', () => Drawer);
60%

Sponsor Sponsor react-navigation/react-navigation ,With enabling the scroll for tabs per TabNavigatorConfig, the Drawer works!,When I nest a DrawerNavigator inside a TabNavigator, it becomes impossible to open the Drawer with a finger swipe. The Drawer will follow the finger up to a very small distance (about 10 pixels) and then close immediately.

import React, { Component } from "react";
import { View, Text } from "react-native";
import { TabNavigator, DrawerNavigator, StackNavigator } from "react-navigation";

class DrawerScreen extends Component {
  render() {
    return (
      <Text>
        Drawer Screen Content
      </Text>
    );
  }
}
class TabScreen extends Component {
  render() {
    return (
      <Text>
        Tab Screen Content
      </Text>
    );
  }
}

export default class NavSample extends Component {
  state = {};

  render() {
    const Drawer = DrawerNavigator(
      { DrawerScreen: { screen: DrawerScreen } },
      { drawerPosition: "right" }
    );

    const Tab = TabNavigator({
      TabScreen: { screen: Drawer }
    });

    return <Tab />;
  }
}
load more v
48%

Install packages for react-navigation, stack-navigation, drawer-navigation , and bottom-tab-navigation.,Set up all the navigation structure for different navigations.,React-Navigation set up for different navigation styles.

Pretag
 Pretag team - issue, fix, solve, resolve
23%

Now that we understand what we need to do, let’s create four files. Three to hold the 3 types of navigation we have and an index that would serve as the entry of our navigation that combines all 3 together.,This screen also provides an entry to the fourth and fifth screens, which are drawer navigation types. From the look of things, it’s obvious that all 5 screens are connected by a common navigation type: the stack navigation.,We have 5 screens with different navigation types: stack, tab and drawer. From the looks of things, we are combining various navigation types to create the application. A drawer navigation that holds our fourth and fifth screen, a combined top and bottom tab navigation in the second screen, a shared bottom navigation for the first screen, and a stack navigation for the third screen.

Pretag
 Pretag team - issue, fix, solve, resolve

Other "drawer-native" queries related to "Drawer navigation inside Tab navigation but on top (react native)"