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 : ‘/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 : ‘/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 :
How To Enable Disable JavaScript Code in WebView React Native
React Native Call Load Different CSS Style on View Component
Run Android Emulator AVD Manager without Android Studio
React Native Swipe Down Pull to Refresh ListView Using RefreshControl iOS Android Example Tutorial
React Native Change Text Component Height Width Dynamically
