├── .gitignore
├── App.js
├── Home.js
├── README.md
├── app.json
├── assets
    ├── banner.png
    ├── icon.png
    ├── profile.jpg
    └── splash.png
├── babel.config.js
├── package.json
├── yarn-error.log
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Runtime data
 9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 | 
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 | 
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 | 
20 | # nyc test coverage
21 | .nyc_output
22 | 
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 | 
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 | 
29 | # node-waf configuration
30 | .lock-wscript
31 | 
32 | # Compiled binary addons (https://nodejs.org/api/addons.html)
33 | build/Release
34 | 
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 | 
39 | # TypeScript v1 declaration files
40 | typings/
41 | 
42 | # Optional npm cache directory
43 | .npm
44 | 
45 | # Optional eslint cache
46 | .eslintcache
47 | 
48 | # Optional REPL history
49 | .node_repl_history
50 | 
51 | # Output of 'npm pack'
52 | *.tgz
53 | 
54 | # Yarn Integrity file
55 | .yarn-integrity
56 | 
57 | # dotenv environment variables file
58 | .env
59 | 
60 | # next.js build output
61 | .next
62 | 


--------------------------------------------------------------------------------
/App.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { StyleSheet, Text, View, Image, FlatList, TouchableOpacity } from 'react-native';
  3 | import { createAppContainer } from "react-navigation";
  4 | import { createDrawerNavigator } from 'react-navigation-drawer';
  5 | import { createStackNavigator } from "react-navigation-stack"
  6 | import { Ionicons } from '@expo/vector-icons';
  7 | 
  8 | 
  9 | const Header =({name, openDrawer})=> (
 10 |   <View style={styles.header}>
 11 |     <TouchableOpacity onPress={()=>openDrawer()}>
 12 |       <Ionicons name="ios-menu" size={32} />
 13 |     </TouchableOpacity>
 14 |     <Text>{name}</Text>
 15 |     <Text style={{width:50}}></Text>
 16 |   </View>
 17 | )
 18 | const Home = ({navigation}) => (
 19 |   <View style={styles.container}>
 20 |     <Header name="Home" openDrawer={navigation.openDrawer}/>
 21 |     <Image source ={require("./assets/banner.png")} style={{width:"80%", height:"30%"}} resizeMode="contain"/>
 22 |     <Text style={{padding:20}}>
 23 |     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet dictum sapien, nec viverra orci. Morbi sed maximus purus. Phasellus quis justo mi. Nunc ut tellus lectus. 
 24 |     </Text>
 25 |     <Text style={{padding:20}}>
 26 |     In eleifend, turpis sit amet suscipit tincidunt, felis ex tempor tellus, at commodo nunc massa rhoncus dui. Vestibulum at malesuada elit.
 27 |     </Text>
 28 | 
 29 |   </View>
 30 | )
 31 | 
 32 | const Profile = ({navigation}) => (
 33 |   <View style={styles.container}>
 34 |     <Header name="Profile" openDrawer={navigation.openDrawer}/>
 35 |     <Image source ={require("./assets/banner.png")} style={{width:"80%", height:"30%"}} resizeMode="contain"/>
 36 |     <Text style={{padding:20}}>
 37 |     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet dictum sapien, nec viverra orci. Morbi sed maximus purus. Phasellus quis justo mi. Nunc ut tellus lectus. 
 38 |     </Text>
 39 |     <Text style={{padding:20}}>
 40 |     In eleifend, turpis sit amet suscipit tincidunt, felis ex tempor tellus, at commodo nunc massa rhoncus dui. Vestibulum at malesuada elit.
 41 |     </Text>
 42 |   </View>
 43 | )
 44 | 
 45 | const Settings = ({navigation}) => (
 46 |   <View style={styles.container}>
 47 |     <Header name="Settings" openDrawer={navigation.openDrawer}/>
 48 |     <Image source ={require("./assets/banner.png")} style={{width:"80%", height:"30%"}} resizeMode="contain"/>
 49 |     <Text style={{padding:20}}>
 50 |     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet dictum sapien, nec viverra orci. Morbi sed maximus purus. Phasellus quis justo mi. Nunc ut tellus lectus. 
 51 |     </Text>
 52 |     <Text style={{padding:20}}>
 53 |     In eleifend, turpis sit amet suscipit tincidunt, felis ex tempor tellus, at commodo nunc massa rhoncus dui. Vestibulum at malesuada elit.
 54 |     </Text>
 55 |   </View>
 56 | )
 57 | 
 58 | function Item({ item, navigate }) {
 59 |   return (
 60 |     <TouchableOpacity style={styles.listItem} onPress={()=>navigate(item.name)}>
 61 |       <Ionicons name={item.icon} size={32} />
 62 |       <Text style={styles.title}>{item.name}</Text>
 63 |     </TouchableOpacity>
 64 |   );
 65 | }
 66 | 
 67 | class Sidebar extends React.Component {
 68 |   state = {
 69 |       routes:[
 70 |           {
 71 |               name:"Home",
 72 |               icon:"ios-home"
 73 |           },
 74 |           {
 75 |               name:"Profile",
 76 |               icon:"ios-contact"
 77 |           },
 78 |           {
 79 |               name:"Settings",
 80 |               icon:"ios-settings"
 81 |           },
 82 |       ]
 83 |   }
 84 | 
 85 |   
 86 |   render(){
 87 |       return (
 88 |           <View style={styles.container}>
 89 |               <Image source={require("./assets/profile.jpg")} style={styles.profileImg}/>
 90 |               <Text style={{fontWeight:"bold",fontSize:16,marginTop:10}}>Janna Doe</Text>
 91 |               <Text style={{color:"gray",marginBottom:10}}>janna@doe.com</Text>
 92 |               <View style={styles.sidebarDivider}></View>
 93 |               <FlatList
 94 |                   style={{width:"100%",marginLeft:30}}
 95 |                   data={this.state.routes}
 96 |                   renderItem={({ item }) => <Item  item={item} navigate={this.props.navigation.navigate}/>}
 97 |                   keyExtractor={item => item.name}
 98 |               />
 99 |           </View>
100 |       )
101 |   }
102 | }
103 | 
104 | const Drawer = createDrawerNavigator(
105 |   {
106 |     Home:{ screen: Home},
107 |     Profile:{ screen: Profile},
108 |     Settings:{ screen: Settings}
109 | 
110 |   },
111 |   {
112 |     initialRouteName: "Home",
113 |     unmountInactiveRoutes: true,
114 |     headerMode: "none",
115 |     contentComponent: props => <Sidebar {...props} />
116 |   }
117 | )
118 | 
119 | const AppNavigator = createStackNavigator(
120 |   {
121 |     Drawer : {screen: Drawer},
122 |   },
123 |   {
124 |     initialRouteName: "Drawer",
125 |     headerMode: "none",
126 |     unmountInactiveRoutes: true
127 |   }
128 | )
129 | 
130 | const AppContainer = createAppContainer(AppNavigator);
131 | 
132 | 
133 | 
134 | export default class App extends React.Component {
135 |   render(){
136 | 
137 |     return (
138 |       <AppContainer />
139 |     );
140 |   }
141 | 
142 | }
143 | 
144 | const styles = StyleSheet.create({
145 |   container: {
146 |     backgroundColor: "#fff",
147 |     paddingTop:40,
148 |     alignItems:"center",
149 |     flex:1
150 | 
151 |   },
152 |   listItem:{
153 |       height:60,
154 |       alignItems:"center",
155 |       flexDirection:"row",
156 |   },
157 |   title:{
158 |       fontSize:18,
159 |       marginLeft:20
160 |   },
161 |   header:{
162 |     width:"100%",
163 |     height:60,
164 |     flexDirection:"row",
165 |     justifyContent:"space-between",
166 |     alignItems:"center",
167 |     paddingHorizontal:20
168 |   },
169 |   profileImg:{
170 |     width:80,
171 |     height:80,
172 |     borderRadius:40,
173 |     marginTop:20
174 |   },
175 |   sidebarDivider:{
176 |     height:1,
177 |     width:"100%",
178 |     backgroundColor:"lightgray",
179 |     marginVertical:10
180 |   }
181 | });
182 | 


