Merge branch 'master' into 133-make-temp-scale-a-config-setting-and-read-it-in-chart-and-temp-screen

app.js

@@ -1,34 +0,0 @@
-import { createStackNavigator, createBottomTabNavigator } from 'react-navigation'
-import Home from './components/home'
-
-import Calendar from './components/calendar'
-import CycleDay from './components/cycle-day'
-import Chart from './components/chart/chart'
-import Settings from './components/settings'
-import Stats from './components/stats'
-
-import styles from './styles'
-
-// this is until react native fixes this bugg, see
-// https://github.com/facebook/react-native/issues/18868#issuecomment-382671739
-import { YellowBox } from 'react-native'
-YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated'])
-
-const routes = {
-  Home: createStackNavigator({Home, CycleDay}, {headerMode: 'none'}),
-  Calendar: createStackNavigator({Calendar, CycleDay}, {headerMode: 'none'}),
-  Chart: createStackNavigator({Chart, CycleDay}, {headerMode: 'none'}),
-  Settings: { screen: Settings },
-  Stats: { screen: Stats}
-}
-
-const config = {
-  labeled: true,
-  shifting: false,
-  tabBarOptions: {
-    style: {backgroundColor: '#ff7e5f'},
-    labelStyle: {fontSize: 15, color: 'white'}
-  },
-}
-
-export default createBottomTabNavigator(routes, config)

components/app.js

@@ -0,0 +1,64 @@
+import React, { Component } from 'react'
+import { View, BackHandler } from 'react-native'
+import Header from './header'
+import Menu from './menu'
+import Home from './home'
+import Calendar from './calendar'
+import CycleDay from './cycle-day/cycle-day-overview'
+import symptomViews from './cycle-day/symptoms'
+import Chart from './chart/chart'
+import Settings from './settings'
+import Stats from './stats'
+import {headerTitles as titles} from './labels'
+
+const isSymptomView = name => Object.keys(symptomViews).indexOf(name) > -1
+
+export default class App extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      currentPage: 'Home'
+    }
+
+    const handleBackButtonPress = function() {
+      if (this.state.currentPage === 'Home') return false
+      if (isSymptomView(this.state.currentPage)) {
+        this.navigate('CycleDay', {cycleDay: this.state.currentProps.cycleDay})
+      } else {
+        this.navigate('Home')
+      }
+      return true
+    }.bind(this)
+
+    this.backHandler = BackHandler.addEventListener('hardwareBackPress', handleBackButtonPress)
+  }
+
+  componentWillUnmount() {
+    this.backHandler.remove()
+  }
+
+  navigate(pageName, props) {
+    this.setState({currentPage: pageName, currentProps: props})
+  }
+
+  render() {
+    const page = {
+      Home, Calendar, CycleDay, Chart, Settings, Stats, ...symptomViews
+    }[this.state.currentPage]
+    return (
+      <View style={{flex: 1}}>
+
+        {this.state.currentPage != 'CycleDay' && <Header title={titles[this.state.currentPage]} />}
+
+        {React.createElement(page, {
+          navigate: this.navigate.bind(this),
+          ...this.state.currentProps
+        })}
+
+        {!isSymptomView(this.state.currentPage) &&
+          <Menu navigate={this.navigate.bind(this)} />
+        }
+      </View>
+    )
+  }
+}

components/calendar.js

@@ -1,7 +1,5 @@
 import React, { Component } from 'react'
-import { View } from 'react-native'
 import { CalendarList } from 'react-native-calendars'
