Fix menu bug

components/menu.js

@@ -1,12 +1,26 @@
 import React, { Component } from 'react'
 import {
   View,
-  Text
+  Text,
+  TouchableOpacity
 } from 'react-native'
 import styles, { iconStyles } from '../styles'
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
 
 export default class Menu extends Component {
+  makeMenuItem({ title, icon, componentName }) {
+    return (
+      <TouchableOpacity
+        onPress={() => this.props.navigate(componentName)}
+        style={{ alignItems: 'center' }}
+      >
+        <Icon name={icon} {...iconStyles.menuIcon} />
+        <Text style={styles.menuText}>
+          {title}
+        </Text>
+      </TouchableOpacity>
+    )
+  }
   render() {
     return (
       this.props.symptomView ?
@@ -19,22 +33,8 @@ export default class Menu extends Component {
             {title: 'Chart', icon: 'chart-line', componentName: 'Chart'},
             {title: 'Stats', icon: 'chart-pie', componentName: 'Stats'},
             {title: 'Settings', icon: 'settings', componentName: 'Settings'},
-          ].map(makeMenuItem)}
+          ].map(this.makeMenuItem.bind(this))}
         </View >
     )
   }
 }
-
-function makeMenuItem({title, icon, componentName}) {
-  return (
-    <View style={{alignItems: 'center'}}>
-      <Icon name={icon} {...iconStyles.menuIcon}/>
-      <Text
-        style={styles.menuText}
-        onPress={() => this.props.navigate(componentName)}
-      >
-        {title}
-      </Text>
-    </View>
-  )
-}