Merge branch '138-indicate-active-menu-item' into 'master'

Resolve "indicate active menu item"

Closes #138

See merge request bloodyhealth/drip!108

components/app.js

@@ -56,7 +56,8 @@ export default class App extends Component {
     if (this.state.currentPage === 'Home') return false
     if (isSymptomView(this.state.currentPage)) {
       this.navigate(
-        this.originForSymptomView, { cycleDay: this.state.currentProps.cycleDay }
+        this.originForSymptomView,
+        { cycleDay: this.state.currentProps.cycleDay }
       )
     } else if(this.state.currentPage === 'CycleDay') {
       this.navigate(this.menuOrigin)
@@ -93,6 +94,7 @@ export default class App extends Component {
           <Menu
             navigate={this.navigate}
             titles={menuTitlesLowerCase}
+            currentPage={this.state.currentPage}
           />
         }
       </View>

components/menu.js

@@ -4,19 +4,21 @@ import {
   Text,
   TouchableOpacity
 } from 'react-native'
-import styles, { iconStyles } from '../styles'
+import styles, { iconStyles, secondaryColor } from '../styles'
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
 
 export default class Menu extends Component {
   makeMenuItem = ({ title, icon, onPress}, i) => {
+    const styleActive = (this.props.currentPage.toLowerCase() === title) ?
+      {color: secondaryColor} : {}
     return (
       <TouchableOpacity
         onPress={onPress}
         style={styles.menuItem}
         key={i.toString()}
       >
-        <Icon name={icon} {...iconStyles.menuIcon} />
-        <Text style={styles.menuText}>
+        <Icon name={icon} {...iconStyles.menuIcon} {...styleActive} />
+        <Text style={[styles.menuText, styleActive]}>
           {title}
         </Text>
       </TouchableOpacity>