Screens/profile screen

package.json

@@ -36,6 +36,7 @@
   },
   "dependencies": {
     "expo": "^29.0.0",
+    "galio-framework": "^1.0.3",
     "react": "16.3.1",
     "react-native": "https://github.com/expo/react-native/archive/sdk-29.0.0.tar.gz",
     "react-native-vector-icons": "^6.0.2"
@@ -49,7 +50,6 @@
     "eslint-plugin-import": "^2.14.0",
     "eslint-plugin-jsx-a11y": "^6.1.1",
     "eslint-plugin-react": "^7.11.1",
-    "galio-framework": "^1.0.1",
     "prettier": "^1.14.2",
     "prop-types": "^15.6.2",
     "react-devtools": "^3.3.2",

routes.js

@@ -1,12 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-  Image, StyleSheet, ScrollView, SafeAreaView, Platform,
+  Image,
+  StyleSheet,
+  ScrollView,
+  SafeAreaView,
+  Platform,
+  TouchableWithoutFeedback,
 } from 'react-native';
-import {
-  createDrawerNavigator,
-  DrawerItems,
-} from 'react-navigation';
+import { createDrawerNavigator, DrawerItems } from 'react-navigation';
 
 // screens
 import Article from './src/screens/Article';
@@ -20,19 +22,25 @@ import Presentation from './src/screens/Presentation';
 import Dashboard from './src/screens/Dashboard';
 import Register from './src/screens/Register';
 import Grid from './src/screens/Grid';
+import Profile from './src/screens/Profile';
 
 import theme from './src/theme';
 import { Block, Icon, Text } from './src';
 
 const GalioDrawer = props => (
   <SafeAreaView style={styles.drawer} forceInset={{ top: 'always', horizontal: 'never' }}>
     <Block space="between" row style={styles.header}>
-      <Block flex={0.3}><Image source={{ uri: 'http://i.pravatar.cc/100' }} style={styles.avatar} /></Block>
+      <Block flex={0.3}>
+        <Image source={{ uri: 'http://i.pravatar.cc/100' }} style={styles.avatar} />
+      </Block>
       <Block flex style={styles.middle}>
         <Text size={theme.SIZES.FONT * 0.875}>Galio Framework</Text>
-        <Text muted size={theme.SIZES.FONT * 0.875}>React Native</Text>
+        <Text muted size={theme.SIZES.FONT * 0.875}>
+          React Native
+        </Text>
       </Block>
     </Block>
+
     <ScrollView>
       <DrawerItems {...props} />
     </ScrollView>
@@ -101,14 +109,18 @@ const screens = {
     screen: Article,
     navigationOptions: {
       drawerLabel: 'Article Screen',
-      drawerIcon: props => <MenuIcon name="tablet-reader-31" family="Galio" focused={props.focused} />,
+      drawerIcon: props => (
+        <MenuIcon name="tablet-reader-31" family="Galio" focused={props.focused} />
+      ),
     },
   },
   ArticleCover: {
     screen: ArticleCover,
     navigationOptions: {
       drawerLabel: 'Article Cover',
-      drawerIcon: props => <MenuIcon name="single-paragraph" family="Galio" focused={props.focused} />,
+      drawerIcon: props => (
+        <MenuIcon name="single-paragraph" family="Galio" focused={props.focused} />
+      ),
     },
   },
   Dashboard: {
@@ -160,6 +172,13 @@ const screens = {
       drawerIcon: props => <MenuIcon name="grid-48" family="Galio" focused={props.focused} />,
     },
   },
+  Profile: {
+    screen: Profile,
+    navigationOptions: {
+      drawerLabel: 'Profile',
+      drawerIcon: props => <MenuIcon name="users-wm" family="Galio" focused={props.focused} />,
+    },
+  },
 };
 
 const options = {

src/screens/Profile.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import {
+  Alert, Dimensions, StyleSheet, Platform, Text,
+} from 'react-native';
+import { LinearGradient } from 'expo';
+
+// galio component
+import { Block, Button, NavBar } from 'galio-framework';
+import theme from '../theme';
+
+const { height, width } = Dimensions.get('window');
+
+class Profile extends React.Component {
+  handleChange = (name, value) => {
+    this.setState({ [name]: value });
+  };
+
+  render() {
+    const { navigation } = this.props;
+    return (
+      <Block flex>
+        <Block flex={2}>
+          <LinearGradient
+            colors={['#F6FFF7', '#DBE8DC']}
+            style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}
+          >
+            <Text>HI THERE</Text>
+          </LinearGradient>
+        </Block>
+
+        <Block flex={3} style={{ backgroundColor: 'red' }}>
+          <Text>hi</Text>
+        </Block>
+      </Block>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'space-around',
+    paddingTop: theme.SIZES.BASE * 0.3,
+    paddingHorizontal: theme.SIZES.BASE,
+    backgroundColor: theme.COLORS.WHITE,
+  },
+  social: {
+    width: theme.SIZES.BASE * 3.5,
+    height: theme.SIZES.BASE * 3.5,
+    borderRadius: theme.SIZES.BASE * 1.75,
+    justifyContent: 'center',
+  },
+});
+
+export default Profile;