final commit of full code

Author: hayscoding

.gitignore

@@ -0,0 +1,7 @@
+node_modules/**/*
+.expo/*
+npm-debug.*
+*.jks
+*.p12
+*.key
+*.mobileprovision

.watchmanconfig

@@ -0,0 +1 @@
+{}

App.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import DrawerNavigator from './navigation/DrawerNavigator'
+
+export default class App extends React.Component {
+  render() {
+    return (
+      <View style={styles.container}>
+        <DrawerNavigator />
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+  },
+});

app.json

@@ -0,0 +1,29 @@
+{
+  "expo": {
+    "name": "react-navigation-menu-bar",
+    "slug": "react-navigation-menu-bar",
+    "privacy": "public",
+    "sdkVersion": "31.0.0",
+    "platforms": [
+      "ios",
+      "android"
+    ],
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    }
+  }
+}

assets/hays-profile.jpg

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

assets/icon.png

@@ -0,0 +1,26 @@
+import React from 'react'
+import { StyleSheet } from 'react-native'
+import { Ionicons } from '@expo/vector-icons'
+
+export default class MenuButton extends React.Component {
+	render() {
+		return(
+			<Ionicons
+				name="md-menu"
+				color="#000000"
+				size={32}
+				style={styles.menuIcon}
+				onPress={() => this.props.navigation.toggleDrawer()}
+			/>
+		)
+	}
+}
+
+const styles = StyleSheet.create({
+	menuIcon: {
+		zIndex: 9,
+		position: 'absolute',
+		top: 40,
+		left: 20,
+	}
+})

assets/splash.png

@@ -0,0 +1,128 @@
+import React from 'react';
+import {
+	View, 
+	Text,
+	Image,
+	ScrollView,
+	Platform,
+	Dimensions,
+	StyleSheet,
+	TouchableOpacity,
+} from 'react-native';
+
+const WIDTH = Dimensions.get('window').width 
+const HEIGHT = Dimensions.get('window').height 
+
+export default class MenuDrawer extends React.Component {
+	navLink(nav, text) {
+		return(
+			<TouchableOpacity style={{height: 50}} onPress={() => this.props.navigation.navigate(nav)}>
+				<Text style={styles.link}>{text}</Text>
+			</TouchableOpacity>
+		)
+	}
+
+	render() {
+		return(
+			<View style={styles.container}>
+				<ScrollView style={styles.scroller}>
+					<View style={styles.topLinks}>
+						<View style={styles.profile}>
+							<View style={styles.imgView}>
+								<Image style={styles.img} source={require('../assets/hays-profile.jpg')} />
+							</View>
+							<View style={styles.profileText}>
+								<Text style={styles.name}>Hays Stanford</Text>
+							</View>
+						</View>
+					</View>
+					<View style={styles.bottomLinks}>
+						{this.navLink('Home', 'Home')}
+						{this.navLink('Links', 'Links')}
+						{this.navLink('Settings', 'Settings')}
+					</View>
+				</ScrollView>
+				<View style={styles.footer}>
+					<Text style={styles.description}>Menu Tutorial</Text>
+					<Text style={styles.version}>v1.0</Text>
+				</View>
+			</View>
+		)
+	}
+}
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		backgroundColor: 'lightgray',
+	},
+	scroller: {
+		flex: 1,
+	},
+	profile: {
+		flex: 1,
+		flexDirection: 'row',
+		alignItems: 'center',
+		paddingTop: 25,
+		borderBottomWidth: 1,
+		borderBottomColor: '#777777',
+	},
+	profileText: {
+		flex: 3,
+		flexDirection: 'column',
+		justifyContent: 'center',
+	},
+	name: {
+		fontSize: 20,
+		paddingBottom: 5,
+		color: 'white',
+		textAlign: 'left',
+	},
+	imgView: {
+		flex: 1,
+		paddingLeft: 20,
+		paddingRight: 20,
+	},
+	img: {
+		height: 70,
+		width: 70,
+		borderRadius: 50,
+	},
+	topLinks:{
+		height: 160,
+		backgroundColor: 'black',
+	},
+	bottomLinks: {
+		flex: 1,
+		backgroundColor: 'white',
+		paddingTop: 10,
+		paddingBottom: 450,
+	},
+	link: {
+		flex: 1,
+		fontSize: 20,
+		padding: 6,
+		paddingLeft: 14,
+		margin: 5,
+		textAlign: 'left',
+	},
+	footer: {
+		height: 50,
+		flexDirection: 'row',
+		alignItems: 'center',
+		backgroundColor: 'white',
+		borderTopWidth: 1,
+		borderTopColor: 'lightgray'
+	},
+	version: {
+		flex: 1, 
+		textAlign: 'right',
+		marginRight: 20,
+		color: 'gray'
+	},
+	description: {
+		flex: 1, 
+		marginLeft: 20,
+		fontSize: 16,
+	}
+})

babel.config.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Platform, Dimensions } from 'react-native';
+import { createDrawerNavigator, createAppContainer } from 'react-navigation';
+
+import HomeScreen from '../screens/HomeScreen';
+import LinksScreen from '../screens/LinksScreen';
+import SettingsScreen from '../screens/SettingsScreen';
+
+import MenuDrawer from '../components/MenuDrawer';
+
+const WIDTH = Dimensions.get('window').width;
+
+const DrawerConfig = {
+	drawerWidth: WIDTH*0.83,
+	contentComponent: ({ navigation }) => {
+		return(<MenuDrawer navigation={navigation} />)
+	}
+}
+
+const DrawerNavigator =  createDrawerNavigator(
+	{
+		Home: {
+			screen: HomeScreen
+		},
+		Links: {
+			screen: LinksScreen
+		},
+		Settings: {
+			screen: SettingsScreen
+		}
+	},
+	DrawerConfig
+);
+
+export default createAppContainer(DrawerNavigator);