-import * as styles from '../styles'
 import { getOrCreateCycleDay, bleedingDaysSortedByDate } from '../db'
 
 export default class CalendarView extends Component {
@@ -12,7 +10,8 @@ export default class CalendarView extends Component {
     }
 
     this.setStateWithCalFormattedDays = (function (CalendarComponent) {
-      return function() {
+      return function(_, changes) {
+        if (Object.values(changes).every(x => x && !x.length)) return
         CalendarComponent.setState({
           bleedingDaysInCalFormat: toCalFormat(bleedingDaysSortedByDate)
         })
@@ -28,19 +27,17 @@ export default class CalendarView extends Component {
 
   passDateToDayView(result) {
     const cycleDay = getOrCreateCycleDay(result.dateString)
-    const navigate = this.props.navigation.navigate
+    const navigate = this.props.navigate
     navigate('CycleDay', { cycleDay })
   }
 
   render() {
     return (
-      <View style={styles.container}>
-        <CalendarList
-          onDayPress={ this.passDateToDayView.bind(this) }
-          markedDates = { this.state.bleedingDaysInCalFormat }
-          markingType = {'period'}
-        />
-      </View>
+      <CalendarList
+        onDayPress={this.passDateToDayView.bind(this)}
+        markedDates={this.state.bleedingDaysInCalFormat}
+        markingType={'period'}
+      />
     )
   }
 }

components/chart/chart.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { View, FlatList } from 'react-native'
+import { View, FlatList, ScrollView } from 'react-native'
 import range from 'date-range'
 import { LocalDate } from 'js-joda'
 import { makeYAxisLabels, normalizeToScale, makeHorizontalGrid } from './y-axis'
@@ -20,7 +20,7 @@ export default class CycleChart extends Component {
         <DayColumn
           {...item}
           index={index}
-          navigate={this.props.navigation.navigate}
+          navigate={this.props.navigate}
         />
       )
     }
@@ -42,21 +42,23 @@ export default class CycleChart extends Component {
 
   render() {
     return (
-      <View style={{ flexDirection: 'row', marginTop: 50 }}>
-        <View {...styles.yAxis}>{makeYAxisLabels()}</View>
-        {makeHorizontalGrid()}
-        {<FlatList
-          horizontal={true}
-          inverted={true}
-          showsHorizontalScrollIndicator={false}
-          data={this.state.columns}
-          renderItem={this.renderColumn}
-          keyExtractor={item => item.dateString}
-          initialNumToRender={15}
-          maxToRenderPerBatch={5}
-        >
-        </FlatList>}
-      </View>
+      <ScrollView>
+        <View style={{ flexDirection: 'row', marginTop: 50 }}>
+          <View {...styles.yAxis}>{makeYAxisLabels()}</View>
+          {makeHorizontalGrid()}
+          {<FlatList
+            horizontal={true}
+            inverted={true}
+            showsHorizontalScrollIndicator={false}
+            data={this.state.columns}
+            renderItem={this.renderColumn}
+            keyExtractor={item => item.dateString}
+            initialNumToRender={15}
+            maxToRenderPerBatch={5}
+          >
+          </FlatList>}
+        </View>
+      </ScrollView>
     )
   }
 }

components/cycle-day/cycle-day-overview.js

@@ -1,10 +1,17 @@
 import React, { Component } from 'react'
 import {
+  ScrollView,
   View,
-  Button,
-  Text
+  Text,
+  TouchableOpacity,
+  Dimensions
 } from 'react-native'
-import styles from '../../styles'
+import { LocalDate } from 'js-joda'
+import Header from '../header'
+import { getOrCreateCycleDay } from '../../db'
+import cycleModule from '../../lib/cycle'
+import Icon from 'react-native-vector-icons/FontAwesome'
+import styles, { iconStyles } from '../../styles'
 import {
   bleeding as bleedingLabels,
   mucusFeeling as feelingLabels,
@@ -15,103 +22,83 @@ import {
   cervixPosition as positionLabels,
   intensity as intensityLabels
 } from './labels/labels'
-import cycleDayModule from '../../lib/cycle'
-import { bleedingDaysSortedByDate } from '../../db'
 
-const getCycleDayNumber = cycleDayModule().getCycleDayNumber
-
-export default class DayView extends Component {
+export default class CycleDayOverView extends Component {
   constructor(props) {
     super(props)
-    this.cycleDay = props.cycleDay
-    this.showView = props.showView
     this.state = {
-      cycleDayNumber: getCycleDayNumber(this.cycleDay.date),
+      cycleDay: props.cycleDay
     }
-
-    this.setStateWithCycleDayNumber = (function (DayViewComponent) {
-      return function () {
-        DayViewComponent.setState({
-          cycleDayNumber: getCycleDayNumber(DayViewComponent.cycleDay.date)
-        })
-      }
-    })(this)
-
-    bleedingDaysSortedByDate.addListener(this.setStateWithCycleDayNumber)
   }
 
-  componentWillUnmount() {
-    bleedingDaysSortedByDate.removeListener(this.setStateWithCycleDayNumber)
+  goToCycleDay(target) {
+    const localDate = LocalDate.parse(this.state.cycleDay.date)
+    const targetDate = target === 'before' ?
+      localDate.minusDays(1).toString() :
+      localDate.plusDays(1).toString()
+    this.setState({ cycleDay: getOrCreateCycleDay(targetDate) })
+  }
+
+  navigate(symptom) {
+    this.props.navigate(symptom, {
+      cycleDay: this.state.cycleDay,
+    })
   }
 
   render() {
-    const cycleDay = this.cycleDay
+    const cycleDay = this.state.cycleDay
+    const getCycleDayNumber = cycleModule().getCycleDayNumber
+    const cycleDayNumber = getCycleDayNumber(cycleDay.date)
     return (
-      <View style={styles.symptomEditView}>
-        <View style={styles.symptomViewRowInline}>
-          <Text style={styles.symptomDayView}>Bleeding</Text>
-          <View style={styles.symptomEditButton}>
-            <Button
-              onPress={() => this.showView('BleedingEditView')}
-              title={getLabel('bleeding', cycleDay.bleeding)}>
-            </Button>
-          </View>
-        </View>
-        <View style={styles.symptomViewRowInline}>
-          <Text style={styles.symptomDayView}>Temperature</Text>
-          <View style={styles.symptomEditButton}>
-            <Button
-              onPress={() => this.showView('TemperatureEditView')}
-              title={getLabel('temperature', cycleDay.temperature)}>
-            </Button>
-          </View>
-        </View>
-        <View style={ styles.symptomViewRowInline }>
-          <Text style={styles.symptomDayView}>Mucus</Text>
-          <View style={styles.symptomEditButton}>
-            <Button
-              onPress={() => this.showView('MucusEditView')}
-              title={getLabel('mucus', cycleDay.mucus)}>
-            </Button>
-          </View>
-        </View>
-        <View style={styles.symptomViewRowInline}>
-          <Text style={styles.symptomDayView}>Cervix</Text>
-          <View style={styles.symptomEditButton}>
-            <Button
-              onPress={() => this.showView('CervixEditView')}
-              title={getLabel('cervix', cycleDay.cervix)}>
-            </Button>
-          </View>
-        </View>
-        <View style={styles.symptomViewRowInline}>
-          <Text style={styles.symptomDayView}>Note</Text>
-          <View style={styles.symptomEditButton}>
-            <Button
-              onPress={() => this.showView('NoteEditView')}
-              title={getLabel('note', cycleDay.note)}
-            >
-            </Button>
-          </View>
-        </View>
-        <View style={ styles.symptomViewRowInline }>
-          <Text style={styles.symptomDayView}>Desire</Text>
-          <View style={styles.symptomEditButton}>
-            <Button
-              onPress={() => this.showView('DesireEditView')}
-              title={getLabel('desire', cycleDay.desire)}>
-            </Button>
-          </View>
-        </View>
-        <View style={styles.symptomViewRowInline}>
-          <Text style={styles.symptomDayView}>Sex</Text>
-          <View style={styles.symptomEditButton}>
-            <Button
-              onPress={() => this.showView('SexEditView')}
-              title={getLabel('sex', cycleDay.sex)}>
-            </Button>
-          </View>
-        </View>
+      <View style={{ flex: 1 }}>
+        <Header
+          isCycleDayOverView={true}
+          cycleDayNumber={cycleDayNumber}
+          date={cycleDay.date}
+          goToCycleDay={this.goToCycleDay.bind(this)}
+        />
+        <ScrollView>
+          <View style={styles.symptomBoxesView}>
+            <SymptomBox
+              title='Bleeding'
+              onPress={() => this.navigate('BleedingEditView')}
+              data={getLabel('bleeding', cycleDay.bleeding)}
+            />
+            <SymptomBox
+              title='Temperature'
+              onPress={() => this.navigate('TemperatureEditView')}
+              data={getLabel('temperature', cycleDay.temperature)}
+            />
+            <SymptomBox
+              title='Mucus'
+              onPress={() => this.navigate('MucusEditView')}
+              data={getLabel('mucus', cycleDay.mucus)}
+            />
+            <SymptomBox
+              title='Cervix'
+              onPress={() => this.navigate('CervixEditView')}
+              data={getLabel('cervix', cycleDay.cervix)}
+            />
+            <SymptomBox
+              title='Note'
+              onPress={() => this.navigate('NoteEditView')}
+              data={getLabel('note', cycleDay.note)}
+            />
+            <SymptomBox
+              title='Desire'
+              onPress={() => this.navigate('DesireEditView')}
+              data={getLabel('desire', cycleDay.desire)}
+            />
+            <SymptomBox
+              title='Sex'
+              onPress={() => this.navigate('SexEditView')}
+              data={getLabel('sex', cycleDay.sex)}
+            />
+            {/*  this is just to make the last row adhere to the grid
+        (and) because there are no pseudo properties in RN */}
+            <FillerBoxes />
+          </View >
+        </ScrollView >
       </View >
     )
   }
@@ -136,33 +123,28 @@ function getLabel(symptomName, symptom) {
       }
     },
     mucus: mucus => {
-      if (
-        typeof mucus.feeling === 'number' &&
-        typeof mucus.texture === 'number' &&
-        typeof mucus.value === 'number'
-      ) {
-        let mucusLabel =
-          `${feelingLabels[mucus.feeling]} +
-          ${textureLabels[mucus.texture]}
-          ( ${computeSensiplanMucusLabels[mucus.value]} )`
-        if (mucus.exclude) mucusLabel = "( " + mucusLabel + " )"
+      const categories = ['feeling', 'texture', 'value']
+      if (categories.every(c => typeof mucus[c] === 'number')) {
+        let mucusLabel = [feelingLabels[mucus.feeling], textureLabels[mucus.texture]].join(', ')
+        mucusLabel += `\n${computeSensiplanMucusLabels[mucus.value]}`
+        if (mucus.exclude) mucusLabel = `(${mucusLabel})`
         return mucusLabel
       }
     },
     cervix: cervix => {
+      let cervixLabel = []
       if (cervix.opening > -1 && cervix.firmness > -1) {
-        let cervixLabel =
-          `${openingLabels[cervix.opening]} +
-          ${firmnessLabels[cervix.firmness]}`
+        cervixLabel.push(openingLabels[cervix.opening], firmnessLabels[cervix.firmness])
         if (cervix.position > -1) {
-          cervixLabel += `+ ${positionLabels[cervix.position]}`
+          cervixLabel.push(positionLabels[cervix.position])
         }
-        if (cervix.exclude) cervixLabel = "( " + cervixLabel + " )"
+        cervixLabel = cervixLabel.join(', ')
+        if (cervix.exclude) cervixLabel = `(${cervixLabel})`
         return cervixLabel
       }
     },
     note: note => {
-      return note.value.slice(0, 12) + '...'
+      return note.value
     },
     desire: desire => {
       if (typeof desire.value === 'number') {
@@ -171,18 +153,64 @@ function getLabel(symptomName, symptom) {
       }
     },
     sex: sex => {
-      let sexLabel = ''
+      const sexLabel = []
       if ( sex.solo || sex.partner ) {
-        sexLabel += 'Activity '
+        sexLabel.push('activity')
       }
       if (sex.condom || sex.pill || sex.iud ||
         sex.patch || sex.ring || sex.implant || sex.other) {
-        sexLabel += 'Contraceptive'
+        sexLabel.push('contraceptive')
       }
-      return sexLabel ? sexLabel : 'edit'
+      return sexLabel.join(', ')
     }
   }
 
-  if (!symptom) return 'edit'
-  return labels[symptomName](symptom) || 'edit'
+  if (!symptom) return
+  const label = labels[symptomName](symptom)
+  if (label.length < 45) return label
+  return label.slice(0, 42) + '...'
 }
+
+class SymptomBox extends Component {
+  render() {
+    const d = this.props.data
+    const boxActive = d ? styles.symptomBoxActive : {}
+    const iconActive = d ? iconStyles.symptomBoxActive : {}
+    const textStyle = d ? styles.symptomTextActive : {}
+
+    const symptomBoxStyle = Object.assign({}, styles.symptomBox, boxActive)
+    const iconStyle = Object.assign({}, iconStyles.symptomBox, iconActive)
+
+    return (
+      <TouchableOpacity onPress={this.props.onPress}>
+        <View style={symptomBoxStyle}>
+          <Icon
+            name='thermometer'
+            {...iconStyle}
+          />
+          <Text style={textStyle}>{this.props.title}</Text>
+        </View>
+        <View style={styles.symptomDataBox}>
+          <Text style={styles.symptomDataText}>{this.props.data}</Text>
+        </View>
+      </TouchableOpacity>
+    )
+  }
+}
+
+class FillerBoxes extends Component {
+  render() {
+    const n = Dimensions.get('window').width / styles.symptomBox.width
+    const fillerBoxes = []
+    for (let i = 0; i < Math.ceil(n); i++) {
+      fillerBoxes.push(
+        <View
+          width={styles.symptomBox.width}
+          height={0}
+          key={i.toString()}
+        />
+      )
+    }
+    return fillerBoxes
+  }
+}

components/cycle-day/index.js

@@ -1,77 +0,0 @@
-import React, { Component } from 'react'
-import {
-  View,
-  Text,
-  ScrollView
-} from 'react-native'
-import cycleModule from '../../lib/cycle'
-import { getFertilityStatusStringForDay } from '../../lib/sympto-adapter'
-import { formatDateForViewHeader } from './labels/format'
-import styles from '../../styles'
-import actionButtonModule from './action-buttons'
-import symptomComponents from './symptoms'
-import DayView from './cycle-day-overview'
-
-const getCycleDayNumber = cycleModule().getCycleDayNumber
-
-export default class Day extends Component {
-  constructor(props) {
-    super(props)
-    this.cycleDay = props.navigation.state.params.cycleDay
-
-    this.state = {
-      visibleComponent: 'DayView',
-    }
-
-    const showView = view => {
-      this.setState({visibleComponent: view})
-    }
-
-    const makeActionButtons = actionButtonModule(showView)
-
-    const symptomComponentNames = Object.keys(symptomComponents)
-    this.cycleDayViews = symptomComponentNames.reduce((acc, curr) => {
-      acc[curr] = React.createElement(
-        symptomComponents[curr],
-        {
-          cycleDay: this.cycleDay,
-          makeActionButtons
-        }
-      )
-      return acc
-    }, {})
-
-    // DayView needs showView instead of makeActionButtons
-    this.cycleDayViews.DayView = React.createElement(DayView, {
-      cycleDay: this.cycleDay,
-      showView
-    })
-  }
-
-  render() {
-    const cycleDayNumber = getCycleDayNumber(this.cycleDay.date)
-    const fertilityStatus = getFertilityStatusStringForDay(this.cycleDay.date)
-    return (
-      <ScrollView>
-        <View style={ styles.cycleDayDateView }>
-          <Text style={styles.dateHeader}>
-            {formatDateForViewHeader(this.cycleDay.date)}
-          </Text>
-        </View >
-        <View style={ styles.cycleDayNumberView }>
-          { cycleDayNumber &&
-            <Text style={styles.cycleDayNumber} >
-              Cycle day {cycleDayNumber}
-            </Text> }
-
-          <Text style={styles.cycleDayNumber} >
-            {fertilityStatus}
-          </Text>
-        </View >
-        <View>
-          { this.cycleDayViews[this.state.visibleComponent] }
-        </View >
-      </ScrollView >
-    )
-  }
-}

components/cycle-day/labels/labels.js

@@ -1,7 +1,7 @@
 export const bleeding = ['spotting', 'light', 'medium', 'heavy']
 export const mucusFeeling = ['dry', 'nothing', 'wet', 'slippery']
 export const mucusTexture = ['nothing', 'creamy', 'egg white']
-export const mucusNFP = ['t', 'Ø', 'f', 'S', '+S']
+export const mucusNFP = ['t', 'Ø', 'f', 'S', 'S+']
 export const cervixOpening = ['closed', 'medium', 'open']
 export const cervixFirmness = ['hard', 'soft']
 export const cervixPosition = ['low', 'medium', 'high']

components/cycle-day/symptoms/action-button-footer.js

@@ -0,0 +1,63 @@
+import React, { Component } from 'react'
+import {
+  View, TouchableOpacity, Text
+} from 'react-native'
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
+import { saveSymptom } from '../../../db'
+import styles, {iconStyles} from '../../../styles'
+
+export default class ActionButtonFooter extends Component {
+  render() {
+    const { symptom, cycleDay, saveAction, saveDisabled, navigate} = this.props
+    const navigateToOverView = () => navigate('CycleDay', {cycleDay})
+    const buttons = [
+      {
+        title: 'Cancel',
+        action: () => navigateToOverView(),
+        icon: 'cancel'
+      },
+      {
+        title: 'Delete',
+        action: () => {
+          saveSymptom(symptom, cycleDay)
+          navigateToOverView()
+        },
+        disabledCondition: !cycleDay[symptom],
+        icon: 'delete-outline'
+      }, {
+        title: 'Save',
+        action: () => {
+          saveAction()
+          navigateToOverView()
+        },
+        disabledCondition: saveDisabled,
+        icon: 'content-save-outline'
+      }
+    ]
+
+    return (
+      <View style={styles.menu}>
+        {buttons.map(({ title, action, disabledCondition, icon }, i) => {
+          const textStyle = disabledCondition ? styles.menuTextInActive : styles.menuText
+          const iconStyle = disabledCondition ?
+            Object.assign({}, iconStyles.menuIcon, iconStyles.menuIconInactive) :
+            iconStyles.menuIcon
+
+          return (
+            <TouchableOpacity
+              onPress={action}
+              style={styles.menuItem}
+              disabled={disabledCondition}
+              key={i.toString()}
+            >
+              <Icon name={icon} {...iconStyle} />
+              <Text style={textStyle}>
+                {title}
+              </Text>
+            </TouchableOpacity>
+          )
+        })}
+      </View>
+    )
+  }
+}

components/cycle-day/symptoms/bleeding.js

@@ -2,12 +2,14 @@ import React, { Component } from 'react'
 import {
   View,
   Text,
-  Switch
+  Switch,
+  ScrollView
 } from 'react-native'
 import RadioForm from 'react-native-simple-radio-button'
 import styles from '../../../styles'
 import { saveSymptom } from '../../../db'
 import { bleeding as labels } from '../labels/labels'
+import ActionButtonFooter from './action-button-footer'
 
 export default class Bleeding extends Component {
   constructor(props) {
@@ -32,44 +34,44 @@ export default class Bleeding extends Component {
       { label: labels[3], value: 3 },
     ]
     return (
-      <View style={styles.symptomEditView}>
-        <Text style={styles.symptomDayView}>Bleeding</Text>
-        <View style={styles.radioButtonRow}>
-          <RadioForm
-            radio_props={bleedingRadioProps}
-            initial={this.state.currentValue}
-            formHorizontal={true}
-            labelHorizontal={false}
-            labelStyle={styles.radioButton}
-            onPress={(itemValue) => {
-              this.setState({ currentValue: itemValue })
-            }}
-          />
-        </View>
-        <View style={styles.symptomViewRowInline}>
-          <Text style={styles.symptomDayView}>Exclude</Text>
-          <Switch
-            onValueChange={(val) => {
-              this.setState({ exclude: val })
-            }}
-            value={this.state.exclude}
-          />
-        </View>
-        <View style={styles.actionButtonRow}>
-          {this.makeActionButtons(
-            {
-              symptom: 'bleeding',
-              cycleDay: this.cycleDay,
-              saveAction: () => {
-                saveSymptom('bleeding', this.cycleDay, {
-                  value: this.state.currentValue,
-                  exclude: this.state.exclude
-                })
-              },
-              saveDisabled: this.state.currentValue === -1
-            }
-          )}
-        </View>
+      <View style={{ flex: 1 }}>
+        <ScrollView>
+          <View>
+            <View style={styles.radioButtonRow}>
+              <RadioForm
+                radio_props={bleedingRadioProps}
+                initial={this.state.currentValue}
+                formHorizontal={true}
+                labelHorizontal={false}
+                labelStyle={styles.radioButton}
+                onPress={(itemValue) => {
+                  this.setState({ currentValue: itemValue })
+                }}
+              />
+            </View>
+            <View style={styles.symptomViewRowInline}>
+              <Text style={styles.symptomDayView}>Exclude</Text>
+              <Switch
+                onValueChange={(val) => {
+                  this.setState({ exclude: val })
+                }}
+                value={this.state.exclude}
+              />
+            </View>
+          </View>
+        </ScrollView>
+        <ActionButtonFooter
+          symptom='bleeding'
+          cycleDay={this.props.cycleDay}
+          saveAction={() => {
+            saveSymptom('bleeding', this.props.cycleDay, {
+              value: this.state.currentValue,
+              exclude: this.state.exclude
+            })
+          }}
+          saveDisabled={this.state.currentValue === -1}
+          navigate={this.props.navigate}
+        />
       </View>
     )
   }

components/cycle-day/symptoms/cervix.js

@@ -2,7 +2,8 @@ import React, { Component } from 'react'
 import {
   View,
   Text,
-  Switch
+  Switch,
+  ScrollView
 } from 'react-native'
 import RadioForm from 'react-native-simple-radio-button'
 import styles from '../../../styles'
@@ -12,6 +13,7 @@ import {
   cervixFirmness as firmnessLabels,
   cervixPosition as positionLabels
 } from '../labels/labels'
+import ActionButtonFooter from './action-button-footer'
 
 export default class Cervix extends Component {
   constructor(props) {
@@ -45,76 +47,76 @@ export default class Cervix extends Component {
     const cervixPositionRadioProps = [
       {label: positionLabels[0], value: 0 },
       {label: positionLabels[1], value: 1 },
-      {label: positionLabels[2], value: 2 }
+      { label: positionLabels[2], value: 2 }
     ]
-    return(
-      <View style={ styles.symptomEditView }>
-        <Text style={styles.symptomDayView}>Cervix</Text>
-        <Text style={styles.symptomDayView}>Opening</Text>
-        <View style={styles.radioButtonRow}>
-          <RadioForm
-            radio_props={cervixOpeningRadioProps}
-            initial={this.state.opening}
-            formHorizontal={true}
-            labelHorizontal={false}
-            labelStyle={styles.radioButton}
-            onPress={(itemValue) => {
-              this.setState({opening: itemValue})
-            }}
-          />
-        </View>
-        <Text style={styles.symptomDayView}>Firmness</Text>
-        <View style={styles.radioButtonRow}>
-          <RadioForm
-            radio_props={cervixFirmnessRadioProps}
-            initial={this.state.firmness}
-            formHorizontal={true}
-            labelHorizontal={false}
-            labelStyle={styles.radioButton}
-            onPress={(itemValue) => {
-              this.setState({firmness: itemValue})
-            }}
-          />
-        </View>
-        <Text style={styles.symptomDayView}>Position</Text>
-        <View style={styles.radioButtonRow}>
-          <RadioForm
-            radio_props={cervixPositionRadioProps}
-            initial={this.state.position}
-            formHorizontal={true}
-            labelHorizontal={false}
-            labelStyle={styles.radioButton}
-            onPress={(itemValue) => {
-              this.setState({position: itemValue})
-            }}
-          />
-        </View>
-        <View style={styles.symptomViewRowInline}>
-          <Text style={styles.symptomDayView}>Exclude</Text>
-          <Switch
-            onValueChange={(val) => {
-              this.setState({ exclude: val })
-            }}
-            value={this.state.exclude}
-          />
-        </View>
-        <View style={styles.actionButtonRow}>
-          {this.makeActionButtons(
-            {
-              symptom: 'cervix',
-              cycleDay: this.cycleDay,
-              saveAction: () => {
-                saveSymptom('cervix', this.cycleDay, {
-                  opening: this.state.opening,
-                  firmness: this.state.firmness,
-                  position: this.state.position,
-                  exclude: this.state.exclude
-                })
-              },
-              saveDisabled: this.state.opening === -1 || this.state.firmness === -1
-            }
-          )}
-        </View>
+    return (
+      <View style={{ flex: 1 }}>
+        <ScrollView>
+          <View>
+            <Text style={styles.symptomDayView}>Opening</Text>
+            <View style={styles.radioButtonRow}>
+              <RadioForm
+                radio_props={cervixOpeningRadioProps}
+                initial={this.state.opening}
+                formHorizontal={true}
+                labelHorizontal={false}
+                labelStyle={styles.radioButton}
+                onPress={(itemValue) => {
+                  this.setState({ opening: itemValue })
+                }}
+              />
+            </View>
+            <Text style={styles.symptomDayView}>Firmness</Text>
+            <View style={styles.radioButtonRow}>
+              <RadioForm
+                radio_props={cervixFirmnessRadioProps}
+                initial={this.state.firmness}
+                formHorizontal={true}
+                labelHorizontal={false}
+                labelStyle={styles.radioButton}
+                onPress={(itemValue) => {
+                  this.setState({ firmness: itemValue })
+                }}
+              />
+            </View>
+            <Text style={styles.symptomDayView}>Position</Text>
+            <View style={styles.radioButtonRow}>
+              <RadioForm
+                radio_props={cervixPositionRadioProps}
+                initial={this.state.position}
+                formHorizontal={true}
+                labelHorizontal={false}
+                labelStyle={styles.radioButton}
+                onPress={(itemValue) => {
+                  this.setState({ position: itemValue })
+                }}
+              />
+            </View>
+            <View style={styles.symptomViewRowInline}>
+              <Text style={styles.symptomDayView}>Exclude</Text>
+              <Switch
+                onValueChange={(val) => {
+                  this.setState({ exclude: val })
+                }}
+                value={this.state.exclude}
+              />
+            </View>
+          </View>
+        </ScrollView>
+        <ActionButtonFooter
+          symptom='cervix'
+          cycleDay={this.cycleDay}
+          saveAction={() => {
+            saveSymptom('cervix', this.cycleDay, {
+              opening: this.state.opening,
+              firmness: this.state.firmness,
+              position: this.state.position,
+              exclude: this.state.exclude
+            })
+          }}
+          saveDisabled={this.state.opening === -1 || this.state.firmness === -1}
+          navigate={this.props.navigate}
+        />
       </View>
     )
   }

components/cycle-day/symptoms/desire.js

@@ -1,12 +1,13 @@
 import React, { Component } from 'react'
 import {
   View,
-  Text
+  ScrollView
 } from 'react-native'
 import RadioForm from 'react-native-simple-radio-button'
 import styles from '../../../styles'
 import { saveSymptom } from '../../../db'
 import { intensity as labels } from '../labels/labels'
+import ActionButtonFooter from './action-button-footer'
 
 export default class Desire extends Component {
   constructor(props) {
@@ -27,32 +28,32 @@ export default class Desire extends Component {
       { label: labels[2], value: 2 }
     ]
     return (
-      <View style={styles.symptomEditView}>
-        <Text style={styles.symptomDayView}>Desire</Text>
-        <View style={styles.radioButtonRow}>
-          <RadioForm
-            radio_props={desireRadioProps}
-            initial={this.state.currentValue}
-            formHorizontal={true}
-            labelHorizontal={false}
-            labelStyle={styles.radioButton}
-            onPress={(itemValue) => {
-              this.setState({ currentValue: itemValue })
-            }}
-          />
-        </View>
-        <View style={styles.actionButtonRow}>
-          {this.makeActionButtons(
-            {
-              symptom: 'desire',
-              cycleDay: this.cycleDay,
-              saveAction: () => {
-                saveSymptom('desire', this.cycleDay, { value: this.state.currentValue })
-              },
-              saveDisabled: this.state.currentValue === -1
-            }
-          )}
-        </View>
+      <View style={{ flex: 1 }}>
+        <ScrollView>
+          <View>
+            <View style={styles.radioButtonRow}>
+              <RadioForm
+                radio_props={desireRadioProps}
+                initial={this.state.currentValue}
+                formHorizontal={true}
+                labelHorizontal={false}
+                labelStyle={styles.radioButton}
+                onPress={(itemValue) => {
+                  this.setState({ currentValue: itemValue })
+                }}
+              />
+            </View>
+          </View>
+        </ScrollView>
+        <ActionButtonFooter
+          symptom='desire'
+          cycleDay={this.cycleDay}
+          saveAction={() => {
+            saveSymptom('desire', this.cycleDay, { value: this.state.currentValue })
+          }}
+          saveDisabled={this.state.currentValue === -1}
+          navigate={this.props.navigate}
+        />
       </View>
     )
   }

components/cycle-day/symptoms/index.js

@@ -14,4 +14,4 @@ export default {
   NoteEditView,
   DesireEditView,
   SexEditView
-}
+}

components/cycle-day/symptoms/mucus.js

@@ -2,7 +2,8 @@ import React, { Component } from 'react'
 import {
   View,
   Text,
-  Switch
+  Switch,
+  ScrollView
 } from 'react-native'
 import RadioForm from 'react-native-simple-radio-button'
 import styles from '../../../styles'
@@ -12,6 +13,7 @@ import {
   mucusTexture as textureLabels
 } from '../labels/labels'
 import computeSensiplanValue from '../../../lib/sensiplan-mucus'
+import ActionButtonFooter from './action-button-footer'
 
 
 export default class Mucus extends Component {
@@ -31,78 +33,75 @@ export default class Mucus extends Component {
       }
     })
     /* eslint-enable react/no-direct-mutation-state */
-
   }
 
   render() {
     const mucusFeelingRadioProps = [
-      {label: feelingLabels[0], value: 0 },
-      {label: feelingLabels[1], value: 1 },
-      {label: feelingLabels[2], value: 2 },
-      {label: feelingLabels[3], value: 3 }
+      { label: feelingLabels[0], value: 0 },
+      { label: feelingLabels[1], value: 1 },
+      { label: feelingLabels[2], value: 2 },
+      { label: feelingLabels[3], value: 3 }
     ]
     const mucusTextureRadioProps = [
-      {label: textureLabels[0], value: 0 },
-      {label: textureLabels[1], value: 1 },
-      {label: textureLabels[2], value: 2 }
+      { label: textureLabels[0], value: 0 },
+      { label: textureLabels[1], value: 1 },
+      { label: textureLabels[2], value: 2 }
     ]
-    return(
-      <View style={ styles.symptomEditView }>
-        <Text style={styles.symptomDayView}>Mucus</Text>
-        <Text style={styles.symptomDayView}>Feeling</Text>
-        <View style={styles.radioButtonRow}>
-          <RadioForm
-            radio_props={mucusFeelingRadioProps}
-            initial={this.state.feeling}
-            formHorizontal={true}
-            labelHorizontal={false}
-            labelStyle={styles.radioButton}
-            onPress={(itemValue) => {
-              this.setState({feeling: itemValue })
-            }}
-          />
-        </View>
-        <Text style={styles.symptomDayView}>Texture</Text>
-        <View style={styles.radioButtonRow}>
-          <RadioForm
-            radio_props={mucusTextureRadioProps}
-            initial={this.state.texture}
-            formHorizontal={true}
-            labelHorizontal={false}
-            labelStyle={styles.radioButton}
-            onPress={(itemValue) => {
-              this.setState({texture: itemValue })
-            }}
-          />
-        </View>
-        <View style={styles.symptomViewRowInline}>
-          <Text style={styles.symptomDayView}>Exclude</Text>
-          <Switch
-            onValueChange={(val) => {
-              this.setState({ exclude: val })
-            }}
-            value={this.state.exclude}
-          />
-        </View>
-
-        <View style={styles.actionButtonRow}>
-          {this.makeActionButtons(
-            {
-              symptom: 'mucus',
-              cycleDay: this.cycleDay,
-              saveAction: () => {
-                saveSymptom('mucus', this.cycleDay, {
-                  feeling: this.state.feeling,
-                  texture: this.state.texture,
-                  value: computeSensiplanValue(this.state.feeling, this.state.texture),
-                  exclude: this.state.exclude
-                })
-              },
-              saveDisabled: this.state.feeling === -1 || this.state.texture === -1
-            }
-          )}
-        </View>
-
+    return (
+      <View style={{ flex: 1 }}>
+        <ScrollView>
+          <View>
+            <Text style={styles.symptomDayView}>Feeling</Text>
+            <View style={styles.radioButtonRow}>
+              <RadioForm
+                radio_props={mucusFeelingRadioProps}
+                initial={this.state.feeling}
+                formHorizontal={true}
+                labelHorizontal={false}
+                labelStyle={styles.radioButton}
+                onPress={(itemValue) => {
+                  this.setState({ feeling: itemValue })
+                }}
+              />
+            </View>
+            <Text style={styles.symptomDayView}>Texture</Text>
+            <View style={styles.radioButtonRow}>
+              <RadioForm
+                radio_props={mucusTextureRadioProps}
+                initial={this.state.texture}
+                formHorizontal={true}
+                labelHorizontal={false}
+                labelStyle={styles.radioButton}
+                onPress={(itemValue) => {
+                  this.setState({ texture: itemValue })
+                }}
+              />
+            </View>
+            <View style={styles.symptomViewRowInline}>
+              <Text style={styles.symptomDayView}>Exclude</Text>
+              <Switch
+                onValueChange={(val) => {
+                  this.setState({ exclude: val })
+                }}
+                value={this.state.exclude}
+              />
+            </View>
+          </View>
+        </ScrollView>
+        <ActionButtonFooter
+          symptom='mucus'
+          cycleDay={this.cycleDay}
+          saveAction={() => {
+            saveSymptom('mucus', this.cycleDay, {
+              feeling: this.state.feeling,
+              texture: this.state.texture,
+              value: computeSensiplanValue(this.state.feeling, this.state.texture),
+              exclude: this.state.exclude
+            })
+          }}
+          saveDisabled={this.state.feeling === -1 || this.state.texture === -1}
+          navigate={this.props.navigate}
+        />
       </View>
     )
   }

components/cycle-day/symptoms/note.js

@@ -1,12 +1,13 @@
 import React, { Component } from 'react'
 import {
   View,
-  Text,
+  ScrollView,
   TextInput,
 } from 'react-native'
 
 import styles from '../../../styles'
 import { saveSymptom } from '../../../db'
+import ActionButtonFooter from './action-button-footer'
 
 export default class Temp extends Component {
   constructor(props) {
@@ -22,31 +23,31 @@ export default class Temp extends Component {
 
   render() {
     return (
-      <View style={styles.symptomEditView}>
-        <View style={styles.symptomViewRow}>
-          <Text style={styles.symptomDayView}>Note</Text>
-          <TextInput
-            multiline={true}
-            placeholder="Enter"
-            onChangeText={(val) => {
-              this.setState({ currentValue: val })
-            }}
-            value={this.state.currentValue}
-          />
-        </View>
-        <View style={styles.actionButtonRow}>
-          {this.makeActionButtons({
-            symptom: 'note',
-            cycleDay: this.cycleDay,
-            saveAction: () => {
-              saveSymptom('note', this.cycleDay, {
-                value: this.state.currentValue
-              })
-            },
-            saveDisabled: !this.state.currentValue
-          })}
-        </View>
+      <View style={{ flex: 1 }}>
+        <ScrollView>
+          <View style={styles.symptomViewRow}>
+            <TextInput
+              multiline={true}
+              placeholder="Enter"
+              onChangeText={(val) => {
+                this.setState({ currentValue: val })
+              }}
+              value={this.state.currentValue}
+            />
+          </View>
+        </ScrollView>
+        <ActionButtonFooter
+          symptom='note'
+          cycleDay={this.cycleDay}
+          saveAction={() => {
+            saveSymptom('note', this.cycleDay, {
+              value: this.state.currentValue
+            })
+          }}
+          saveDisabled={!this.state.currentValue}
+          navigate={this.props.navigate}
+        />
       </View>
     )
   }
-}
+}

components/cycle-day/symptoms/sex.js

@@ -3,7 +3,8 @@ import {
   CheckBox,
   Text,
   TextInput,
-  View
+  View,
+  ScrollView
 } from 'react-native'
 import styles from '../../../styles'
 import { saveSymptom } from '../../../db'
@@ -11,13 +12,14 @@ import {
   sexActivity as activityLabels,
   contraceptives as contraceptiveLabels
 } from '../labels/labels'
+import ActionButtonFooter from './action-button-footer'
 
 export default class Sex extends Component {
   constructor(props) {
     super(props)
     this.cycleDay = props.cycleDay
     this.state = {}
-    if (this.cycleDay.sex !== null ) {
+    if (this.cycleDay.sex !== null) {
       Object.assign(this.state, this.cycleDay.sex)
       // We make sure other is always true when there is a note,
       // e.g. when import is messed up.
@@ -30,127 +32,127 @@ export default class Sex extends Component {
   render() {
 
     return (
-      <View style={styles.symptomEditView}>
-        <Text style={styles.symptomDayView}>SEX</Text>
-        <View style={styles.symptomViewRowInline}>
-          <Text style={styles.symptomDayView}>{activityLabels.solo}</Text>
-          <CheckBox
-            value={this.state.solo}
-            onValueChange={(val) => {
-              this.setState({solo: val})
-            }}
-          />
-          <Text style={styles.symptomDayView}>{activityLabels.partner}</Text>
-          <CheckBox
-            value={this.state.partner}
-            onValueChange={(val) => {
-              this.setState({partner: val})
-            }}
-          />
-        </View>
-        <Text style={styles.symptomDayView}>CONTRACEPTIVES</Text>
-        <View style={styles.symptomViewRowInline}>
-          <Text style={styles.symptomDayView}>
-            {contraceptiveLabels.condom}
-          </Text>
-          <CheckBox
-            value={this.state.condom}
-            onValueChange={(val) => {
-              this.setState({condom: val})
-            }}
-          />
-          <Text style={styles.symptomDayView}>
-            {contraceptiveLabels.pill}
-          </Text>
-          <CheckBox
-            value={this.state.pill}
-            onValueChange={(val) => {
-              this.setState({pill: val})
-            }}
-          />
-        </View>
-        <View style={styles.symptomViewRowInline}>
-          <Text style={styles.symptomDayView}>
-            {contraceptiveLabels.iud}
-          </Text>
-          <CheckBox
-            value={this.state.iud}
-            onValueChange={(val) => {
-              this.setState({iud: val})
-            }}
-          />
-          <Text style={styles.symptomDayView}>
-            {contraceptiveLabels.patch}
-          </Text>
-          <CheckBox
-            value={this.state.patch}
-            onValueChange={(val) => {
-              this.setState({patch: val})
-            }}
-          />
-        </View>
-        <View style={styles.symptomViewRowInline}>
-          <Text style={styles.symptomDayView}>
-            {contraceptiveLabels.ring}
-          </Text>
-          <CheckBox
-            value={this.state.ring}
-            onValueChange={(val) => {
-              this.setState({ring: val})
-            }}
-          />
-          <Text style={styles.symptomDayView}>
-            {contraceptiveLabels.implant}
-          </Text>
-          <CheckBox
-            value={this.state.implant}
-            onValueChange={(val) => {
-              this.setState({implant: val})
-            }}
-          />
-        </View>
-        <View style={styles.symptomViewRowInline}>
-          <Text style={styles.symptomDayView}>
-            {contraceptiveLabels.other}
-          </Text>
-          <CheckBox
-            value={this.state.other}
-            onValueChange={(val) => {
-              this.setState({
-                other: val,
-                focusTextArea: true
-              })
-            }}
-          />
-        </View>
-        { this.state.other &&
-          <TextInput
-            autoFocus={this.state.focusTextArea}
-            multiline={true}
-            placeholder="Enter"
-            value={this.state.note}
-            onChangeText={(val) => {
-              this.setState({note: val})
-            }}
-          />
-        }
-        <View style={styles.actionButtonRow}>
-          {this.props.makeActionButtons(
-            {
-              symptom: 'sex',
-              cycleDay: this.cycleDay,
-              saveAction: () => {
-                const copyOfState = Object.assign({}, this.state)
-                if (!copyOfState.other) {
-                  copyOfState.note = null
-                }
-                saveSymptom('sex', this.cycleDay, copyOfState)
-              },
-              saveDisabled: Object.values(this.state).every(value => !value)
+      <View style={{ flex: 1 }}>
+        <ScrollView>
+          <View>
+            <View style={styles.symptomViewRowInline}>
+              <Text style={styles.symptomDayView}>{activityLabels.solo}</Text>
+              <CheckBox
+                value={this.state.solo}
+                onValueChange={(val) => {
+                  this.setState({ solo: val })
+                }}
+              />
+              <Text style={styles.symptomDayView}>{activityLabels.partner}</Text>
+              <CheckBox
+                value={this.state.partner}
+                onValueChange={(val) => {
+                  this.setState({ partner: val })
+                }}
+              />
+            </View>
+            <Text style={styles.symptomDayView}>CONTRACEPTIVES</Text>
+            <View style={styles.symptomViewRowInline}>
+              <Text style={styles.symptomDayView}>
+                {contraceptiveLabels.condom}
+              </Text>
+              <CheckBox
+                value={this.state.condom}
+                onValueChange={(val) => {
+                  this.setState({ condom: val })
+                }}
+              />
+              <Text style={styles.symptomDayView}>
+                {contraceptiveLabels.pill}
+              </Text>
+              <CheckBox
+                value={this.state.pill}
+                onValueChange={(val) => {
+                  this.setState({ pill: val })
+                }}
+              />
+            </View>
+            <View style={styles.symptomViewRowInline}>
+              <Text style={styles.symptomDayView}>
+                {contraceptiveLabels.iud}
+              </Text>
+              <CheckBox
+                value={this.state.iud}
+                onValueChange={(val) => {
+                  this.setState({ iud: val })
+                }}
+              />
+              <Text style={styles.symptomDayView}>
+                {contraceptiveLabels.patch}
+              </Text>
+              <CheckBox
+                value={this.state.patch}
+                onValueChange={(val) => {
+                  this.setState({ patch: val })
+                }}
+              />
+            </View>
+            <View style={styles.symptomViewRowInline}>
+              <Text style={styles.symptomDayView}>
+                {contraceptiveLabels.ring}
+              </Text>
+              <CheckBox
+                value={this.state.ring}
+                onValueChange={(val) => {
+                  this.setState({ ring: val })
+                }}
+              />
+              <Text style={styles.symptomDayView}>
+                {contraceptiveLabels.implant}
+              </Text>
+              <CheckBox
+                value={this.state.implant}
+                onValueChange={(val) => {
+                  this.setState({ implant: val })
+                }}
+              />
+            </View>
+            <View style={styles.symptomViewRowInline}>
+              <Text style={styles.symptomDayView}>
+                {contraceptiveLabels.other}
+              </Text>
+              <CheckBox
+                value={this.state.other}
+                onValueChange={(val) => {
+                  this.setState({
+                    other: val,
+                    focusTextArea: true
+                  })
+                }}
+              />
+            </View>
+            {this.state.other &&
+              <TextInput
+                autoFocus={this.state.focusTextArea}
+                multiline={true}
+                placeholder="Enter"
+                value={this.state.note}
+                onChangeText={(val) => {
+                  this.setState({ note: val })
+                }}
+              />
             }
-          )}
-        </View>
+          </View>
+        </ScrollView>
+        <ActionButtonFooter
+          symptom='sex'
+          cycleDay={this.cycleDay}
+          saveAction={() => {
+            const copyOfState = Object.assign({}, this.state)
+            if (!copyOfState.other) {
+              copyOfState.note = null
+            }
+            saveSymptom('sex', this.cycleDay, copyOfState)
+          }}
+          saveDisabled={Object.values(this.state).every(value => !value)}
+          navigate={this.props.navigate}
+        />
       </View>
     )
   }
-}
+}

components/cycle-day/symptoms/temperature.js

@@ -5,7 +5,8 @@ import {
   TextInput,
   Switch,
   Keyboard,
-  Alert
+  Alert,
+  ScrollView
 } from 'react-native'
 import DateTimePicker from 'react-native-modal-datetime-picker-nevo'
 
@@ -15,6 +16,7 @@ import { LocalTime, ChronoUnit } from 'js-joda'
 import { temperature as tempLabels } from '../labels/labels'
 import { scaleObservable } from '../../../local-storage'
 import { shared } from '../../labels'
+import ActionButtonFooter from './action-button-footer'
 
 const minutes = ChronoUnit.MINUTES
 
@@ -50,64 +52,68 @@ export default class Temp extends Component {
 
   render() {
     return (
-      <View style={styles.symptomEditView}>
-        <View style={styles.symptomViewRowInline}>
-          <Text style={styles.symptomDayView}>Temperature (°C)</Text>
-          <TempInput
-            value={this.state.temperature}
-            setState={(val) => this.setState(val)}
-            isSuggestion={this.state.isSuggestion}
-          />
-        </View>
-        <View style={styles.symptomViewRowInline}>
-          <Text style={styles.symptomDayView}>Time</Text>
-          <TextInput
-            style={styles.temperatureTextInput}
-            onFocus={() => {
-              Keyboard.dismiss()
-              this.setState({isTimePickerVisible: true})
-            }}
-            value={this.state.time}
-          />
-        </View>
-        <DateTimePicker
-          mode="time"
-          isVisible={this.state.isTimePickerVisible}
-          onConfirm={jsDate => {
-            this.setState({
-              time: `${jsDate.getHours()}:${jsDate.getMinutes()}`,
-              isTimePickerVisible: false
-            })
+      <View style={{ flex: 1 }}>
+        <ScrollView>
+          <View>
+            <View style={styles.symptomViewRowInline}>
+              <Text style={styles.symptomDayView}>Temperature (°C)</Text>
+              <TempInput
+                value={this.state.temperature}
+                setState={(val) => this.setState(val)}
+                isSuggestion={this.state.isSuggestion}
+              />
+            </View>
+            <View style={styles.symptomViewRowInline}>
+              <Text style={styles.symptomDayView}>Time</Text>
+              <TextInput
+                style={styles.temperatureTextInput}
+                onFocus={() => {
+                  Keyboard.dismiss()
+                  this.setState({ isTimePickerVisible: true })
+                }}
+                value={this.state.time}
+              />
+            </View>
+            <DateTimePicker
+              mode="time"
+              isVisible={this.state.isTimePickerVisible}
+              onConfirm={jsDate => {
+                this.setState({
+                  time: `${jsDate.getHours()}:${jsDate.getMinutes()}`,
+                  isTimePickerVisible: false
+                })
+              }}
+              onCancel={() => this.setState({ isTimePickerVisible: false })}
+            />
+            <View style={styles.symptomViewRowInline}>
+              <Text style={styles.symptomDayView}>Exclude</Text>
+              <Switch
+                onValueChange={(val) => {
+                  this.setState({ exclude: val })
+                }}
+                value={this.state.exclude}
+              />
+            </View>
+          </View>
+        </ScrollView>
+        <ActionButtonFooter
+          symptom='temperature'
+          cycleDay={this.cycleDay}
+          saveAction={() => {
+            const dataToSave = {
+              value: Number(this.state.temperature),
+              exclude: this.state.exclude,
+              time: this.state.time
+            }
+            saveSymptom('temperature', this.cycleDay, dataToSave)
           }}
-          onCancel={() => this.setState({isTimePickerVisible: false})}
+          saveDisabled={
+            this.state.temperature === '' ||
+            isNaN(Number(this.state.temperature)) ||
+            isInvalidTime(this.state.time)
+          }
+          navigate={this.props.navigate}
         />
-        <View style={styles.symptomViewRowInline}>
-          <Text style={styles.symptomDayView}>Exclude</Text>
-          <Switch
-            onValueChange={(val) => {
-              this.setState({ exclude: val })
-            }}
-            value={this.state.exclude}
-          />
-        </View>
-        <View style={styles.actionButtonRow}>
-          {this.makeActionButtons({
-            symptom: 'temperature',
-            cycleDay: this.cycleDay,
-            saveAction: async () => {
-              const dataToSave = {
-                value: Number(this.state.temperature),
-                exclude: this.state.exclude,
-                time: this.state.time
-              }
-              saveSymptom('temperature', this.cycleDay, dataToSave)
-            },
-            saveDisabled:
-              this.state.temperature === '' ||
-              isNaN(Number(this.state.temperature)) ||
-              isInvalidTime(this.state.time)
-          })}
-        </View>
       </View>
     )
   }

components/header.js

@@ -0,0 +1,43 @@
+import React, { Component } from 'react'
+import {
+  View,
+  Text
+} from 'react-native'
+import styles, { iconStyles } from '../styles'
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
+import { formatDateForViewHeader } from '../components/cycle-day/labels/format'
+
+export default class Header extends Component {
+  render() {
+    return (
+      this.props.isCycleDayOverView ?
+        <View style={[styles.header, styles.headerCycleDay]}>
+          <Icon
+            name='arrow-left-drop-circle'
+            {...iconStyles.navigationArrow}
+            onPress={() => this.props.goToCycleDay('before')}
+          />
+          <View>
+            <Text style={styles.dateHeader}>
+              {formatDateForViewHeader(this.props.date)}
+            </Text>
+            {this.props.cycleDayNumber &&
+              <Text style={styles.cycleDayNumber} >
+                Cycle day {this.props.cycleDayNumber}
+              </Text>}
+          </View >
+          <Icon
+            name='arrow-right-drop-circle'
+            {...iconStyles.navigationArrow}
+            onPress={() => this.props.goToCycleDay('after')}
+          />
+        </View >
+        :
+        <View style={styles.header}>
+          <Text style={styles.dateHeader}>
+            {this.props.title}
+          </Text>
+        </View >
+    )
+  }
+}

components/home.js

@@ -41,7 +41,7 @@ export default class Home extends Component {
   passTodayToDayView() {
     const todayDateString = LocalDate.now().toString()
     const cycleDay = getOrCreateCycleDay(todayDateString)
-    const navigate = this.props.navigation.navigate
+    const navigate = this.props.navigate
     navigate('CycleDay', { cycleDay })
   }
 

components/labels.js

@@ -42,4 +42,30 @@ export const settings = {
     loadError: 'Could not load saved temperature scale settings',
     saveError: 'Could not save temperature scale settings'
   }
+}
+
+export const headerTitles = {
+  Home: 'Home',
+  Calendar: 'Calendar',
+  Chart: 'Chart',
+  Stats: 'Statistics',
+  Settings: 'Settings',
+  BleedingEditView: 'Bleeding',
+  TemperatureEditView: 'Temperature',
+  MucusEditView: 'Mucus',
+  CervixEditView: 'Cervix',
+  NoteEditView: 'Note',
+  DesireEditView: 'Desire',
+  SexEditView: 'Sex'
+}
+
+export const stats = {
+  emptyStats: 'At least one completed cycle is needed to present you with stats here.',
+  oneCycleStats: (number) => `You have documented one cycle of ${number} days.`,
+  getBasisOfStats: (numberOfCycles) => `Stats are based on ${numberOfCycles} completed cycles.`,
+  daysLabel: 'days',
+  averageLabel: 'Average cycle length',
+  minLabel: 'Shortest cycle',
+  maxLabel: 'Longest cycle',
+  stdLabel: 'Standard deviation'
 }

components/menu.js

@@ -0,0 +1,43 @@
+import React, { Component } from 'react'
+import {
+  View,
+  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, onPress}, i) {
+    return (
+      <TouchableOpacity
+        onPress={onPress}
+        style={styles.menuItem}
+        key={i.toString()}
+      >
+        <Icon name={icon} {...iconStyles.menuIcon} />
+        <Text style={styles.menuText}>
+          {title}
+        </Text>
+      </TouchableOpacity>
+    )
+  }
+
+  goTo(componentName) {
+    this.props.navigate(componentName)
+  }
+
+  render() {
+    return (
+      <View style={styles.menu}>
+        {[
+          { title: 'Home', icon: 'home', onPress: () => this.goTo('Home') },
+          { title: 'Calendar', icon: 'calendar-range', onPress: () => this.goTo('Calendar') },
+          { title: 'Chart', icon: 'chart-line', onPress: () => this.goTo('Chart') },
+          { title: 'Stats', icon: 'chart-pie', onPress: () => this.goTo('Stats') },
+          { title: 'Settings', icon: 'settings', onPress: () => this.goTo('Settings') },
+        ].map(this.makeMenuItem.bind(this))}
+      </View >
+    )
+  }
+}

components/stats.js

@@ -8,15 +8,50 @@ import { LocalDate, ChronoUnit } from 'js-joda'
 import styles from '../styles/index'
 import cycleModule from '../lib/cycle'
 import getCycleInfo from '../lib/cycle-length'
+import {stats as labels} from './labels'
 
 export default class Stats extends Component {
   render() {
     const allMensesStarts = cycleModule().getAllMensesStarts()
-    const statsText = determineStatsText(allMensesStarts)
+    const atLeastOneCycle = allMensesStarts.length > 1
+    let cycleLengths
+    let numberOfCycles
+    let cycleInfo
+    if (atLeastOneCycle) {
+      cycleLengths = getCycleLength(allMensesStarts)
+      numberOfCycles = cycleLengths.length
+      if (numberOfCycles > 1) {
+        cycleInfo = getCycleInfo(cycleLengths)
+      }
+    }
     return (
       <ScrollView>
         <View>
-          <Text style={styles.stats}>{statsText}</Text>
+          {!atLeastOneCycle &&
+            <Text style={styles.statsIntro}>{labels.emptyStats}</Text>
+          }
+          {atLeastOneCycle && numberOfCycles === 1 &&
+            <Text style={styles.statsIntro}>{labels.oneCycleStats(cycleLengths[0])}</Text>
+          }
+          {atLeastOneCycle && numberOfCycles > 1 && <View>
+            <Text style={styles.statsIntro}>{labels.getBasisOfStats(numberOfCycles)}</Text>
+            <View style={styles.statsRow}>
+              <Text style={styles.statsLabelLeft}>{labels.averageLabel}</Text>
+              <Text style={styles.statsLabelRight}>{cycleInfo.mean + ' ' + labels.daysLabel}</Text>
+            </View>
+            <View style={styles.statsRow}>
+              <Text style={styles.statsLabelLeft}>{labels.minLabel}</Text>
+              <Text style={styles.statsLabelRight}>{cycleInfo.minimum + ' ' + labels.daysLabel}</Text>
+            </View>
+            <View style={styles.statsRow}>
+              <Text style={styles.statsLabelLeft}>{labels.maxLabel}</Text>
+              <Text style={styles.statsLabelRight}>{cycleInfo.maximum + ' ' + labels.daysLabel}</Text>
+            </View>
+            <View style={styles.statsRow}>
+              <Text style={styles.statsLabelLeft}>{labels.stdLabel}</Text>
+              <Text style={styles.statsLabelRight}>{cycleInfo.stdDeviation + ' ' + labels.daysLabel}</Text>
+            </View>
+          </View>}
         </View>
       </ScrollView>
     )
@@ -31,21 +66,4 @@ function getCycleLength(cycleStartDates) {
     cycleLengths.push(cycleStart.until(nextCycleStart, ChronoUnit.DAYS))
   }
   return cycleLengths
-}
-
-function determineStatsText(allMensesStarts) {
-  const emptyStats = 'At least one completed cycle is needed to present you with stats here.'
-  if (allMensesStarts.length < 2) {
-    return emptyStats
-  } else {
-    const cycleLengths = getCycleLength(allMensesStarts)
-    const numberOfCycles = cycleLengths.length
-    if (numberOfCycles === 1) {
-      return `You have documented one cycle of ${cycleLengths[0]} days.`
-    }
-    const cycleInfo = getCycleInfo(cycleLengths)
-    const statsText = `Stats are based on ${numberOfCycles} completed cycles.\n\n\
-    Average cycle length: ${cycleInfo.mean} days\n\nShortest cycle: ${cycleInfo.minimum} days\nLongest cycle: ${cycleInfo.maximum} days\nMedian length (meaning 50% of cycles are of this length or shorter): ${cycleInfo.median} days\nStandard deviation: ${cycleInfo.stdDeviation}`
-    return statsText
-  }
 }

index.js

@@ -1,4 +1,4 @@
 import { AppRegistry } from 'react-native'
-import App from './app'
+import App from './components/app'
 
 AppRegistry.registerComponent('home', () => App)

package-lock.json

@@ -3721,8 +3721,8 @@
       "integrity": "sha512-z8H8/diyk76B7q5wg+Ud0+CqzcAF3mBBI/bA5ne5zrRUUIvNkJY//D3BqyH571KuAC4Nr7Rw7CjWX4r0y9DvNg==",
       "optional": true,
       "requires": {
-        "nan": "^2.9.2",
-        "node-pre-gyp": "^0.10.0"
+        "nan": "2.10.0",
+        "node-pre-gyp": "0.10.0"
       },
       "dependencies": {
         "abbrev": {
@@ -3744,19 +3744,21 @@
           "bundled": true,
           "optional": true,
           "requires": {
-            "delegates": "^1.0.0",
-            "readable-stream": "^2.0.6"
+            "delegates": "1.0.0",
+            "readable-stream": "2.3.6"
           }
         },
         "balanced-match": {
           "version": "1.0.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
+          "optional": true,
           "requires": {
-            "balanced-match": "^1.0.0",
+            "balanced-match": "1.0.0",
             "concat-map": "0.0.1"
           }
         },
@@ -3767,15 +3769,18 @@
         },
         "code-point-at": {
           "version": "1.1.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -3810,7 +3815,7 @@
           "bundled": true,
           "optional": true,
           "requires": {
-            "minipass": "^2.2.1"
+            "minipass": "2.2.4"
           }
         },
         "fs.realpath": {
@@ -3823,14 +3828,14 @@
           "bundled": true,
           "optional": true,
           "requires": {
-            "aproba": "^1.0.3",
-            "console-control-strings": "^1.0.0",
-            "has-unicode": "^2.0.0",
-            "object-assign": "^4.1.0",
-            "signal-exit": "^3.0.0",
-            "string-width": "^1.0.1",
-            "strip-ansi": "^3.0.1",
-            "wide-align": "^1.1.0"
+            "aproba": "1.2.0",
+            "console-control-strings": "1.1.0",
+            "has-unicode": "2.0.1",
+            "object-assign": "4.1.1",
+            "signal-exit": "3.0.2",
+            "string-width": "1.0.2",
+            "strip-ansi": "3.0.1",
+            "wide-align": "1.1.2"
           }
         },
         "glob": {
@@ -3838,12 +3843,12 @@
           "bundled": true,
           "optional": true,
           "requires": {
-            "fs.realpath": "^1.0.0",
-            "inflight": "^1.0.4",
-            "inherits": "2",
-            "minimatch": "^3.0.4",
-            "once": "^1.3.0",
-            "path-is-absolute": "^1.0.0"
+            "fs.realpath": "1.0.0",
+            "inflight": "1.0.6",
+            "inherits": "2.0.3",
+            "minimatch": "3.0.4",
+            "once": "1.4.0",
+            "path-is-absolute": "1.0.1"
           }
         },
         "has-unicode": {
@@ -3856,7 +3861,7 @@
           "bundled": true,
           "optional": true,
           "requires": {
-            "safer-buffer": "^2.1.0"
+            "safer-buffer": "2.1.2"
           }
         },
         "ignore-walk": {
@@ -3864,7 +3869,7 @@
           "bundled": true,
           "optional": true,
           "requires": {
-            "minimatch": "^3.0.4"
+            "minimatch": "3.0.4"
           }
         },
         "inflight": {
@@ -3872,13 +3877,14 @@
           "bundled": true,
           "optional": true,
           "requires": {
-            "once": "^1.3.0",
-            "wrappy": "1"
+            "once": "1.4.0",
+            "wrappy": "1.0.2"
           }
         },
         "inherits": {
           "version": "2.0.3",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -3888,8 +3894,9 @@
         "is-fullwidth-code-point": {
           "version": "1.0.0",
           "bundled": true,
+          "optional": true,
           "requires": {
-            "number-is-nan": "^1.0.0"
+            "number-is-nan": "1.0.1"
           }
         },
         "isarray": {
@@ -3900,20 +3907,23 @@
         "minimatch": {
           "version": "3.0.4",
           "bundled": true,
+          "optional": true,
           "requires": {
-            "brace-expansion": "^1.1.7"
+            "brace-expansion": "1.1.11"
           }
         },
         "minimist": {
           "version": "0.0.8",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
+          "optional": true,
           "requires": {
-            "safe-buffer": "^5.1.1",
-            "yallist": "^3.0.0"
+            "safe-buffer": "5.1.1",
+            "yallist": "3.0.2"
           }
         },
         "minizlib": {
@@ -3921,12 +3931,13 @@
           "bundled": true,
           "optional": true,
           "requires": {
-            "minipass": "^2.2.1"
+            "minipass": "2.2.4"
           }
         },
         "mkdirp": {
           "version": "0.5.1",
           "bundled": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -3941,9 +3952,9 @@
           "bundled": true,
           "optional": true,
           "requires": {
-            "debug": "^2.1.2",
-            "iconv-lite": "^0.4.4",
-            "sax": "^1.2.4"
+            "debug": "2.6.9",
+            "iconv-lite": "0.4.21",
+            "sax": "1.2.4"
           }
         },
         "node-pre-gyp": {
@@ -3951,16 +3962,16 @@
           "bundled": true,
           "optional": true,
           "requires": {
-            "detect-libc": "^1.0.2",
-            "mkdirp": "^0.5.1",
-            "needle": "^2.2.0",
-            "nopt": "^4.0.1",
-            "npm-packlist": "^1.1.6",
-            "npmlog": "^4.0.2",
-            "rc": "^1.1.7",
-            "rimraf": "^2.6.1",
-            "semver": "^5.3.0",
-            "tar": "^4"
+            "detect-libc": "1.0.3",
+            "mkdirp": "0.5.1",
+            "needle": "2.2.0",
+            "nopt": "4.0.1",
+            "npm-packlist": "1.1.10",
+            "npmlog": "4.1.2",
+            "rc": "1.2.7",
+            "rimraf": "2.6.2",
+            "semver": "5.5.0",
+            "tar": "4.4.1"
           }
         },
         "nopt": {
@@ -3968,8 +3979,8 @@
           "bundled": true,
           "optional": true,
           "requires": {
-            "abbrev": "1",
-            "osenv": "^0.1.4"
+            "abbrev": "1.1.1",
+            "osenv": "0.1.5"
           }
         },
         "npm-bundled": {
@@ -3982,8 +3993,8 @@
           "bundled": true,
           "optional": true,
           "requires": {
-            "ignore-walk": "^3.0.1",
-            "npm-bundled": "^1.0.1"
+            "ignore-walk": "3.0.1",
+            "npm-bundled": "1.0.3"
           }
         },
         "npmlog": {
@@ -3991,15 +4002,16 @@
           "bundled": true,
           "optional": true,
           "requires": {
-            "are-we-there-yet": "~1.1.2",
-            "console-control-strings": "~1.1.0",
-            "gauge": "~2.7.3",
-            "set-blocking": "~2.0.0"
+            "are-we-there-yet": "1.1.4",
+            "console-control-strings": "1.1.0",
+            "gauge": "2.7.4",
+            "set-blocking": "2.0.0"
           }
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -4009,8 +4021,9 @@
         "once": {
           "version": "1.4.0",
           "bundled": true,
+          "optional": true,
           "requires": {
-            "wrappy": "1"
+            "wrappy": "1.0.2"
           }
         },
         "os-homedir": {
@@ -4028,8 +4041,8 @@
           "bundled": true,
           "optional": true,
           "requires": {
-            "os-homedir": "^1.0.0",
-            "os-tmpdir": "^1.0.0"
+            "os-homedir": "1.0.2",
+            "os-tmpdir": "1.0.2"
           }
         },
         "path-is-absolute": {
@@ -4047,10 +4060,10 @@
           "bundled": true,
           "optional": true,
           "requires": {
-            "deep-extend": "^0.5.1",
-            "ini": "~1.3.0",
-            "minimist": "^1.2.0",
-            "strip-json-comments": "~2.0.1"
+            "deep-extend": "0.5.1",
+            "ini": "1.3.5",
+            "minimist": "1.2.0",
+            "strip-json-comments": "2.0.1"
           },
           "dependencies": {
             "minimist": {
@@ -4065,13 +4078,13 @@
           "bundled": true,
           "optional": true,
           "requires": {
-            "core-util-is": "~1.0.0",
-            "inherits": "~2.0.3",
-            "isarray": "~1.0.0",
-            "process-nextick-args": "~2.0.0",
-            "safe-buffer": "~5.1.1",
-            "string_decoder": "~1.1.1",
-            "util-deprecate": "~1.0.1"
+            "core-util-is": "1.0.2",
+            "inherits": "2.0.3",
+            "isarray": "1.0.0",
+            "process-nextick-args": "2.0.0",
+            "safe-buffer": "5.1.1",
+            "string_decoder": "1.1.1",
+            "util-deprecate": "1.0.2"
           }
         },
         "rimraf": {
@@ -4079,7 +4092,7 @@
           "bundled": true,
           "optional": true,
           "requires": {
-            "glob": "^7.0.5"
+            "glob": "7.1.2"
           }
         },
         "safe-buffer": {
@@ -4114,10 +4127,11 @@
         "string-width": {
           "version": "1.0.2",
           "bundled": true,
+          "optional": true,
           "requires": {
-            "code-point-at": "^1.0.0",
-            "is-fullwidth-code-point": "^1.0.0",
-            "strip-ansi": "^3.0.0"
+            "code-point-at": "1.1.0",
+            "is-fullwidth-code-point": "1.0.0",
+            "strip-ansi": "3.0.1"
           }
         },
         "string_decoder": {
@@ -4125,14 +4139,14 @@
           "bundled": true,
           "optional": true,
           "requires": {
-            "safe-buffer": "~5.1.0"
+            "safe-buffer": "5.1.1"
           }
         },
         "strip-ansi": {
           "version": "3.0.1",
           "bundled": true,
           "requires": {
-            "ansi-regex": "^2.0.0"
+            "ansi-regex": "2.1.1"
           }
         },
         "strip-json-comments": {
@@ -4145,13 +4159,13 @@
           "bundled": true,
           "optional": true,
           "requires": {
-            "chownr": "^1.0.1",
-            "fs-minipass": "^1.2.5",
-            "minipass": "^2.2.4",
-            "minizlib": "^1.1.0",
-            "mkdirp": "^0.5.0",
-            "safe-buffer": "^5.1.1",
-            "yallist": "^3.0.2"
+            "chownr": "1.0.1",
+            "fs-minipass": "1.2.5",
+            "minipass": "2.2.4",
+            "minizlib": "1.1.0",
+            "mkdirp": "0.5.1",
+            "safe-buffer": "5.1.1",
+            "yallist": "3.0.2"
           }
         },
         "util-deprecate": {
@@ -4164,7 +4178,7 @@
           "bundled": true,
           "optional": true,
           "requires": {
-            "string-width": "^1.0.2"
+            "string-width": "1.0.2"
           }
         },
         "wrappy": {

styles/index.js

@@ -1,10 +1,10 @@
 import { StyleSheet } from 'react-native'
 
+export const primaryColor = '#ff7e5f'
+export const secondaryColor = '#351c4d'
+export const fontOnPrimaryColor = 'white'
+
 export default StyleSheet.create({
-  container: {
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
   welcome: {
     fontSize: 20,
     margin: 30,
@@ -12,31 +12,72 @@ export default StyleSheet.create({
     textAlignVertical: 'center'
   },
   dateHeader: {
-    fontSize: 20,
+    fontSize: 18,
     fontWeight: 'bold',
-    margin: 15,
-    color: 'white',
+    color: fontOnPrimaryColor,
     textAlign: 'center',
-    textAlignVertical: 'center'
   },
   cycleDayNumber: {
-    fontSize: 18,
+    fontSize: 15,
+    color: fontOnPrimaryColor,
     textAlign: 'center',
-    textAlignVertical: 'center'
+    marginLeft: 15
   },
   symptomDayView: {
     fontSize: 20,
     textAlignVertical: 'center'
   },
+  symptomBoxImage: {
+    width: 50,
+    height: 50
+  },
   radioButton: {
     fontSize: 18,
     margin: 8,
     textAlign: 'center',
     textAlignVertical: 'center'
   },
-  symptomEditView: {
-    justifyContent: 'space-between',
-    marginHorizontal: 15
+  symptomBoxesView: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'space-evenly'
+  },
+  symptomBox: {
+    borderColor: secondaryColor,
+    borderStyle: 'solid',
+    borderWidth: 1,
+    borderTopLeftRadius: 10,
+    borderTopRightRadius: 10,
+    alignItems: 'center',
+    marginTop: '10%',
+    paddingVertical: '6%',
+    marginHorizontal: 1,
+    width: 110,
+    height: 80,
+  },
+  symptomBoxActive: {
+    backgroundColor: secondaryColor,
+  },
+  symptomTextActive: {
+    color: fontOnPrimaryColor
+  },
+  symptomDataBox: {
+    borderColor: secondaryColor,
+    borderStyle: 'solid',
+    borderLeftWidth: 1,
+    borderRightWidth: 1,
+    borderBottomWidth: 1,
+    borderBottomLeftRadius: 10,
+    borderBottomRightRadius: 10,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: '3%',
+    marginHorizontal: 1,
+    width: 110,
+    height: 50,
+  },
+  symptomDataText: {
+    fontSize: 12
   },
   symptomEditRow: {
     justifyContent: 'space-between',
@@ -49,16 +90,38 @@ export default StyleSheet.create({
     alignItems: 'center',
     height: 50
   },
-  cycleDayDateView: {
-    justifyContent: 'center',
-    backgroundColor: 'steelblue'
+  header: {
+    backgroundColor: primaryColor,
+    paddingVertical: 18,
+    paddingHorizontal: 15,
+    alignItems: 'center',
+    justifyContent: 'center'
   },
-  cycleDayNumberView: {
-    justifyContent: 'center',
-    backgroundColor: 'skyblue',
-    marginBottom: 15,
+  menu: {
+    backgroundColor: primaryColor,
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    flexDirection: 'row'
+  },
+  menuItem: {
+    alignItems: 'center',
+    flex: 1,
     paddingVertical: 15
   },
+  menuText: {
+    color: fontOnPrimaryColor
+  },
+  menuTextInActive: {
+    color: 'lightgrey'
+  },
+  headerCycleDay: {
+    flexDirection: 'row',
+    justifyContent: 'space-between'
+  },
+  navigationArrow: {
+    fontSize: 60,
+    color: fontOnPrimaryColor
+  },
   homeButtons: {
     marginHorizontal: 15
   },
@@ -85,16 +148,16 @@ export default StyleSheet.create({
     marginLeft: 'auto',
     marginRight: 'auto'
   },
-  stats: {
+  statsIntro: {
     fontSize: 18,
-    margin: 30,
+    margin: 10,
     textAlign: 'left',
     textAlignVertical: 'center'
   },
   settingsSegment: {
     backgroundColor: 'lightgrey',
     padding: 10,
-    marginTop: 10,
+    marginBottom: 10,
   },
   settingsSegmentTitle: {
     fontWeight: 'bold'
@@ -108,7 +171,44 @@ export default StyleSheet.create({
   settingsButtonText: {
     color: 'white'
   },
-  warning: {
-    color: 'red'
+  statsRow: {
+    flexDirection: 'row',
+    width: '100%'
+  },
+  statsLabelLeft: {
+    fontSize: 18,
+    width: '60%',
+    textAlign: 'left',
+    textAlignVertical: 'center',
+    marginLeft: 10
+  },
+  statsLabelRight: {
+    fontSize: 18,
+    textAlign: 'left',
+    textAlignVertical: 'center'
+  },
+  menuLabel: {
+    fontSize: 15,
+    color: fontOnPrimaryColor
+  },
+})
+
+export const iconStyles = {
+  navigationArrow: {
+    size: 45,
+    color: fontOnPrimaryColor
+  },
+  symptomBox: {
+    size: 40
+  },
+  symptomBoxActive: {
+    color: fontOnPrimaryColor
+  },
+  menuIcon: {
+    size: 20,
+    color: fontOnPrimaryColor
+  },
+  menuIconInactive: {
+    color: 'lightgrey'
   }
-})
+}

test/cycle-length.spec.js

@@ -17,7 +17,7 @@ describe('getCycleLengthStats', () => {
       stdDeviation: 53.06
     }
     expect(result).to.eql(expectedResult)
-  })
+  }),
 
   it('works for a simple even-numbered array', () => {
     const cycleLengths = [4, 1, 15, 2, 20, 5]
@@ -30,7 +30,8 @@ describe('getCycleLengthStats', () => {
       stdDeviation: 7.78
     }
     expect(result).to.eql(expectedResult)
-  })
+  }),
+
   it('works for an one-element array', () => {
     const cycleLengths = [42]
     const result = cycleInfo(cycleLengths)
@@ -42,20 +43,60 @@ describe('getCycleLengthStats', () => {
       stdDeviation: null
     }
     expect(result).to.eql(expectedResult)
+  }),
+
+  describe('works for more realistic examples', () => {
+    it('1 day difference between shortest and longest period', () => {
+      const cycleLengths = [28, 29, 28, 28, 28, 29, 28, 28, 28, 29, 29, 28]
+      const result = cycleInfo(cycleLengths)
+      const expectedResult = {
+        minimum: 28,
+        maximum: 29,
+        mean: 28.33,
+        median: 28,
+        stdDeviation: 0.49
+      }
+      expect(result).to.eql(expectedResult)
+    }),
+    it('3 days difference between shortest and longest period', () => {
+      const cycleLengths = [28, 29, 28, 28, 27, 30, 28, 27, 28, 28, 29, 27]
+      const result = cycleInfo(cycleLengths)
+      const expectedResult = {
+        minimum: 27,
+        maximum: 30,
+        mean: 28.08,
+        median: 28,
+        stdDeviation: 0.90
+      }
+      expect(result).to.eql(expectedResult)
+    }),
+    it('8 days difference between shortest and longest period', () => {
+      const cycleLengths = [28, 32, 29, 27, 28, 26, 33, 28, 29, 34, 27, 29]
+      const result = cycleInfo(cycleLengths)
+      const expectedResult = {
+        minimum: 26,
+        maximum: 34,
+        mean: 29.17,
+        median: 28.5,
+        stdDeviation: 2.52
+      }
+      expect(result).to.eql(expectedResult)
+    })
   })
+
   describe('when args are wrong', () => {
     it('throws when arg object is an empty array', () => {
       const cycleLengths = []
       expect(() => cycleInfo(cycleLengths).to.throw(AssertionError))
-    })
+    }),
     it('throws when arg object is not in right format', () => {
       const wrongObject = { hello: 'world' }
       expect(() => cycleInfo(wrongObject).to.throw(AssertionError))
-    })
+    }),
     it('throws when arg array contains a string', () => {
       const wrongElement = [4, 1, 15, '2', 20, 5]
       expect(() => cycleInfo(wrongElement).to.throw(AssertionError))
-    })
+    }),
     it('throws when arg array contains a NaN', () => {
       const wrongElement = [4, 1, 15, NaN, 20, 5]
       expect(() => cycleInfo(wrongElement).to.throw(AssertionError))

test/cycle.spec.js

@@ -343,4 +343,82 @@ describe('getCycleForDay', () => {
       },
     ])
   })
+})
+
+describe('getAllMensesStart', () => {
+  it('works for one cycle start', () => {
+    const cycleDaysSortedByDate = [
+      {
+        date: '2018-05-01',
+        bleeding: { value: 1 }
+      }
+    ]
+
+    const { getAllMensesStarts } = cycleModule({
+      cycleDaysSortedByDate,
+      bleedingDaysSortedByDate: cycleDaysSortedByDate.filter(d => d.bleeding)
+    })
+    const result = getAllMensesStarts()
+    expect(result.length).to.eql(1)
+    expect(result).to.eql(['2018-05-01'])
+  }),
+  it('works for two cycle starts', () => {
+    const cycleDaysSortedByDate = [
+      {
+        date: '2018-06-02',
+        bleeding: { value: 2 }
+      },
+      {
+        date: '2018-06-01',
+        bleeding: { value: 2 }
+      },
+      {
+        date: '2018-05-01',
+        bleeding: { value: 2 }
+      }
+    ]
+
+    const { getAllMensesStarts } = cycleModule({
+      cycleDaysSortedByDate,
+      bleedingDaysSortedByDate: cycleDaysSortedByDate.filter(d => d.bleeding)
+    })
+    const result = getAllMensesStarts()
+    expect(result.length).to.eql(2)
+    expect(result).to.eql(['2018-06-01', '2018-05-01'])
+  }),
+  it('works for two cycle starts with excluded data', () => {
+    const cycleDaysSortedByDate = [
+      {
+        date: '2018-06-01',
+        bleeding: { value: 2 }
+      },
+      {
+        date: '2018-05-01',
+        bleeding: { value: 2 }
+      },
+      {
+        date: '2018-04-31',
+        bleeding: { value: 2 , exclude: true}
+      },
+    ]
+
+    const { getAllMensesStarts } = cycleModule({
+      cycleDaysSortedByDate,
+      bleedingDaysSortedByDate: cycleDaysSortedByDate.filter(d => d.bleeding)
+    })
+    const result = getAllMensesStarts()
+    expect(result.length).to.eql(2)
+    expect(result).to.eql(['2018-06-01', '2018-05-01'])
+  }),
+  it('returns an empty array if no bleeding days are given', () => {
+    const cycleDaysSortedByDate = [ {} ]
+
+    const { getAllMensesStarts } = cycleModule({
+      cycleDaysSortedByDate,
+      bleedingDaysSortedByDate: cycleDaysSortedByDate.filter(d => d.bleeding)
+    })
+    const result = getAllMensesStarts()
+    expect(result.length).to.eql(0)
+    expect(result).to.eql([])
+  })
 })