Sliding drawer is default widget comes with Android application development but in react native there is no component known as Sliding drawer. But we can make our own Sliding drawer using custom animation method. Sliding drawer is a sliding view from left to right side connected with a ICON which control the Slide in and Slide out animation. So in this tutorial we would going to Create Custom Sliding Drawer Using Animation for both iOS and Android application in react native. So let’s get started ?? .
Contents in this project Create Custom Sliding Drawer Using Animation iOS Android Example :
1. Import View, Text, StyleSheet, TouchableOpacity, Image, Platform and Animated component in your project. We would also define a constant variable Sliding_Drawer_Width and define the Sliding drawer width as 300 pixels.
|
1 2 3 4 5 |
import React, { Component } from 'react'; import { View, Text, StyleSheet, TouchableOpacity, Image, Platform, Animated } from 'react-native'; const Sliding_Drawer_Width = 300; |
2. Create constructor() in your class. Now we would make this.Animation and this.Sliding_Drawer_Toggle.
this.Animation : Is used to set animation on sliding drawer.
this.Sliding_Drawer_Toggle : Holds the Boolean value in True – False form.
|
1 2 3 4 5 6 7 8 |
constructor() { super(); this.Animation = new Animated.Value(0); this.Sliding_Drawer_Toggle = true; } |
3. Create a function named as ShowSlidingDrawer(). This function is the base of this tutorial. Using this method we can control the Toggle functionality with Slide In – Slide Out animation.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
ShowSlidingDrawer = () => { if( this.Sliding_Drawer_Toggle === true ) { Animated.timing( this.Animation, { toValue: 1, duration: 500 } ).start(() => { this.Sliding_Drawer_Toggle = false; }); } else { Animated.timing( this.Animation, { toValue: 0, duration: 500 } ).start(() => { this.Sliding_Drawer_Toggle = true; }); } } |
4. Create Aniamted.interpolate method in render block. Interpolate method controls the animation and makes it smooth. In outputRange we would set a formula to show the ICON while drawer is hidden.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
render() { const Animation_Interpolate = this.Animation.interpolate( { inputRange: [ 0, 1 ], outputRange: [ -(Sliding_Drawer_Width - 32), 0 ] }); return ( ); } |
5. Create a Root View in render’s return block.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
render() { const Animation_Interpolate = this.Animation.interpolate( { inputRange: [ 0, 1 ], outputRange: [ -(Sliding_Drawer_Width - 32), 0 ] }); return ( <View style = { styles.MainContainer }> </View> ); } |
6. Now we would add a Text component before Animated.View. The Animated.View is our Sliding Drawer View.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
render() { const Animation_Interpolate = this.Animation.interpolate( { inputRange: [ 0, 1 ], outputRange: [ -(Sliding_Drawer_Width - 32), 0 ] }); return ( <View style = { styles.MainContainer }> <Text style = {styles.TextStyle}> Components Which You Want To Show in App, Place Them Here. </Text> <Animated.View style = {[ styles.Root_Sliding_Drawer_Container, { transform: [{ translateX: Animation_Interpolate }]}]}> <View style = { styles.Main_Sliding_Drawer_Container }> {/* Put All Your Components Here Which You Want To Show Inside Sliding Drawer. */} <Text style = { styles.TextStyle } > Put All Your Components Here Which You Want To Show Inside Sliding Drawer. </Text> </View> <TouchableOpacity onPress = { this.ShowSlidingDrawer } style = {{ padding: 1 }}> <Image source = {{ uri : 'https://reactnativecode.com/wp-content/uploads/2017/11/Arrow_Icon.png' }} style = {{resizeMode: 'contain', width: 30, height: 30 }} /> </TouchableOpacity> </Animated.View> </View> ); } |
7. Define all CSS Style .
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
const styles = StyleSheet.create( { MainContainer: { flex: 1, justifyContent: 'center', alignItems: 'center' }, Root_Sliding_Drawer_Container: { position: 'absolute', flexDirection: 'row', left: 0, bottom: 0, top: (Platform.OS == 'ios') ? 20 : 0, width: Sliding_Drawer_Width, }, Main_Sliding_Drawer_Container: { flex: 1, backgroundColor: '#FFC107', paddingHorizontal: 10, justifyContent: 'center', alignItems: 'center' }, TextStyle: { fontSize: 25, padding: 10, textAlign: 'center', color: '#FF5722' } }); |
8. Complete source code for App.js File :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 |
import React, { Component } from 'react'; import { View, Text, StyleSheet, TouchableOpacity, Image, Platform, Animated } from 'react-native'; const Sliding_Drawer_Width = 300; export default class App extends Component<{}> { constructor() { super(); this.Animation = new Animated.Value(0); this.Sliding_Drawer_Toggle = true; } ShowSlidingDrawer = () => { if( this.Sliding_Drawer_Toggle === true ) { Animated.timing( this.Animation, { toValue: 1, duration: 500 } ).start(() => { this.Sliding_Drawer_Toggle = false; }); } else { Animated.timing( this.Animation, { toValue: 0, duration: 500 } ).start(() => { this.Sliding_Drawer_Toggle = true; }); } } render() { const Animation_Interpolate = this.Animation.interpolate( { inputRange: [ 0, 1 ], outputRange: [ -(Sliding_Drawer_Width - 32), 0 ] }); return ( <View style = { styles.MainContainer }> <Text style = {styles.TextStyle}> Components Which You Want To Show in App, Place Them Here. </Text> <Animated.View style = {[ styles.Root_Sliding_Drawer_Container, { transform: [{ translateX: Animation_Interpolate }]}]}> <View style = { styles.Main_Sliding_Drawer_Container }> {/* Put All Your Components Here Which You Want To Show Inside Sliding Drawer. */} <Text style = { styles.TextStyle } > Put All Your Components Here Which You Want To Show Inside Sliding Drawer. </Text> </View> <TouchableOpacity onPress = { this.ShowSlidingDrawer } style = {{ padding: 1 }}> <Image source = {{ uri : 'https://reactnativecode.com/wp-content/uploads/2017/11/Arrow_Icon.png' }} style = {{resizeMode: 'contain', width: 30, height: 30 }} /> </TouchableOpacity> </Animated.View> </View> ); } } const styles = StyleSheet.create( { MainContainer: { flex: 1, justifyContent: 'center', alignItems: 'center' }, Root_Sliding_Drawer_Container: { position: 'absolute', flexDirection: 'row', left: 0, bottom: 0, top: (Platform.OS == 'ios') ? 20 : 0, width: Sliding_Drawer_Width, }, Main_Sliding_Drawer_Container: { flex: 1, backgroundColor: '#FFC107', paddingHorizontal: 10, justifyContent: 'center', alignItems: 'center' }, TextStyle: { fontSize: 25, padding: 10, textAlign: 'center', color: '#FF5722' } }); |
Screenshots in Android device :
Screenshot in iOS device :
Also Read :
React Native Swipeable CardView like Tinder in iOS Android Example
React Native Animated Accordion Collapsible Expandable iOS Android Tutorial
React Native Collapsible Animated Text View with Slide up Slide down Animation
React Native Create Custom Component with custom user define Props
React Native Transform Scale Animation Android iOS Example
can you possible to trigger this action while clicking on menu icon (bars) as we so in popular app
Yes Jithin just put the icons inside the Drawer layout.
all your tutorials is more helpful.please do more tutorials
Thanks for comment Anushiya 🙂 .
Hi please can you help to build such drawer in my app, but the activity behind the drawer should contain listview, Im stuck up, please help me
Firas just implement the ListView one the Main Layout.
After navigating to a different page the navigator is still not closed
Raj you want to close it automatically after navigating to another page ?
now its working.Thanks for the reply
How to give left space for the image as its on the absolute position?
how to make this sliding drawer swipe able
Raj we have to use Pan responder here to make this drawer swipable.
Raj simply edit the CSS .
Can u add a tutorial for how to integrate payment APIs like razorpay and stripe in react-native?
Raj it would take some time but thanks for your suggestion, we will soon post tutorial on your suggestion.