Increase hitSlop of menu icon and navigation arrows

components/cycle-day/symptom-page-title.js

@@ -12,16 +12,17 @@ import {
   nextDate,
   prevDate,
   isTomorrowInFuture,
-  isYesterdayInFuture
+  isYesterdayInFuture,
 } from '../helpers/cycle-day'
 import { Colors, Containers, Spacing, Typography } from '../../styles'
+import { HIT_SLOP } from '../../config'
 
 const SymptomPageTitle = ({
   date,
   reloadSymptomData,
   setDate,
   subtitle,
-  title
+  title,
 }) => {
   const rightArrowColor = isTomorrowInFuture(date) ? Colors.grey : Colors.orange
   const leftArrowColor = isYesterdayInFuture(date) ? Colors.grey : Colors.orange
@@ -33,15 +34,15 @@ const SymptomPageTitle = ({
 
   return (
     <View style={styles.container}>
-      <TouchableOpacity onPress={() => navigate(false)}>
-        <AppIcon name='chevron-left' color={leftArrowColor}/>
+      <TouchableOpacity onPress={() => navigate(false)} hitSlop={HIT_SLOP}>
+        <AppIcon name='chevron-left' color={leftArrowColor} />
       </TouchableOpacity>
       <View style={styles.textContainer}>
         <AppText style={styles.title}>{title}</AppText>
         {subtitle && <AppText style={styles.subtitle}>{subtitle}</AppText>}
       </View>
-      <TouchableOpacity onPress={() => navigate(true)}>
-        <AppIcon name='chevron-right' color={rightArrowColor}/>
+      <TouchableOpacity onPress={() => navigate(true)} hitSlop={HIT_SLOP}>
+        <AppIcon name='chevron-right' color={rightArrowColor} />
       </TouchableOpacity>
     </View>
   )
@@ -52,37 +53,34 @@ SymptomPageTitle.propTypes = {
   reloadSymptomData: PropTypes.func.isRequired,
   setDate: PropTypes.func.isRequired,
   subtitle: PropTypes.string,
-  title: PropTypes.string
+  title: PropTypes.string,
 }
 
 const styles = StyleSheet.create({
   container: {
-    height: (Spacing.base * 4),
+    height: Spacing.base * 4,
     marginHorizontal: Spacing.base,
     marginTop: Spacing.base,
-    ...Containers.rowContainer
+    ...Containers.rowContainer,
   },
   textContainer: {
-    alignItems: 'center'
+    alignItems: 'center',
   },
   title: {
-    ...Typography.titleWithoutMargin
-  }
+    ...Typography.titleWithoutMargin,
+  },
 })
 
 const mapStateToProps = (state) => {
-  return({
+  return {
     date: getDate(state),
-  })
+  }
 }
 
 const mapDispatchToProps = (dispatch) => {
-  return({
+  return {
     setDate: (date) => dispatch(setDate(date)),
-  })
+  }
 }
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps,
-)(SymptomPageTitle)
+export default connect(mapStateToProps, mapDispatchToProps)(SymptomPageTitle)

components/header/hamburger-menu.js

@@ -6,6 +6,7 @@ import MenuItem from './menu-item'
 
 import { Colors, Sizes } from '../../styles'
 import settingsLabels from '../../i18n/en/settings'
+import { HIT_SLOP } from '../../config'
 
 const { menuItems } = settingsLabels
 
@@ -16,7 +17,6 @@ const settingsMenuItems = [
 ]
 
 export default class HamburgerMenu extends Component {
-
   constructor(props) {
     super(props)
 
@@ -24,20 +24,20 @@ export default class HamburgerMenu extends Component {
   }
 
   toggleMenu = () => {
-    this.setState({ shouldShowMenu: !this.state.shouldShowMenu})
+    this.setState({ shouldShowMenu: !this.state.shouldShowMenu })
   }
 
   render() {
     const { shouldShowMenu } = this.state
 
-    return(
+    return (
       <React.Fragment>
-        {!shouldShowMenu &&
-          <TouchableOpacity onPress={this.toggleMenu}>
-            <AppIcon name='dots-three-vertical' color={Colors.orange}/>
+        {!shouldShowMenu && (
+          <TouchableOpacity onPress={this.toggleMenu} hitSlop={HIT_SLOP}>
+            <AppIcon name='dots-three-vertical' color={Colors.orange} />
           </TouchableOpacity>
-        }
-        {shouldShowMenu &&
+        )}
+        {shouldShowMenu && (
           <Modal
             animationType='fade'
             onRequestClose={this.toggleMenu}
@@ -47,29 +47,27 @@ export default class HamburgerMenu extends Component {
             <TouchableOpacity
               onPress={this.toggleMenu}
               style={styles.blackBackground}
-            >
-            </TouchableOpacity>
+            ></TouchableOpacity>
             <View style={styles.menu}>
               <TouchableOpacity
                 onPress={this.toggleMenu}
                 style={styles.iconContainer}
               >
-                <AppIcon name='cross' color='black'/>
+                <AppIcon name='cross' color='black' />
               </TouchableOpacity>
-              {settingsMenuItems.map(item =>
+              {settingsMenuItems.map((item) => (
                 <MenuItem
                   item={item}
                   key={item.name}
                   closeMenu={this.toggleMenu}
                 />
-              )}
+              ))}
             </View>
           </Modal>
-        }
+        )}
       </React.Fragment>
     )
   }
-
 }
 
 const styles = StyleSheet.create({
@@ -80,7 +78,7 @@ const styles = StyleSheet.create({
   },
   iconContainer: {
     alignSelf: 'flex-end',
-    marginBottom: Sizes.base
+    marginBottom: Sizes.base,
   },
   menu: {
     alignSelf: 'flex-end',
@@ -88,6 +86,6 @@ const styles = StyleSheet.create({
     height: '100%',
     padding: Sizes.base,
     position: 'absolute',
-    width: '60%'
-  }
+    width: '60%',
+  },
 })