├── App.js
├── README.md
├── app.json
├── assets
    ├── adaptive-icon.png
    ├── bell.png
    ├── close.png
    ├── favicon.png
    ├── home.png
    ├── icon.png
    ├── logout.png
    ├── menu.png
    ├── photo.jpg
    ├── profile.png
    ├── search.png
    ├── settings.png
    └── splash.png
├── babel.config.js
├── package-lock.json
└── package.json


/App.js:
--------------------------------------------------------------------------------
  1 | import { StatusBar } from 'expo-status-bar';
  2 | import React, { useRef, useState } from 'react';
  3 | import { Animated, Image, SafeAreaView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
  4 | import profile from './assets/profile.png';
  5 | // Tab ICons...
  6 | import home from './assets/home.png';
  7 | import search from './assets/search.png';
  8 | import notifications from './assets/bell.png';
  9 | import settings from './assets/settings.png';
 10 | import logout from './assets/logout.png';
 11 | // Menu
 12 | import menu from './assets/menu.png';
 13 | import close from './assets/close.png';
 14 | 
 15 | // Photo
 16 | import photo from './assets/photo.jpg';
 17 | 
 18 | export default function App() {
 19 |   const [currentTab, setCurrentTab] = useState("Home");
 20 |   // To get the curretn Status of menu ...
 21 |   const [showMenu, setShowMenu] = useState(false);
 22 | 
 23 |   // Animated Properties...
 24 | 
 25 |   const offsetValue = useRef(new Animated.Value(0)).current;
 26 |   // Scale Intially must be One...
 27 |   const scaleValue = useRef(new Animated.Value(1)).current;
 28 |   const closeButtonOffset = useRef(new Animated.Value(0)).current;
 29 | 
 30 |   return (
 31 |     <SafeAreaView style={styles.container}>
 32 | 
 33 |       <View style={{ justifyContent: 'flex-start', padding: 15 }}>
 34 |         <Image source={profile} style={{
 35 |           width: 60,
 36 |           height: 60,
 37 |           borderRadius: 10,
 38 |           marginTop: 8
 39 |         }}></Image>
 40 | 
 41 |         <Text style={{
 42 |           fontSize: 20,
 43 |           fontWeight: 'bold',
 44 |           color: 'white',
 45 |           marginTop: 20
 46 |         }}>Jenna Ezarik</Text>
 47 | 
 48 |         <TouchableOpacity>
 49 |           <Text style={{
 50 |             marginTop: 6,
 51 |             color: 'white'
 52 |           }}>View Profile</Text>
 53 |         </TouchableOpacity>
 54 | 
 55 |         <View style={{ flexGrow: 1, marginTop: 50 }}>
 56 |           {
 57 |             // Tab Bar Buttons....
 58 |           }
 59 | 
 60 |           {TabButton(currentTab, setCurrentTab, "Home", home)}
 61 |           {TabButton(currentTab, setCurrentTab, "Search", search)}
 62 |           {TabButton(currentTab, setCurrentTab, "Notifications", notifications)}
 63 |           {TabButton(currentTab, setCurrentTab, "Settings", settings)}
 64 | 
 65 |         </View>
 66 | 
 67 |         <View>
 68 |           {TabButton(currentTab, setCurrentTab, "LogOut", logout)}
 69 |         </View>
 70 | 
 71 |       </View>
 72 | 
 73 |       {
 74 |         // Over lay View...
 75 |       }
 76 | 
 77 |       <Animated.View style={{
 78 |         flexGrow: 1,
 79 |         backgroundColor: 'white',
 80 |         position: 'absolute',
 81 |         top: 0,
 82 |         bottom: 0,
 83 |         left: 0,
 84 |         right: 0,
 85 |         paddingHorizontal: 15,
 86 |         paddingVertical: 20,
 87 |         borderRadius: showMenu ? 15 : 0,
 88 |         // Transforming View...
 89 |         transform: [
 90 |           { scale: scaleValue },
 91 |           { translateX: offsetValue }
 92 |         ]
 93 |       }}>
 94 | 
 95 |         {
 96 |           // Menu Button...
 97 |         }
 98 | 
 99 |         <Animated.View style={{
100 |           transform: [{
101 |             translateY: closeButtonOffset
102 |           }]
103 |         }}>
104 |           <TouchableOpacity onPress={() => {
105 |             // Do Actions Here....
106 |             // Scaling the view...
107 |             Animated.timing(scaleValue, {
108 |               toValue: showMenu ? 1 : 0.88,
109 |               duration: 300,
110 |               useNativeDriver: true
111 |             })
112 |               .start()
113 | 
114 |             Animated.timing(offsetValue, {
115 |               // YOur Random Value...
116 |               toValue: showMenu ? 0 : 230,
117 |               duration: 300,
118 |               useNativeDriver: true
119 |             })
120 |               .start()
121 | 
122 |             Animated.timing(closeButtonOffset, {
123 |               // YOur Random Value...
124 |               toValue: !showMenu ? -30 : 0,
125 |               duration: 300,
126 |               useNativeDriver: true
127 |             })
128 |               .start()
129 | 
130 |             setShowMenu(!showMenu);
131 |           }}>
132 | 
133 |             <Image source={showMenu ? close : menu} style={{
134 |               width: 20,
135 |               height: 20,
136 |               tintColor: 'black',
137 |               marginTop: 40,
138 | 
139 |             }}></Image>
140 | 
141 |           </TouchableOpacity>
142 | 
143 |           <Text style={{
144 |             fontSize: 30,
145 |             fontWeight: 'bold',
146 |             color: 'black',
147 |             paddingTop: 20
148 |           }}>{currentTab}</Text>
149 | 
150 |           <Image source={photo} style={{
151 |             width: '100%',
152 |             height: 300,
153 |             borderRadius: 15,
154 |             marginTop: 25
155 |           }}></Image>
156 | 
157 |           <Text style={{
158 |             fontSize: 20,
159 |             fontWeight: 'bold'
160 |             , paddingTop: 15,
161 |             paddingBottom: 5
162 |           }}>Jenna Ezarik</Text>
163 | 
164 |           <Text style={{
165 |           }}>Techie, YouTuber, PS Lover, Apple Sheep's Sister</Text>
166 |         </Animated.View>
167 | 
168 |       </Animated.View>
169 | 
170 |     </SafeAreaView>
171 |   );
172 | }
173 | 
174 | // For multiple Buttons...
175 | const TabButton = (currentTab, setCurrentTab, title, image) => {
176 |   return (
177 | 
178 |     <TouchableOpacity onPress={() => {
179 |       if (title == "LogOut") {
180 |         // Do your Stuff...
181 |       } else {
182 |         setCurrentTab(title)
183 |       }
184 |     }}>
185 |       <View style={{
186 |         flexDirection: "row",
187 |         alignItems: 'center',
188 |         paddingVertical: 8,
189 |         backgroundColor: currentTab == title ? 'white' : 'transparent',
190 |         paddingLeft: 13,
191 |         paddingRight: 35,
192 |         borderRadius: 8,
193 |         marginTop: 15
194 |       }}>
195 | 
196 |         <Image source={image} style={{
197 |           width: 25, height: 25,
198 |           tintColor: currentTab == title ? "#5359D1" : "white"
199 |         }}></Image>
200 | 
201 |         <Text style={{
202 |           fontSize: 15,
203 |           fontWeight: 'bold',
204 |           paddingLeft: 15,
205 |           color: currentTab == title ? "#5359D1" : "white"
206 |         }}>{title}</Text>
207 | 
208 |       </View>
209 |     </TouchableOpacity>
210 |   );
211 | }
212 | 
213 | const styles = StyleSheet.create({
214 |   container: {
215 |     flex: 1,
216 |     backgroundColor: '#5359D1',
217 |     alignItems: 'flex-start',
218 |     justifyContent: 'flex-start',
219 |   },
220 | });
221 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Custom Drawer Navigator With Animated API
2 | 


--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "expo": {
 3 |     "name": "sidemenu",
 4 |     "slug": "sidemenu",
 5 |     "version": "1.0.0",
 6 |     "orientation": "portrait",
 7 |     "icon": "./assets/icon.png",
 8 |     "splash": {
 9 |       "image": "./assets/splash.png",
10 |       "resizeMode": "contain",
11 |       "backgroundColor": "#ffffff"
12 |     },
13 |     "updates": {
14 |       "fallbackToCacheTimeout": 0
15 |     },
16 |     "assetBundlePatterns": [
17 |       "**/*"
18 |     ],
19 |     "ios": {
20 |       "supportsTablet": true
21 |     },
22 |     "android": {
23 |       "adaptiveIcon": {
24 |         "foregroundImage": "./assets/adaptive-icon.png",
25 |         "backgroundColor": "#FFFFFF"
26 |       }
27 |     },
28 |     "web": {
29 |       "favicon": "./assets/favicon.png"
30 |     }
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/assets/adaptive-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ReactiveKoding/Custom-Menu/ac1ed890934181951ac4d5416765b5ae6d502fe9/assets/adaptive-icon.png


--------------------------------------------------------------------------------
/assets/bell.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ReactiveKoding/Custom-Menu/ac1ed890934181951ac4d5416765b5ae6d502fe9/assets/bell.png


--------------------------------------------------------------------------------
/assets/close.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ReactiveKoding/Custom-Menu/ac1ed890934181951ac4d5416765b5ae6d502fe9/assets/close.png


--------------------------------------------------------------------------------
/assets/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ReactiveKoding/Custom-Menu/ac1ed890934181951ac4d5416765b5ae6d502fe9/assets/favicon.png


--------------------------------------------------------------------------------
/assets/home.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ReactiveKoding/Custom-Menu/ac1ed890934181951ac4d5416765b5ae6d502fe9/assets/home.png


--------------------------------------------------------------------------------
/assets/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ReactiveKoding/Custom-Menu/ac1ed890934181951ac4d5416765b5ae6d502fe9/assets/icon.png


--------------------------------------------------------------------------------
/assets/logout.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ReactiveKoding/Custom-Menu/ac1ed890934181951ac4d5416765b5ae6d502fe9/assets/logout.png


--------------------------------------------------------------------------------
/assets/menu.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ReactiveKoding/Custom-Menu/ac1ed890934181951ac4d5416765b5ae6d502fe9/assets/menu.png


--------------------------------------------------------------------------------
/assets/photo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ReactiveKoding/Custom-Menu/ac1ed890934181951ac4d5416765b5ae6d502fe9/assets/photo.jpg


--------------------------------------------------------------------------------
/assets/profile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ReactiveKoding/Custom-Menu/ac1ed890934181951ac4d5416765b5ae6d502fe9/assets/profile.png


--------------------------------------------------------------------------------
/assets/search.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ReactiveKoding/Custom-Menu/ac1ed890934181951ac4d5416765b5ae6d502fe9/assets/search.png


--------------------------------------------------------------------------------
/assets/settings.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ReactiveKoding/Custom-Menu/ac1ed890934181951ac4d5416765b5ae6d502fe9/assets/settings.png


--------------------------------------------------------------------------------
/assets/splash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ReactiveKoding/Custom-Menu/ac1ed890934181951ac4d5416765b5ae6d502fe9/assets/splash.png


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = function(api) {
2 |   api.cache(true);
3 |   return {
4 |     presets: ['babel-preset-expo'],
5 |   };
6 | };
7 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "main": "node_modules/expo/AppEntry.js",
 3 |   "scripts": {
 4 |     "start": "expo start",
 5 |     "android": "expo start --android",
 6 |     "ios": "expo start --ios",
 7 |     "web": "expo start --web",
 8 |     "eject": "expo eject"
 9 |   },
10 |   "dependencies": {
11 |     "expo": "~41.0.1",
12 |     "expo-status-bar": "~1.0.4",
13 |     "react": "16.13.1",
14 |     "react-dom": "16.13.1",
15 |     "react-native": "https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz",
16 |     "react-native-web": "~0.13.12"
17 |   },
18 |   "devDependencies": {
19 |     "@babel/core": "^7.9.0"
20 |   },
21 |   "private": true
22 | }
23 | 


--------------------------------------------------------------------------------