Extract navigation arrow and give it more padding

components/header/cycle-day.js

@@ -3,8 +3,8 @@ import {
   View,
   Text} from 'react-native'
 import moment from 'moment'
-import styles, { iconStyles } from '../../styles'
+import styles from '../../styles'
-import Icon from 'react-native-vector-icons/Entypo'
+import NavigationArrow from './navigation-arrow'
 
 export default function CycleDayHeader(props) {
   return (<View style={[styles.header, styles.headerCycleDay]}>
@@ -12,7 +12,7 @@ export default function CycleDayHeader(props) {
       style={styles.accentCircle}
       left={props.middle - styles.accentCircle.width / 2}
     />
-    <Icon name='chevron-thin-left' {...iconStyles.navigationArrow} onPress={() => props.goToCycleDay('before')} />
+    <NavigationArrow direction='left' {...props}/>
     <View>
       <Text style={styles.dateHeader}>
         {moment(props.date).format('MMMM Do YYYY')}
@@ -22,7 +22,7 @@ export default function CycleDayHeader(props) {
           Cycle day {props.cycleDayNumber}
         </Text>}
     </View>
-    <Icon name='chevron-thin-right' {...iconStyles.navigationArrow} onPress={() => props.goToCycleDay('after')} />
+    <NavigationArrow direction='right' {...props}/>
   </View>
   )
 }

components/header/index.js

@@ -8,19 +8,14 @@ import styles from '../../styles'
 import CycleDayHeader from './cycle-day'
 import SymptomViewHeader from './symptom-view'
 
-export default function Header(props) {
+export default function Header(p) {
   const middle = Dimensions.get('window').width / 2
+  const props = Object.assign({}, p, {middle})
   return (
     props.isCycleDayOverView ?
-      <CycleDayHeader
+      <CycleDayHeader {...props} />
-        middle={middle}
-        {...props}
-      />
       : props.isSymptomView ?
-        <SymptomViewHeader
+        <SymptomViewHeader {...props}/>
-          middle={middle}
-          {...props}
-        />
         :
         <View style={styles.header}>
           <View style={styles.accentCircle} />

components/header/navigation-arrow.js

@@ -0,0 +1,31 @@
+import React from 'react'
+import { TouchableOpacity } from 'react-native'
+import styles, { iconStyles } from '../../styles'
+import Icon from 'react-native-vector-icons/Entypo'
+
+export default function NavigationArrow(props) {
+  const iconName = {
+    left: 'chevron-thin-left',
+    right: 'chevron-thin-right'
+  }[props.direction]
+  let pressHandler
+  if (props.goBack) {
+    pressHandler = () => props.goBack()
+  } else {
+    pressHandler = () => {
+      const target = props.direction === 'left' ? 'before' : 'after'
+      props.goToCycleDay(target)
+    }
+  }
+  return (
+    <TouchableOpacity
+      style={styles.navigationArrow}
+      onPress={pressHandler}
+    >
+      <Icon
+        name={iconName}
+        {...iconStyles.navigationArrow}
+      />
+    </TouchableOpacity>
+  )
+}

components/header/symptom-view.js

@@ -3,21 +3,19 @@ import {
   View,
   Text} from 'react-native'
 import styles, { iconStyles } from '../../styles'
-import Icon from 'react-native-vector-icons/Entypo'
 import FeatherIcon from 'react-native-vector-icons/Feather'
+import NavigationArrow from './navigation-arrow'
 
 export default function SymptomViewHeader(props) {
   return (
-    <View style={[styles.header, styles.headerSymptom]}>
+    <View style={[styles.header, styles.headerCycleDay, styles.headerSymptom]}>
       <View
         style={styles.accentCircle}
         left={props.middle - styles.accentCircle.width / 2}
       />
-      <Icon
+      <NavigationArrow
-        name='chevron-thin-left'
+        direction='left'
-        {...iconStyles.navigationArrow}
+        {...props}
-        onPress={() => props.goBack()}
-
       />
       <View>
         <Text style={styles.dateHeader}>

styles/index.js

@@ -191,11 +191,20 @@ export default StyleSheet.create({
   },
   header: {
     backgroundColor: primaryColor,
-    paddingHorizontal: 15,
     alignItems: 'center',
     justifyContent: 'center',
     height: 80
   },
+  headerCycleDay: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  headerSymptom: {
+    paddingRight: 20
+  },
+  navigationArrow: {
+    padding: 20
+  },
   menu: {
     backgroundColor: primaryColor,
     alignItems: 'center',
@@ -215,18 +224,6 @@ export default StyleSheet.create({
   menuTextInActive: {
     color: colorInActive
   },
-  headerCycleDay: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-  },
-  headerSymptom: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-  },
-  navigationArrow: {
-    fontSize: 60,
-    color: fontOnPrimaryColor
-  },
   temperatureTextInput: {
     fontSize: 20,
     color: 'black',