UPS8: Add skeleton code for footer + menu modal

src/components/common/Footer.js

@@ -4,6 +4,7 @@ import React, { Component } from 'react';
 import { Dimensions, Image, Text, View } from 'react-native';
 import { Icon } from 'react-native-elements';
 import ModalDropdown from 'react-native-modal-dropdown';
+import { NavigationActions } from 'react-navigation';
 import colors from '../../config/colors.json';
 
 const GREEN_CHECK_IMAGE = require('../../../assets/GreenCheck.png');
@@ -81,14 +82,14 @@ export default class Footer extends Component {
   * Navigates to the profile home screen for the given profile
   **/
   processProfileSelection(idx) {
-    // const resetAction = NavigationActions.reset({
-    //   index: 0,
-    //   actions: [
-    //     NavigationActions.navigate({ routeName: 'mainOptionsMenu', params: { profileIndex: idx, profileName: this.props.profiles[idx].profileName } })
-    //   ]
-    // });
+    const resetAction = NavigationActions.reset({
+      index: 0,
+      actions: [
+        NavigationActions.navigate({ routeName: 'mainOptionsMenu', params: { profileIndex: idx, profileName: this.props.profiles[idx].profileName } })
+      ]
+    });
 
-    // this.props.navigation.dispatch(resetAction);
+    this.props.navigation.dispatch(resetAction);
   }
 
   /**

src/config/router.js

@@ -16,6 +16,8 @@ import ForgotPasswordScreen from '../screens/auth/ForgotPasswordScreen';
 import ProfileQRCodeScanner from '../screens/profile/ProfileQRCodeScanner';
 import ProfileSearchScreen from '../screens/profile/ProfileSearchScreen';
 import ProfileHomeScreen from '../screens/profile/ProfileHomeScreen';
+import MainOptionsMenu from '../screens/misc/MainOptionsMenu';
+
 
 const MainNavigator = createStackNavigator({
   profileHome: ProfileHomeScreen,
@@ -41,6 +43,7 @@ const RootNavigator = createStackNavigator(
   },
   twitterWebView: TwitterWebView,
   linkedInWebView: LinkedInWebView
+  mainOptions: MainOptionsMenu
 },
 { 
   mode: 'modal' 

src/screens/misc/DrawerContent.js

@@ -0,0 +1,101 @@
+/** Used for the styling of everything in the drawer menu **/
+import React, { Component } from 'react';
+import { NavigationActions } from 'react-navigation';
+import { Image, SafeAreaView, Text, TouchableOpacity, View } from 'react-native';
+import { Divider } from 'react-native-elements';
+import { strings } from '../../locales/i18n';
+
+const LOGO = require('../../../assets/logo-horizontal.png');
+
+class DrawerContent extends Component {
+  navigateToScreen = (route) => () => {
+    const navigate = NavigationActions.navigate({
+      routeName: route
+    });
+    this.props.navigation.dispatch(navigate);
+  }
+
+  /**
+  * Render method
+  **/
+  render() {
+    return (
+      <SafeAreaView style={{ flex: 1 }}>
+        <View style={styles.mainContainerStyle}>
+          <View>
+            <View style={{ backgroundColor: '' }}>
+              <Image
+                source={LOGO}
+                style={styles.logoStyle}
+              />
+            </View>
+
+            <Text style={styles.headerStyle}>{strings('settings.drawer.account_title')}</Text>
+            <TouchableOpacity onPress={this.navigateToScreen('profileHomeSceen')}>
+              <Text style={styles.textLinkStyle}>{strings('profile.list_title')}</Text>
+            </TouchableOpacity>
+
+            <TouchableOpacity onPress={this.navigateToScreen('settingsMain')}>
+              <Text style={styles.textLinkStyle}>{strings('settings.title')}</Text>
+            </TouchableOpacity>
+
+            <Text style={styles.headerStyle}>{strings('settings.drawer.tagfer_title')}</Text>
+            <TouchableOpacity onPress={this.navigateToScreen('aboutScreen')}>
+              <Text style={styles.textLinkStyle}>{strings('settings.about.title')}</Text>
+            </TouchableOpacity>
+
+            <TouchableOpacity onPress={this.navigateToScreen('contactUsScreen')}>
+              <Text style={styles.textLinkStyle}>{strings('settings.contactUs.title')}</Text>
+            </TouchableOpacity>
+
+            <TouchableOpacity onPress={this.navigateToScreen('privacyPoliciesScreen')}>
+              <Text style={styles.textLinkStyle}>{strings('settings.privacyPolicies.title')}</Text>
+            </TouchableOpacity>
+
+            <Divider style={styles.dividerStyle} />
+          </View>
+
+          <View>
+            <Divider style={styles.dividerStyle} />
+            <TouchableOpacity onPress={this.navigateToScreen('userLogout')}>
+              <Text style={[styles.textLinkStyle, { color: '' }]}>{strings('logout.title')}</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </SafeAreaView>
+    );
+  }
+}
+
+const styles = {
+  mainContainerStyle: {
+    flex: 1,
+    justifyContent: 'space-between'
+  },
+  logoStyle: {
+    height: 35,
+    width: 125,
+    marginVertical: 10,
+    marginHorizontal: 20
+  },
+  headerStyle: {
+    fontSize: 19,
+    fontWeight: 'bold',
+    color: '',
+    marginLeft: 15,
+    paddingTop: 10,
+    paddingBottom: 10
+  },
+  textLinkStyle: {
+    fontSize: 17,
+    marginLeft: 15,
+    paddingBottom: 12
+  },
+  dividerStyle: {
+    backgroundColor: '',
+    marginTop: 10,
+    marginBottom: 15
+  }
+};
+
+export default DrawerContent;

src/screens/misc/MainOptionsMenu.js

@@ -0,0 +1,22 @@
+/** Contains all of the screens that will be in the drawer menu **/
+import { createDrawerNavigator } from 'react-navigation';
+import ProfileHomeScreen from '../profile/ProfileHomeScreen';
+import DrawerContent from './DrawerContent';
+import { strings } from '../../locales/i18n';
+
+const MainOptionsMenu = createDrawerNavigator({
+  profileHomeSceen: {
+    screen: ProfileHomeScreen
+  },
+}, {
+  lazy: true,
+  navigationOptions: {
+    title: strings('contact.mainScreen_title')
+  },
+  contentComponent: DrawerContent,
+  drawerOpenRoute: 'DrawerOpen',
+  drawerCloseRoute: 'DrawerClose',
+  drawerToggleRoute: 'DrawerToggle'
+});
+
+export default MainOptionsMenu;

src/screens/profile/ProfileHomeScreen.js

@@ -22,7 +22,9 @@ export default class ProfileHomeScreen extends Component {
             color: styles.colors.middleGrey,
             size: 30
           }}
-          onPress={() => navigation.navigate('DrawerOpen')}
+          onPress={() => { 
+            navigation.navigate('DrawerOpen');
+          }}
           backgroundColor={styles.colors.transparent}
         />
       ),