--------------------------------------------------------------------------------
/Home.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { StyleSheet, Text, View, Image } from 'react-native';
 3 | 
 4 | export default class App extends React.Component {
 5 |   render(){
 6 | 
 7 |     return (
 8 |       <View style={styles.container}>
 9 |         <Image source ={require("./assets/banner.png")} style={{width:"80%", height:"30%"}} resizeMode="contain"/>
10 |         <Text style={{fontWeight:"bold", fontSize:18}}>Welcome Home</Text>
11 |       </View>
12 |     );
13 |   }
14 | 
15 | }
16 | 
17 | const styles = StyleSheet.create({
18 |   container: {
19 |     flex: 1,
20 |     backgroundColor: '#fff',
21 |     alignItems: 'center',
22 |     justifyContent: 'center',
23 |   },
24 | });
25 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # React Native Drawer Tutorial
 3 | 
 4 |   
 5 | 
 6 | ![React Native Drawer Tutorial Featured Image](https://rn-master.com/wp-content/uploads/2019/11/React-Native-Drawer-Tutorial.png)
 7 |   
 8 | 
 9 | My name is Youssef el habchi, from [React Native Master](https://rn-master.com) I welcome each and everyone of you.
10 | 
11 | 
12 | Hello everyone, and welcome into my new article React Native Drawer Tutorial.  
13 | In this article we are going to explore a a piece of the React Native Navigation ecosystem, The Drawer Navigation.  
14 | The Drawer Navigation is one of the fundamental ways of navigation between screens in Mobile Apps.  
15 | And it is native to bot platforms Ios and Android, and recently, You can see plenty of web apps adopt this approach too.
16 | 
17 | 
18 | Feel free to read the whole article on my blog [React Native Drawer Tutorial](https://rn-master.com/react-native-drawer-tutorial)
19 | If you would like to try the app on Expo, I have prepared an expo project, check it from  [Expo.io](https://expo.io/@alhydra/react-native-drawer-tutorial)
20 | 
21 | 
22 | 


--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "expo": {
 3 |     "name": "React Native Drawer Tutorial",
 4 |     "slug": "react-native-drawer-tutorial",
 5 |     "privacy": "public",
 6 |     "sdkVersion": "35.0.0",
 7 |     "description":"Hello everyone, and welcome into my new article React Native Drawer Tutorial.In this article we are going to explore a a piece of the React Native Navigation ecosystem, The Drawer Navigation. Check the full article here https://reactnativemaster.com/react-native-drawer-tutorial/",
 8 |     "platforms": [
 9 |       "ios",
10 |       "android",
11 |       "web"
12 |     ],
13 |     "version": "1.0.0",
14 |     "orientation": "portrait",
15 |     "icon": "./assets/icon.png",
16 |     "splash": {
17 |       "image": "./assets/splash.png",
18 |       "resizeMode": "contain",
19 |       "backgroundColor": "#ffffff"
20 |     },
21 |     "updates": {
22 |       "fallbackToCacheTimeout": 0
23 |     },
24 |     "assetBundlePatterns": [
25 |       "**/*"
26 |     ],
27 |     "ios": {
28 |       "supportsTablet": true
29 |     }
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/assets/banner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Alhydra/React-Native-Drawer-Tutorial/95ac806509b84fc48be8a32d77197f495683a51e/assets/banner.png


--------------------------------------------------------------------------------
/assets/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Alhydra/React-Native-Drawer-Tutorial/95ac806509b84fc48be8a32d77197f495683a51e/assets/icon.png


--------------------------------------------------------------------------------
/assets/profile.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Alhydra/React-Native-Drawer-Tutorial/95ac806509b84fc48be8a32d77197f495683a51e/assets/profile.jpg


--------------------------------------------------------------------------------
/assets/splash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Alhydra/React-Native-Drawer-Tutorial/95ac806509b84fc48be8a32d77197f495683a51e/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/vector-icons": "^10.0.6",
12 |     "expo": "^35.0.0",
13 |     "react": "16.8.3",
14 |     "react-dom": "16.8.3",
15 |     "react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
16 |     "react-native-gesture-handler": "^1.3.0",
17 |     "react-native-reanimated": "^1.2.0",
18 |     "react-native-web": "^0.11.7",
19 |     "react-navigation": "^4.0.10",
20 |     "react-navigation-drawer": "^2.3.3",
21 |     "react-navigation-stack": "^1.10.3"
22 |   },
23 |   "devDependencies": {
24 |     "babel-preset-expo": "^7.1.0"
25 |   },
26 |   "private": true
27 | }
28 | 


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