Create Navigation Drawer (Side menu ) in React Native using React-Navigation V3

Navigation Drawer React Native React-Navigation Side menu React Native

By Code solution
Jan 20th, 2021
0 comments
1

React-Navigation provide 100% feel native application drawer in android and ios both.Today we are going to learn how to create nativgation drawer in my react-native application.

Project Folder Structure

android
ios
node_modules
src
    Componets
        login
            login.js
            login.css
    routes
        LeftDrawer.js
        route.js
    sidebar
        Leftsidebar.js
    App.js
app.json
babel.config.js
index.js
metro.config.js
package-lock.json
package.json

Creating New Project run this command

react-native init <Project-name>

After then create a project add node package

npm install --save native-base react-navigation react-native-gesture-handler

After then install node package then run this command

react-native link

After then Open index.js under Project folder and add this code.

import {AppRegistry} from 'react-native';
import App from './src/App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

After then src folder under ther project folder like "project-name/src/" and cut the App.js of the root folder and paste src folder
After that add this code in App.js

import React, {Component} from 'react';
import { Root } from "native-base";
import Routes from "./routes/route/";
export default class App extends React.Component {
render() {
return (
<Root>
   <Routes />
</Root>
);
}
}

After then create Components folder under ther src folder and create a login folder and file then add code

import React, {Component} from 'react';
import { View } from 'react-native';
import { Container, Header, Content, Button, Text, Left, Body, Right, Icon, Title, Form, Item, Input, Label } from 'native-base';
export default class Login extends Component {
render() {
return (
<Container>
<Header>
<Left>
<Button transparent onPress={() => this.props.navigation.openDrawer()}>
<Icon name='menu' />
</Button>
</Left>
<Body>
<Title>Header</Title>
</Body>
<Right>
<Button transparent onPress={() => this.props.navigation.openDrawer()}>
<Icon name='menu' />
</Button>
</Right>
</Header>
<Content>
<Form>
<Item floatingLabel>
<Label>Username</Label>
<Input />
</Item>
<Item floatingLabel last>
<Label>Password</Label>
<Input />
</Item>
</Form>
</Content>
</Container>
);
}
}

After then create routes folder under ther src folder and create a file route.js after that add code

import React from "react";
import { View, Text, Button } from "react-native";
import LeftDrawer from "./LeftDrawer"
import {createStackNavigator, createAppContainer} from 'react-navigation';
import Login from "../Components/login/login"
const MainNavigator = createStackNavigator({
Login: {screen: Login},
LeftDrawer: {screen: LeftDrawer}
},
{
initialRouteName: "LeftDrawer",
headerMode: "none",
swipeEnabled: false
});
const MainRoute = createAppContainer(MainNavigator);
export default MainRoute;

After then create a file LeftDrawer.js in routes folder and add code

import React from "react";
import { View, Text, Button, Dimensions } from "react-native";
import { createDrawerNavigator, createAppContainer } from "react-navigation";
import LeftSideBar from "../sidebar/leftsidebar";
import Login from "../Components/login/login"
const WIDTH = Dimensions.get('window').width;
const LeftDrawer = createDrawerNavigator(
{
Login: { screen: Login }
},
{
initialRouteName: "Login",
drawerWidth:WIDTH*0.80,
drawerPosition:'left',
contentOptions: {
activeTintColor: "#e91e63"
},
contentComponent: props => <LeftSideBar {...props} />,
drawerOpenRoute: 'LeftSideMenu',
drawerCloseRoute: 'LeftSideMenuClose',
drawerToggleRoute: 'LeftSideMenuToggle',
}
);
export default LeftDrawer;

After then create sidebar folder under ther src folder and create a file under sidebar folder leftsidebar.js after that add code

import React, { Component } from "react"
import { Content,List, Header, Body, Title,ListItem, Container, Left, Right, Icon, Text, Badge} from "native-base";
import { ScrollView } from "react-native-gesture-handler";
import { NavigationActions } from 'react-navigation';
export default class LeftSideBar extends React.Component {
constructor(props) {
super(props)
}
navigateToScreen = (route) => () => {
const navigate = NavigationActions.navigate({
routeName: route
});
this.props.navigation.dispatch(navigate);
}
render() {
return (
<ScrollView>
<Container>
<Header>
<Left/>
<Body>
<Title>Left Side</Title>
</Body>
<Right />
</Header>
<Content>
<List>
<ListItem onPress={() => this.props.navigation.closeDrawer()} selected>
<Left>
<Text>Simon Mignolet</Text>
</Left>
<Right>
<Icon name="arrow-forward" />
</Right>
</ListItem>
<ListItem onPress={() => this.props.navigation.closeDrawer()}>
<Left>
<Text>Nathaniel Clyne</Text>
</Left>
<Right>
<Icon name="arrow-forward" />
</Right>
</ListItem>
<ListItem onPress={() => this.props.navigation.closeDrawer()}>
<Left>
<Text>Dejan Lovren</Text>
</Left>
<Right>
<Icon name="arrow-forward" />
</Right>
</ListItem>
</List>
</Content>
</Container>
</ScrollView>
)
}
}

Navigation Drawer (Side menu ) in React Native using React-Navigation V3 are done.

Run command

react-native run-android
react-native run-ios

if you are change the App name then you delete android and ios folder of you project. After then run this command

 react-native eject

this command help to create android and ios folder with clean status

Thank you

github link: https://github.com/Sudarshan101/React-native-drawe

youtube: https://www.youtube.com/watch?v=pVKAJpyJZv0

About the author

Code solution

info@codesolution.co.in

Discussion

0 comments

Add comment To Login

Add comment