React Native Side Drawer
In this part of the react-native tutorial, we will be learning about the react-native side drawer. We have already studied the status bar and various parts of react-native navigation, including params. Side drawers provide neatness of activity or menu in the sliding panel. When the user is not using it, it can be hidden, which is one of the major benefits of using react native side drawers. It makes navigation easier and clean.
Installing packages for react-native side drawers-
- npm install --save react-native-sidebar
- import { createDrawerNavigator } from '@react-navigation/drawer';
Let's create one side drawer for we react native app :
Firstly create three separate files inside the app named first.js,second.js and third.js.
App.js
import 'react-native-gesture-handler';
import { createStackNavigator } from '@react-navigation/stack';
import * as React from 'react';
import {
Button,
View,
Text,
TouchableOpacity,
Image
} from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import FirstPage from './First';
import SecondPage from './Second';
import ThirdPage from './Third';
const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();
const NavigationDrawerStructure = (props)=> {
const toggleDrawer = () => {
props.navigationProps.toggleDrawer();
};
return (
<View style={{ flexDirection: 'coloumn' }}>
<TouchableOpacity onPress={()=> toggleDrawer()}>
</TouchableOpacity>
</View>
);
}
function firstScreenStack({ navigation }) {
return (
<Stack.Navigator initialRouteName="FirstPage">
<Stack.Screen
name="First"
component={FirstPage}
options={{
title: 'welcome', //Set Header Title
headerLeft: ()=>
<NavigationDrawerStructure
navigationProps={navigation}
/>,
headerStyle: {
backgroundColor: '#f4511e', //Set Header color
},
headerTintColor: '#fff', //Set Header text color
headerTitleStyle: {
fontWeight: 'bold', //Set Header text style
},
}}
/>
</Stack.Navigator>
);
}
function secondScreenStack({ navigation }) {
return (
<Stack.Navigator
initialRouteName="SecondPage"
screenOptions={{
headerLeft: ()=>
<NavigationDrawerStructure
navigationProps={navigation}
/>,
headerStyle: {
backgroundColor: '#cc00cc', //Set Header color
},
headerTintColor: 'black',
headerTitleStyle: {
}
}}>
<Stack.Screen
name="i am the second"
component={SecondPage}
options={{
title: 'hello', //Set Header Title
}}/>
<Stack.Screen
name="ThirdPage"
component={ThirdPage}
options={{
title: 'hola', //Set Header Title
}}/>
</Stack.Navigator>
);
}
function thirdScreenStack({ navigation }) {
return (
<Stack.Navigator initialRouteName="thirdPage">
<Stack.Screen
name="i am the third"
component={ThirdPage}
options={{
title: 'welcome',
headerLeft: ()=>
<NavigationDrawerStructure
navigationProps={navigation}
/>,
headerStyle: {
backgroundColor: '#ff00ff',
},
headerTintColor: 'white',
headerTitleStyle: {
fontWeight: 'italic',
},
}}
/>
</Stack.Navigator>
);
}
function App() {
return (
<NavigationContainer>
<Drawer.Navigator
drawerContentOptions={{
activeTintColor: '#cc33ff',
itemStyle: { marginVertical: 10 },
}}>
<Drawer.Screen
name="I am the first"
options={{ drawerLabel: 'go to first page' }}
component={firstScreenStack} />
<Drawer.Screen
name="I am the second"
options={{ drawerLabel: 'go to second page' }}
component={secondScreenStack} />
<Drawer.Screen
name="I am the third"
options={{ drawerLabel: 'go to third page' }}
component={thirdScreenStack} />
</Drawer.Navigator>
</NavigationContainer>
);
}
export default App;
First.js code:
import * as React from 'react';
import {
Button,
View,
SafeAreaView,
Text,
} from 'react-native';
const FirstPage = ({ navigation }) => {
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={{ flex: 1 , padding: 26,backgroundColor:'#ffe6ff'}}>
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
}}>
<Text
style={{
fontSize: 25,
textAlign: 'center',
marginBottom: 20
}}>
india is great :) we love our country.
</Text>
</View>
<Text
style={{
fontSize: 20,
textAlign: 'center',
justifyContent:'center',
color: 'black',
paddingBottom: 20,
fontWeight:'bold'
}}>
tutorial and example
</Text>
<Text
style={{
fontSize: 16,
textAlign: 'center',
color: 'black',
fontWeight:'italic'
}}>
Happy learning ! all the best
</Text>
<Text
style={{
fontSize: 16,
textAlign: 'center',
color: 'black',
fontWeight:'italic'
}}>
Happy learning ! all the best
</Text>
<Text
style={{
fontSize: 16,
textAlign: 'center',
color: 'black',
fontWeight:'italic'
}}>
Happy learning ! all the best
</Text>
</View>
</SafeAreaView>
);
}
export default FirstPage;
Second.js code :
import * as React from 'react';
import {
Button,
Text,
SafeAreaView,
View,
} from 'react-native';
const SecondPage = ({ navigation }) => {
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={{ flex: 1, padding: 16 }}>
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
}}>
<Text
style={{
fontSize: 25,
textAlign: 'center',
marginBottom: 30
}}>
india is great :) we love our country.
</Text>
</View>
<Text
style={{
fontSize: 20,
textAlign: 'center',
justifyContent:'center',
color: 'black',
paddingBottom: 20,
fontWeight:'bold'
}}>
tutorial and example
</Text>
<Text
style={{
fontSize: 16,
textAlign: 'center',
color: 'black',
fontWeight:'italic'
}}>
Happy learning ! all the best
</Text>
<Text
style={{
fontSize: 16,
textAlign: 'center',
color: 'black',
fontWeight:'italic'
}}>
Happy learning ! all the best
</Text>
</View>
</SafeAreaView>
);
}
export default SecondPage;
Third.js code:
import * as React from 'react';
import {
Button,
View,
Text,
SafeAreaView
} from 'react-native';
const ThirdPage = ({ route, navigation }) => {
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={{ flex: 1, padding: 26 ,backgroundColor:'#e6f2ff'}}>
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
}}>
<Text
style={{
fontSize: 15,
textAlign: 'center',
marginBottom: 26,
fontWeight:'bold'
}}>
we love india :))
</Text>
</View>
<Text
style={{
fontSize: 20,
textAlign: 'center',
justifyContent:'center',
color: 'black',
paddingBottom: 20,
fontWeight:'bold'
}}>
tutorial and example
</Text>
<Text
style={{
fontSize: 16,
textAlign: 'center',
color: 'black',
fontWeight:'italic'
}}>
Happy learning ! all the best
</Text>
<Text
style={{
fontSize: 16,
textAlign: 'center',
color: 'black',
fontWeight:'italic'
}}>
Happy learning ! all the best
</Text>
</View>
</SafeAreaView>
);
}
export default ThirdPage;
Output :
Explanation of code :
In App.js code we have created three functions as we have three connected screen through stack navigator. They are first.js , second.js and third js. Here stack navigator plays an important role.
import { createDrawerNavigator } from '@react-navigation/drawer';This library plays an important role in the creation of side drawers.Lets look at the construction code of side drawers-
<Drawer.Navigator
drawerContentOptions={{
activeTintColor: '#cc33ff',
itemStyle: { marginVertical: 10 },
}}>
<Drawer.Screen
name="I am the first"
options={{ drawerLabel: 'go to first page' }}
component={firstScreenStack} />
<Drawer.Screen
name="I am the second"
options={{ drawerLabel: 'go to second page' }}
component={secondScreenStack} />
<Drawer.Screen
name="I am the third"
options={{ drawerLabel: 'go to third page' }}
component={thirdScreenStack} />
</Drawer.Navigator>
We wrapped the whole code in the navigation container and then used the drawer. Navigator will be creating a drawer tab. Each drawer screen will be responsible for options of the drawer, and inside that, we have called that screen's component, so whenever we click there, we will be directed to our respective screens.
The rest screens' codes are identical and simple as we have studied the stack navigator properly. We have only designed one only basic page in first,js,second.js, and thord.js, which is easy to understand as it contains only text components and styling.
Explanation of first.js code :
It is a simple page, and the code is easy to understand. We have wrapped the text component inside the safe area view, we have defined background screen color through hex code, and in the bottom part, we have again used text and styled it as per our desire. One header is given.
Rest two pages contain the same property, and they are identical.