From fc103856a9974999b0d06e7ee5184670dcc5f8e3 Mon Sep 17 00:00:00 2001 From: Okechi Onyeje Date: Thu, 17 Jan 2019 18:24:45 -0500 Subject: [PATCH] UPS8: Add skeleton code for footer + menu modal --- src/components/common/Footer.js | 15 ++-- src/config/router.js | 3 + src/screens/misc/DrawerContent.js | 101 +++++++++++++++++++++++ src/screens/misc/MainOptionsMenu.js | 22 +++++ src/screens/profile/ProfileHomeScreen.js | 4 +- 5 files changed, 137 insertions(+), 8 deletions(-) create mode 100644 src/screens/misc/DrawerContent.js create mode 100644 src/screens/misc/MainOptionsMenu.js diff --git a/src/components/common/Footer.js b/src/components/common/Footer.js index f195c79..331298d 100644 --- a/src/components/common/Footer.js +++ b/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); } /** diff --git a/src/config/router.js b/src/config/router.js index d8ca4c8..2381cd9 100644 --- a/src/config/router.js +++ b/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' diff --git a/src/screens/misc/DrawerContent.js b/src/screens/misc/DrawerContent.js new file mode 100644 index 0000000..85b7c2c --- /dev/null +++ b/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 ( + + + + + + + + {strings('settings.drawer.account_title')} + + {strings('profile.list_title')} + + + + {strings('settings.title')} + + + {strings('settings.drawer.tagfer_title')} + + {strings('settings.about.title')} + + + + {strings('settings.contactUs.title')} + + + + {strings('settings.privacyPolicies.title')} + + + + + + + + + {strings('logout.title')} + + + + + ); + } +} + +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; diff --git a/src/screens/misc/MainOptionsMenu.js b/src/screens/misc/MainOptionsMenu.js new file mode 100644 index 0000000..8490142 --- /dev/null +++ b/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; diff --git a/src/screens/profile/ProfileHomeScreen.js b/src/screens/profile/ProfileHomeScreen.js index 7fe6871..edc2e6a 100644 --- a/src/screens/profile/ProfileHomeScreen.js +++ b/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} /> ),