Merge branch '156-make-components-like-prettier-radio-buttons' into 'master'

Resolve "make components like prettier radio buttons"

Closes #156

See merge request bloodyhealth/drip!68

components/app-text.js

@@ -0,0 +1,23 @@
+import React, { Component } from 'react'
+import { Text } from 'react-native'
+import styles from "../styles"
+
+export class AppText extends Component {
+  render() {
+    return (
+      <Text style={[styles.appText, this.props.style]}>
+        {this.props.children}
+      </Text>
+    )
+  }
+}
+
+export class SymptomSectionHeader extends Component {
+  render() {
+    return (
+      <AppText style={styles.symptomViewHeading}>
+        {this.props.children}
+      </AppText>
+    )
+  }
+}

components/chart/chart.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { View, FlatList, Text } from 'react-native'
+import { View, FlatList } from 'react-native'
 import range from 'date-range'
 import { LocalDate } from 'js-joda'
 import { makeYAxisLabels, normalizeToScale, makeHorizontalGrid } from './y-axis'
@@ -9,6 +9,7 @@ import { getCycleDay, cycleDaysSortedByDate, getAmountOfCycleDays } from '../../
 import styles from './styles'
 import { scaleObservable } from '../../local-storage'
 import config from '../../config'
+import { AppText } from '../app-text'
 
 export default class CycleChart extends Component {
   constructor(props) {
@@ -100,7 +101,7 @@ export default class CycleChart extends Component {
       >
         {!this.state.chartLoaded &&
           <View style={{width: '100%', justifyContent: 'center', alignItems: 'center'}}>
-            <Text>Loading...</Text>
+            <AppText>Loading...</AppText>
           </View>
         }
 

components/chart/y-axis.js

@@ -1,8 +1,9 @@
 import React from 'react'
-import { Text, View } from 'react-native'
+import { View } from 'react-native'
 import config from '../../config'
 import styles from './styles'
 import { scaleObservable } from '../../local-storage'
+import { AppText } from '../app-text'
 
 export function makeYAxisLabels(columnHeight) {
   const units = config.temperatureScale.units
@@ -15,11 +16,11 @@ export function makeYAxisLabels(columnHeight) {
     // to reliably place the label vertically centered to the grid
     if (scaleMax - i * units === 37) console.log(y)
     return (
-      <Text
+      <AppText
         style={[style, {top: y - 8}]}
         key={i}>
         {scaleMax - i * units}
-      </Text>
+      </AppText>
     )
   })
 }

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

@@ -2,7 +2,6 @@ import React, { Component } from 'react'
 import {
   ScrollView,
   View,
-  Text,
   TouchableOpacity,
   Dimensions
 } from 'react-native'
@@ -12,18 +11,18 @@ import { getOrCreateCycleDay } from '../../db'
 import cycleModule from '../../lib/cycle'
 import Icon from 'react-native-vector-icons/FontAwesome'
 import styles, { iconStyles } from '../../styles'
-import {
+import * as labels from './labels/labels'
-  bleeding as bleedingLabels,
+import { AppText } from '../app-text'
-  mucusFeeling as feelingLabels,
+
-  mucusTexture as textureLabels,
+const bleedingLabels = labels.bleeding
-  mucusNFP as computeSensiplanMucusLabels,
+const feelingLabels = labels.mucus.feeling.categories
-  cervixOpening as openingLabels,
+const textureLabels = labels.mucus.texture.categories
-  cervixFirmness as firmnessLabels,
+const openingLabels = labels.cervix.opening.categories
-  cervixPosition as positionLabels,
+const firmnessLabels = labels.cervix.firmness.categories
-  intensity as intensityLabels,
+const positionLabels = labels.cervix.position.categories
-  pain as painLabels,
+const intensityLabels = labels.intensity
-  sex as sexLabels
+const sexLabels = labels.sex
-} from './labels/labels'
+const painLabels = labels.pain.categories
 
 export default class CycleDayOverView extends Component {
   constructor(props) {
@@ -51,7 +50,9 @@ export default class CycleDayOverView extends Component {
     const cycleDay = this.state.cycleDay
     const getCycleDayNumber = cycleModule().getCycleDayNumber
     const cycleDayNumber = getCycleDayNumber(cycleDay.date)
-    const dateInFuture = LocalDate.now().isBefore(LocalDate.parse(this.state.cycleDay.date))
+    const dateInFuture = LocalDate
+      .now()
+      .isBefore(LocalDate.parse(this.state.cycleDay.date))
     return (
       <View style={{ flex: 1 }}>
         <Header
@@ -98,16 +99,16 @@ export default class CycleDayOverView extends Component {
               data={getLabel('sex', cycleDay.sex)}
               disabled={dateInFuture}
             />
-            <SymptomBox
-              title='Note'
-              onPress={() => this.navigate('NoteEditView')}
-              data={getLabel('note', cycleDay.note)}
-            />
             <SymptomBox
               title='Pain'
               onPress={() => this.navigate('PainEditView')}
               data={getLabel('pain', cycleDay.pain)}
             />
+            <SymptomBox
+              title='Note'
+              onPress={() => this.navigate('NoteEditView')}
+              data={getLabel('note', cycleDay.note)}
+            />
             {/*  this is just to make the last row adhere to the grid
         (and) because there are no pseudo properties in RN */}
             <FillerBoxes />
@@ -119,7 +120,7 @@ export default class CycleDayOverView extends Component {
 }
 
 function getLabel(symptomName, symptom) {
-  const labels = {
+  const l = {
     bleeding: bleeding => {
       if (typeof bleeding.value === 'number') {
         let bleedingLabel = `${bleedingLabels[bleeding.value]}`
@@ -140,7 +141,7 @@ function getLabel(symptomName, symptom) {
       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]}`
+        mucusLabel += `\n${labels.mucusNFP[mucus.value]}`
         if (mucus.exclude) mucusLabel = `(${mucusLabel})`
         return mucusLabel
       }
@@ -210,7 +211,7 @@ function getLabel(symptomName, symptom) {
   }
 
   if (!symptom) return
-  const label = labels[symptomName](symptom)
+  const label = l[symptomName](symptom)
   if (label.length < 45) return label
   return label.slice(0, 42) + '...'
 }
@@ -221,21 +222,28 @@ class SymptomBox extends Component {
     const d = this.props.data
     const boxActive = d ? styles.symptomBoxActive : {}
     const iconActive = d ? iconStyles.symptomBoxActive : {}
-    const iconStyle = Object.assign({}, iconStyles.symptomBox, iconActive, disabledStyle)
+    const iconStyle = Object.assign(
+      {}, iconStyles.symptomBox, iconActive, disabledStyle
+    )
     const textActive = d ? styles.symptomTextActive : {}
     const disabledStyle = this.props.disabled ? styles.symptomInFuture : {}
 
     return (
-      <TouchableOpacity onPress={this.props.onPress} disabled={this.props.disabled}>
+      <TouchableOpacity
+        onPress={this.props.onPress}
+        disabled={this.props.disabled}
+      >
         <View style={[styles.symptomBox, boxActive, disabledStyle]}>
           <Icon
             name='thermometer'
             {...iconStyle}
           />
-          <Text style={[textActive, disabledStyle]}>{this.props.title}</Text>
+          <AppText style={[textActive, disabledStyle]}>
+            {this.props.title}
+          </AppText>
         </View>
         <View style={[styles.symptomDataBox, disabledStyle]}>
-          <Text style={styles.symptomDataText}>{this.props.data}</Text>
+          <AppText style={styles.symptomDataText}>{this.props.data}</AppText>
         </View>
       </TouchableOpacity>
     )

components/cycle-day/labels/labels.js

@@ -1,11 +1,39 @@
 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 cervixOpening = ['closed', 'medium', 'open']
-export const cervixFirmness = ['hard', 'soft']
-export const cervixPosition = ['low', 'medium', 'high']
 export const intensity = ['low', 'medium', 'high']
+
+export const cervix = {
+  opening: {
+    categories: ['closed', 'medium', 'open'],
+    explainer: 'Is your cervix open or closed?'
+  },
+  firmness: {
+    categories: ['hard', 'soft'],
+    explainer: "When it's hard it might feel like the tip of your nose"
+  },
+  position: {
+    categories: ['low', 'medium', 'high'],
+    explainer: 'How high up in the vagina is the cervix?'
+  }
+}
+
+export const mucus = {
+  feeling: {
+    categories: ['dry', 'nothing', 'wet', 'slippery'],
+    explainer: 'What does your vaginal entrance feel like?'
+  },
+  texture: {
+    categories: ['nothing', 'creamy', 'egg white'],
+    explainer: "Looking at and touching your cervical mucus, which describes it best?"
+  },
+  excludeExplainer: "You can exclude this value if you don't want to use it for fertility detection"
+}
+
+export const desire = {
+  header: 'Intensity',
+  explainer: 'How would you rate your sexual desire?'
+}
+
 export const sex = {
   solo: 'Solo',
   partner: 'Partner',
@@ -15,19 +43,24 @@ export const sex = {
   patch: 'Patch',
   ring: 'Ring',
   implant: 'Implant',
-  other: 'Other'
+  other: 'Other',
+  activityExplainer: 'Were you sexually active today?',
+  contraceptiveExplainer: 'Did you use contraceptives?'
 }
 
 export const pain = {
-  cramps: 'Cramps',
+  categories: {
-  ovulationPain: 'Ovulation pain',
+    cramps: 'Cramps',
-  headache: 'Headache',
+    ovulationPain: 'Ovulation pain',
-  backache: 'Backache',
+    headache: 'Headache',
-  nausea: 'Nausea',
+    backache: 'Backache',
-  tenderBreasts: 'Tender breasts',
+    nausea: 'Nausea',
-  migraine: 'Migraine',
+    tenderBreasts: 'Tender breasts',
-  other: 'Other',
+    migraine: 'Migraine',
-  note: 'Note'
+    other: 'Other',
+    note: 'Note',
+  },
+  explainer: 'How did your body feel today?'
 }
 
 export const fertilityStatus = {
@@ -40,5 +73,14 @@ export const fertilityStatus = {
 export const temperature = {
   outOfRangeWarning: 'This temperature value is out of the current range for the temperature chart. You can change the range in the settings.',
   outOfAbsoluteRangeWarning: 'This temperature value is too high or low to be shown on the temperature chart.',
-  saveAnyway: 'Save anyway'
+  saveAnyway: 'Save anyway',
+  temperature: {
+    explainer: 'Take your temperature right after waking up, before getting out of bed'
+  },
+  note: {
+    explainer: 'Is there anything that could have influenced this value, such as bad sleep or alcohol consumption?'
+  },
+  excludeExplainer: "You can exclude this value if you don't want to use it for fertility detection"
 }
+
+export const noteExplainer = "Anything you want to add for the day?"

components/cycle-day/select-box-group.js

@@ -0,0 +1,34 @@
+import React, { Component } from 'react'
+import {
+  View,
+  TouchableOpacity,
+} from 'react-native'
+import styles from '../../styles'
+import { AppText } from '../app-text'
+
+export default class SelectBoxGroup extends Component {
+  render() {
+    return (
+      <View style={styles.selectBoxSection}>
+        {this.props.data.map(({ label, stateKey }) => {
+          const style = [styles.selectBox]
+          const textStyle = []
+          if (this.props.optionsState[stateKey]) {
+            style.push(styles.selectBoxActive)
+            textStyle.push(styles.selectBoxTextActive)
+          }
+          return (
+            <TouchableOpacity
+              onPress={() => this.props.onSelect(stateKey)}
+              key={stateKey}
+            >
+              <View style={style}>
+                <AppText style={textStyle}>{label}</AppText>
+              </View>
+            </TouchableOpacity>
+          )
+        })}
+      </View>
+    )
+  }
+}

components/cycle-day/select-tab-group.js

@@ -0,0 +1,46 @@
+import React, { Component } from 'react'
+import {
+  View,
+  TouchableOpacity,
+} from 'react-native'
+import styles from '../../styles'
+import { AppText } from '../app-text'
+
+export default class SelectTabGroup extends Component {
+  render() {
+    return (
+      <View style={styles.selectTabGroup}>
+        {
+          this.props.buttons.map(({ label, value }, i) => {
+            let firstOrLastStyle
+            if (i === this.props.buttons.length - 1) {
+              firstOrLastStyle = styles.selectTabLast
+            } else if (i === 0) {
+              firstOrLastStyle = styles.selectTabFirst
+            }
+            let activeStyle
+            const isActive = value === this.props.active
+            if (isActive) activeStyle = styles.selectTabActive
+            return (
+              <TouchableOpacity
+                onPress={() => this.props.onSelect(value)}
+                key={i}
+                activeOpacity={1}
+              >
+                <View style={styles.radioButtonTextGroup}>
+                  <View style={[
+                    styles.selectTab,
+                    firstOrLastStyle,
+                    activeStyle
+                  ]}>
+                    <AppText style={activeStyle}>{label}</AppText>
+                  </View>
+                </View>
+              </TouchableOpacity>
+            )
+          })
+        }
+      </View>
+    )
+  }
+}

components/cycle-day/symptoms/bleeding.js

@@ -1,15 +1,15 @@
 import React, { Component } from 'react'
 import {
   View,
-  Text,
   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'
+import SelectTabGroup from '../select-tab-group'
+import SymptomSection from './symptom-section'
 
 export default class Bleeding extends Component {
   constructor(props) {
@@ -35,30 +35,29 @@ export default class Bleeding extends Component {
     ]
     return (
       <View style={{ flex: 1 }}>
-        <ScrollView>
+        <ScrollView style={styles.page}>
-          <View>
+          <SymptomSection
-            <View style={styles.radioButtonRow}>
+            header="Heaviness"
-              <RadioForm
+            explainer="How heavy is the bleeding?"
-                radio_props={bleedingRadioProps}
+          >
-                initial={this.state.currentValue}
+            <SelectTabGroup
-                formHorizontal={true}
+              buttons={bleedingRadioProps}
-                labelHorizontal={false}
+              active={this.state.currentValue}
-                labelStyle={styles.radioButton}
+              onSelect={val => this.setState({ currentValue: val })}
-                onPress={(itemValue) => {
+            />
-                  this.setState({ currentValue: itemValue })
+          </SymptomSection>
-                }}
+          <SymptomSection
-              />
+            header="Exclude"
-            </View>
+            explainer="You can exclude this value if it's not menstrual bleeding"
-            <View style={styles.symptomViewRowInline}>
+            inline={true}
-              <Text style={styles.symptomDayView}>Exclude</Text>
+          >
-              <Switch
+            <Switch
-                onValueChange={(val) => {
+              onValueChange={(val) => {
-                  this.setState({ exclude: val })
+                this.setState({ exclude: val })
-                }}
+              }}
-                value={this.state.exclude}
+              value={this.state.exclude}
-              />
+            />
-            </View>
+          </SymptomSection>
-          </View>
         </ScrollView>
         <ActionButtonFooter
           symptom='bleeding'

components/cycle-day/symptoms/cervix.js

@@ -1,19 +1,15 @@
 import React, { Component } from 'react'
 import {
   View,
-  Text,
   Switch,
   ScrollView
 } from 'react-native'
-import RadioForm from 'react-native-simple-radio-button'
 import styles from '../../../styles'
 import { saveSymptom } from '../../../db'
-import {
+import { cervix as labels } from '../labels/labels'
-  cervixOpening as openingLabels,
-  cervixFirmness as firmnessLabels,
-  cervixPosition as positionLabels
-} from '../labels/labels'
 import ActionButtonFooter from './action-button-footer'
+import SelectTabGroup from '../select-tab-group'
+import SymptomSection from './symptom-section'
 
 export default class Cervix extends Component {
   constructor(props) {
@@ -36,72 +32,64 @@ export default class Cervix extends Component {
 
   render() {
     const cervixOpeningRadioProps = [
-      {label: openingLabels[0], value: 0},
+      { label: labels.opening.categories[0], value: 0 },
-      {label: openingLabels[1], value: 1},
+      { label: labels.opening.categories[1], value: 1 },
-      {label: openingLabels[2], value: 2}
+      { label: labels.opening.categories[2], value: 2 }
     ]
     const cervixFirmnessRadioProps = [
-      {label: firmnessLabels[0], value: 0 },
+      { label: labels.firmness.categories[0], value: 0 },
-      {label: firmnessLabels[1], value: 1 }
+      { label: labels.firmness.categories[1], value: 1 }
     ]
     const cervixPositionRadioProps = [
-      {label: positionLabels[0], value: 0 },
+      { label: labels.position.categories[0], value: 0 },
-      {label: positionLabels[1], value: 1 },
+      { label: labels.position.categories[1], value: 1 },
-      { label: positionLabels[2], value: 2 }
+      { label: labels.position.categories[2], value: 2 }
     ]
     return (
       <View style={{ flex: 1 }}>
-        <ScrollView>
+        <ScrollView style={styles.page}>
-          <View>
+          <SymptomSection
-            <Text style={styles.symptomDayView}>Opening</Text>
+            header="Opening"
-            <View style={styles.radioButtonRow}>
+            explainer={labels.opening.explainer}
-              <RadioForm
+          >
-                radio_props={cervixOpeningRadioProps}
+            <SelectTabGroup
-                initial={this.state.opening}
+              buttons={cervixOpeningRadioProps}
-                formHorizontal={true}
+              active={this.state.opening}
-                labelHorizontal={false}
+              onSelect={val => this.setState({ opening: val })}
-                labelStyle={styles.radioButton}
+            />
-                onPress={(itemValue) => {
+          </SymptomSection>
-                  this.setState({ opening: itemValue })
+          <SymptomSection
-                }}
+            header="Firmness"
-              />
+            explainer={labels.firmness.explainer}
-            </View>
+          >
-            <Text style={styles.symptomDayView}>Firmness</Text>
+            <SelectTabGroup
-            <View style={styles.radioButtonRow}>
+              buttons={cervixFirmnessRadioProps}
-              <RadioForm
+              active={this.state.firmness}
-                radio_props={cervixFirmnessRadioProps}
+              onSelect={val => this.setState({ firmness: val })}
-                initial={this.state.firmness}
+            />
-                formHorizontal={true}
+          </SymptomSection>
-                labelHorizontal={false}
+          <SymptomSection
-                labelStyle={styles.radioButton}
+            header="Position"
-                onPress={(itemValue) => {
+            explainer={labels.position.explainer}
-                  this.setState({ firmness: itemValue })
+          >
-                }}
+            <SelectTabGroup
-              />
+              buttons={cervixPositionRadioProps}
-            </View>
+              active={this.state.position}
-            <Text style={styles.symptomDayView}>Position</Text>
+              onSelect={val => this.setState({ position: val })}
-            <View style={styles.radioButtonRow}>
+            />
-              <RadioForm
+          </SymptomSection>
-                radio_props={cervixPositionRadioProps}
+          <SymptomSection
-                initial={this.state.position}
+            header="Exclude"
-                formHorizontal={true}
+            explainer="You can exclude this value if you don't want to use it for fertility detection"
-                labelHorizontal={false}
+            inline={true}
-                labelStyle={styles.radioButton}
+          >
-                onPress={(itemValue) => {
+            <Switch
-                  this.setState({ position: itemValue })
+              onValueChange={(val) => {
-                }}
+                this.setState({ exclude: val })
-              />
+              }}
-            </View>
+              value={this.state.exclude}
-            <View style={styles.symptomViewRowInline}>
+            />
-              <Text style={styles.symptomDayView}>Exclude</Text>
+          </SymptomSection>
-              <Switch
-                onValueChange={(val) => {
-                  this.setState({ exclude: val })
-                }}
-                value={this.state.exclude}
-              />
-            </View>
-          </View>
         </ScrollView>
         <ActionButtonFooter
           symptom='cervix'

components/cycle-day/symptoms/desire.js

@@ -3,11 +3,12 @@ import {
   View,
   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 { intensity, desire } from '../labels/labels'
 import ActionButtonFooter from './action-button-footer'
+import SelectTabGroup from '../select-tab-group'
+import SymptomSection from './symptom-section'
 
 export default class Desire extends Component {
   constructor(props) {
@@ -23,27 +24,23 @@ export default class Desire extends Component {
 
   render() {
     const desireRadioProps = [
-      { label: labels[0], value: 0 },
+      { label: intensity[0], value: 0 },
-      { label: labels[1], value: 1 },
+      { label: intensity[1], value: 1 },
-      { label: labels[2], value: 2 }
+      { label: intensity[2], value: 2 }
     ]
     return (
       <View style={{ flex: 1 }}>
-        <ScrollView>
+        <ScrollView style={styles.page}>
-          <View>
+          <SymptomSection
-            <View style={styles.radioButtonRow}>
+            header={desire.header}
-              <RadioForm
+            explainer={desire.explainer}
-                radio_props={desireRadioProps}
+          >
-                initial={this.state.currentValue}
+            <SelectTabGroup
-                formHorizontal={true}
+              buttons={desireRadioProps}
-                labelHorizontal={false}
+              active={this.state.currentValue}
-                labelStyle={styles.radioButton}
+              onSelect={val => this.setState({ currentValue: val })}
-                onPress={(itemValue) => {
+            />
-                  this.setState({ currentValue: itemValue })
+          </SymptomSection>
-                }}
-              />
-            </View>
-          </View>
         </ScrollView>
         <ActionButtonFooter
           symptom='desire'

components/cycle-day/symptoms/mucus.js

@@ -1,19 +1,16 @@
 import React, { Component } from 'react'
 import {
   View,
-  Text,
   Switch,
   ScrollView
 } from 'react-native'
-import RadioForm from 'react-native-simple-radio-button'
 import styles from '../../../styles'
 import { saveSymptom } from '../../../db'
-import {
+import { mucus as labels } from '../labels/labels'
-  mucusFeeling as feelingLabels,
-  mucusTexture as textureLabels
-} from '../labels/labels'
 import computeSensiplanValue from '../../../lib/sensiplan-mucus'
 import ActionButtonFooter from './action-button-footer'
+import SelectTabGroup from '../select-tab-group'
+import SymptomSection from './symptom-section'
 
 
 export default class Mucus extends Component {
@@ -36,66 +33,63 @@ export default class Mucus extends Component {
   }
 
   render() {
-    const mucusFeelingRadioProps = [
+    const mucusFeeling = [
-      { label: feelingLabels[0], value: 0 },
+      { label: labels.feeling.categories[0], value: 0 },
-      { label: feelingLabels[1], value: 1 },
+      { label: labels.feeling.categories[1], value: 1 },
-      { label: feelingLabels[2], value: 2 },
+      { label: labels.feeling.categories[2], value: 2 },
-      { label: feelingLabels[3], value: 3 }
+      { label: labels.feeling.categories[3], value: 3 }
     ]
-    const mucusTextureRadioProps = [
+    const mucusTexture = [
-      { label: textureLabels[0], value: 0 },
+      { label: labels.texture.categories[0], value: 0 },
-      { label: textureLabels[1], value: 1 },
+      { label: labels.texture.categories[1], value: 1 },
-      { label: textureLabels[2], value: 2 }
+      { label: labels.texture.categories[2], value: 2 }
     ]
     return (
       <View style={{ flex: 1 }}>
-        <ScrollView>
+        <ScrollView style={styles.page}>
-          <View>
+          <SymptomSection
-            <Text style={styles.symptomDayView}>Feeling</Text>
+            header='Feeling'
-            <View style={styles.radioButtonRow}>
+            explainer={labels.feeling.explainer}
-              <RadioForm
+          >
-                radio_props={mucusFeelingRadioProps}
+            <SelectTabGroup
-                initial={this.state.feeling}
+              buttons={mucusFeeling}
-                formHorizontal={true}
+              onSelect={val => this.setState({ feeling: val })}
-                labelHorizontal={false}
+              active={this.state.feeling}
-                labelStyle={styles.radioButton}
+            />
-                onPress={(itemValue) => {
+          </SymptomSection>
-                  this.setState({ feeling: itemValue })
+          <SymptomSection
-                }}
+            header='Texture'
-              />
+            explainer={labels.texture.explainer}
-            </View>
+          >
-            <Text style={styles.symptomDayView}>Texture</Text>
+            <SelectTabGroup
-            <View style={styles.radioButtonRow}>
+              buttons={mucusTexture}
-              <RadioForm
+              onSelect={val => this.setState({ texture: val })}
-                radio_props={mucusTextureRadioProps}
+              active={this.state.texture}
-                initial={this.state.texture}
+            />
-                formHorizontal={true}
+          </SymptomSection>
-                labelHorizontal={false}
+          <SymptomSection
-                labelStyle={styles.radioButton}
+            header="Exclude"
-                onPress={(itemValue) => {
+            explainer={labels.excludeExplainer}
-                  this.setState({ texture: itemValue })
+            inline={true}
-                }}
+          >
-              />
+            <Switch
-            </View>
+              onValueChange={(val) => {
-            <View style={styles.symptomViewRowInline}>
+                this.setState({ exclude: val })
-              <Text style={styles.symptomDayView}>Exclude</Text>
+              }}
-              <Switch
+              value={this.state.exclude}
-                onValueChange={(val) => {
+            />
-                  this.setState({ exclude: val })
+          </SymptomSection>
-                }}
-                value={this.state.exclude}
-              />
-            </View>
-          </View>
         </ScrollView>
         <ActionButtonFooter
           symptom='mucus'
           cycleDay={this.cycleDay}
           saveAction={() => {
+            const feeling = this.state.feeling
+            const texture = this.state.texture
             saveSymptom('mucus', this.cycleDay, {
-              feeling: this.state.feeling,
+              feeling,
-              texture: this.state.texture,
+              texture,
-              value: computeSensiplanValue(this.state.feeling, this.state.texture),
+              value: computeSensiplanValue(feeling, texture),
               exclude: this.state.exclude
             })
           }}

components/cycle-day/symptoms/note.js

@@ -8,6 +8,8 @@ import {
 import styles from '../../../styles'
 import { saveSymptom } from '../../../db'
 import ActionButtonFooter from './action-button-footer'
+import SymptomSection from './symptom-section'
+import { noteExplainer } from '../labels/labels'
 
 export default class Note extends Component {
   constructor(props) {
@@ -24,8 +26,10 @@ export default class Note extends Component {
   render() {
     return (
       <View style={{ flex: 1 }}>
-        <ScrollView>
+        <ScrollView style={styles.page}>
-          <View style={styles.symptomViewRow}>
+          <SymptomSection
+            explainer={noteExplainer}
+          >
             <TextInput
               autoFocus={!this.state.currentValue}
               multiline={true}
@@ -35,7 +39,7 @@ export default class Note extends Component {
               }}
               value={this.state.currentValue}
             />
-          </View>
+          </SymptomSection>
         </ScrollView>
         <ActionButtonFooter
           symptom='note'

components/cycle-day/symptoms/pain.js

@@ -1,17 +1,42 @@
 import React, { Component } from 'react'
 import {
-  CheckBox,
   ScrollView,
-  Text,
   TextInput,
   View
 } from 'react-native'
-import styles from '../../../styles'
 import { saveSymptom } from '../../../db'
-import {
+import { pain as labels } from '../labels/labels'
-  pain as painLabels
-} from '../labels/labels'
 import ActionButtonFooter from './action-button-footer'
+import SelectBoxGroup from '../select-box-group'
+import SymptomSection from './symptom-section'
+import styles from '../../../styles'
+
+const categories = labels.categories
+const boxes = [{
+  label: categories.cramps,
+  stateKey: 'cramps'
+}, {
+  label: categories.ovulationPain,
+  stateKey: 'ovulationPain'
+}, {
+  label: categories.headache,
+  stateKey: 'headache'
+}, {
+  label: categories.backache,
+  stateKey: 'backache'
+}, {
+  label: categories.nausea,
+  stateKey: 'nausea'
+}, {
+  label: categories.tenderBreasts,
+  stateKey: 'tenderBreasts'
+}, {
+  label: categories.migraine,
+  stateKey: 'migraine'
+}, {
+  label: categories.other,
+  stateKey: 'other'
+}]
 
 export default class Pain extends Component {
   constructor(props) {
@@ -26,92 +51,26 @@ export default class Pain extends Component {
     }
   }
 
+  toggleState = (key) => {
+    const curr = this.state[key]
+    this.setState({[key]: !curr})
+    if (key === 'other' && !curr) {
+      this.setState({focusTextArea: true})
+    }
+  }
+
   render() {
     return (
       <View style={{ flex: 1 }}>
-        <ScrollView>
+        <ScrollView style={styles.page}>
-          <View>
+          <SymptomSection
-            <View style={styles.symptomViewRowInline}>
+            explainer={labels.explainer}
-              <Text style={styles.symptomDayView}>{painLabels.cramps}</Text>
+          >
-              <CheckBox
+            <SelectBoxGroup
-                value={this.state.cramps}
+              data={boxes}
-                onValueChange={(val) => {
+              onSelect={this.toggleState}
-                  this.setState({cramps: val})
+              optionsState={this.state}
-                }}
+            />
-              />
-              <Text style={styles.symptomDayView}>
-                {painLabels.ovulationPain}
-              </Text>
-              <CheckBox
-                value={this.state.ovulationPain}
-                onValueChange={(val) => {
-                  this.setState({ovulationPain: val})
-                }}
-              />
-            </View>
-            <View style={styles.symptomViewRowInline}>
-              <Text style={styles.symptomDayView}>
-                {painLabels.headache}
-              </Text>
-              <CheckBox
-                value={this.state.headache}
-                onValueChange={(val) => {
-                  this.setState({headache: val})
-                }}
-              />
-              <Text style={styles.symptomDayView}>
-                {painLabels.backache}
-              </Text>
-              <CheckBox
-                value={this.state.backache}
-                onValueChange={(val) => {
-                  this.setState({backache: val})
-                }}
-              />
-            </View>
-            <View style={styles.symptomViewRowInline}>
-              <Text style={styles.symptomDayView}>
-                {painLabels.nausea}
-              </Text>
-              <CheckBox
-                value={this.state.nausea}
-                onValueChange={(val) => {
-                  this.setState({nausea: val})
-                }}
-              />
-              <Text style={styles.symptomDayView}>
-                {painLabels.tenderBreasts}
-              </Text>
-              <CheckBox
-                value={this.state.tenderBreasts}
-                onValueChange={(val) => {
-                  this.setState({tenderBreasts: val})
-                }}
-              />
-            </View>
-            <View style={styles.symptomViewRowInline}>
-              <Text style={styles.symptomDayView}>
-                {painLabels.migraine}
-              </Text>
-              <CheckBox
-                value={this.state.migraine}
-                onValueChange={(val) => {
-                  this.setState({migraine: val})
-                }}
-              />
-              <Text style={styles.symptomDayView}>
-                {painLabels.other}
-              </Text>
-              <CheckBox
-                value={this.state.other}
-                onValueChange={(val) => {
-                  this.setState({
-                    other: val,
-                    focusTextArea: true
-                  })
-                }}
-              />
-            </View>
             { this.state.other &&
               <TextInput
                 autoFocus={this.state.focusTextArea}
@@ -123,7 +82,7 @@ export default class Pain extends Component {
                 }}
               />
             }
-          </View>
+          </SymptomSection>
         </ScrollView>
         <ActionButtonFooter
           symptom='pain'

components/cycle-day/symptoms/sex.js

@@ -1,15 +1,46 @@
 import React, { Component } from 'react'
 import {
-  CheckBox,
-  Text,
   TextInput,
   View,
   ScrollView
 } from 'react-native'
 import styles from '../../../styles'
 import { saveSymptom } from '../../../db'
-import { sex as sexLabels } from '../labels/labels'
+import { sex as labels } from '../labels/labels'
 import ActionButtonFooter from './action-button-footer'
+import SelectBoxGroup from '../select-box-group'
+import SymptomSection from './symptom-section'
+
+const sexBoxes = [{
+  label: labels.solo,
+  stateKey: 'solo'
+}, {
+  label: labels.partner,
+  stateKey: 'partner'
+}]
+
+const contraceptiveBoxes = [{
+  label: labels.condom,
+  stateKey: 'condom'
+}, {
+  label: labels.pill,
+  stateKey: 'pill'
+}, {
+  label: labels.iud,
+  stateKey: 'iud'
+}, {
+  label: labels.patch,
+  stateKey: 'patch'
+}, {
+  label: labels.ring,
+  stateKey: 'ring'
+}, {
+  label: labels.implant,
+  stateKey: 'implant'
+}, {
+  label: labels.other,
+  stateKey: 'other'
+}]
 
 export default class Sex extends Component {
   constructor(props) {
@@ -26,117 +57,50 @@ export default class Sex extends Component {
     }
   }
 
-  render() {
+  toggleState = (key) => {
+    const curr = this.state[key]
+    this.setState({[key]: !curr})
+    if (key === 'other' && !curr) {
+      this.setState({focusTextArea: true})
+    }
+  }
 
+  render() {
     return (
       <View style={{ flex: 1 }}>
-        <ScrollView>
+        <ScrollView style={styles.page}>
-          <View>
+          <SymptomSection
-            <View style={styles.symptomViewRowInline}>
+            header="Activity"
-              <Text style={styles.symptomDayView}>{sexLabels.solo}</Text>
+            explainer={labels.activityExplainer}
-              <CheckBox
+          >
-                value={this.state.solo}
+            <SelectBoxGroup
-                onValueChange={(val) => {
+              data={sexBoxes}
-                  this.setState({ solo: val })
+              onSelect={this.toggleState}
-                }}
+              optionsState={this.state}
-              />
+            />
-              <Text style={styles.symptomDayView}>
+          </SymptomSection>
-                {sexLabels.partner}
+          <SymptomSection
-              </Text>
+            header="Contraceptives"
-              <CheckBox
+            explainer={labels.contraceptiveExplainer}
-                value={this.state.partner}
+          >
-                onValueChange={(val) => {
+            <SelectBoxGroup
-                  this.setState({ partner: val })
+              data={contraceptiveBoxes}
-                }}
+              onSelect={this.toggleState}
-              />
+              optionsState={this.state}
-            </View>
+            />
-            <Text style={styles.symptomDayView}>CONTRACEPTIVES</Text>
+          </SymptomSection>
-            <View style={styles.symptomViewRowInline}>
+
-              <Text style={styles.symptomDayView}>
+          {this.state.other &&
-                {sexLabels.condom}
+            <TextInput
-              </Text>
+              autoFocus={this.state.focusTextArea}
-              <CheckBox
+              multiline={true}
-                value={this.state.condom}
+              placeholder="Enter"
-                onValueChange={(val) => {
+              value={this.state.note}
-                  this.setState({ condom: val })
+              onChangeText={(val) => {
-                }}
+                this.setState({ note: val })
-              />
+              }}
-              <Text style={styles.symptomDayView}>
+            />
-                {sexLabels.pill}
+          }
-              </Text>
-              <CheckBox
-                value={this.state.pill}
-                onValueChange={(val) => {
-                  this.setState({ pill: val })
-                }}
-              />
-            </View>
-            <View style={styles.symptomViewRowInline}>
-              <Text style={styles.symptomDayView}>
-                {sexLabels.iud}
-              </Text>
-              <CheckBox
-                value={this.state.iud}
-                onValueChange={(val) => {
-                  this.setState({ iud: val })
-                }}
-              />
-              <Text style={styles.symptomDayView}>
-                {sexLabels.patch}
-              </Text>
-              <CheckBox
-                value={this.state.patch}
-                onValueChange={(val) => {
-                  this.setState({ patch: val })
-                }}
-              />
-            </View>
-            <View style={styles.symptomViewRowInline}>
-              <Text style={styles.symptomDayView}>
-                {sexLabels.ring}
-              </Text>
-              <CheckBox
-                value={this.state.ring}
-                onValueChange={(val) => {
-                  this.setState({ ring: val })
-                }}
-              />
-              <Text style={styles.symptomDayView}>
-                {sexLabels.implant}
-              </Text>
-              <CheckBox
-                value={this.state.implant}
-                onValueChange={(val) => {
-                  this.setState({ implant: val })
-                }}
-              />
-            </View>
-            <View style={styles.symptomViewRowInline}>
-              <Text style={styles.symptomDayView}>
-                {sexLabels.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>
         </ScrollView>
         <ActionButtonFooter
           symptom='sex'

components/cycle-day/symptoms/symptom-section.js

@@ -0,0 +1,31 @@
+import React, { Component } from 'react'
+import { View } from 'react-native'
+import { SymptomSectionHeader, AppText } from '../../app-text'
+
+export default class SymptomSection extends Component {
+  render() {
+    const p = this.props
+    let placeHeadingInline
+    if (!p.explainer && p.inline) {
+      placeHeadingInline = {
+        flexDirection: 'row',
+        alignItems: "center"
+      }
+    }
+    return (
+      <View style={placeHeadingInline}>
+        <SymptomSectionHeader flex={1}>{p.header}</SymptomSectionHeader>
+        <View
+          flexDirection={p.inline ? 'row' : null}
+          flex={1}
+          alignItems={p.inline ? 'center' : null}
+        >
+          <View flex={1}>
+            <AppText>{p.explainer}</AppText>
+          </View>
+          {p.children}
+        </View>
+      </View>
+    )
+  }
+}

components/cycle-day/symptoms/temperature.js

@@ -1,7 +1,6 @@
 import React, { Component } from 'react'
 import {
   View,
-  Text,
   TextInput,
   Switch,
   Keyboard,
@@ -13,11 +12,12 @@ import DateTimePicker from 'react-native-modal-datetime-picker-nevo'
 import { getPreviousTemperature, saveSymptom } from '../../../db'
 import styles from '../../../styles'
 import { LocalTime, ChronoUnit } from 'js-joda'
-import { temperature as tempLabels } from '../labels/labels'
+import { temperature as labels } from '../labels/labels'
 import { scaleObservable } from '../../../local-storage'
 import { shared } from '../../labels'
 import ActionButtonFooter from './action-button-footer'
 import config from '../../../config'
+import SymptomSection from './symptom-section'
 
 const minutes = ChronoUnit.MINUTES
 
@@ -72,9 +72,9 @@ export default class Temp extends Component {
     const scale = scaleObservable.value
     let warningMsg
     if (value < absolute.min || value > absolute.max) {
-      warningMsg = tempLabels.outOfAbsoluteRangeWarning
+      warningMsg = labels.outOfAbsoluteRangeWarning
     } else if (value < scale.min || value > scale.max) {
-      warningMsg = tempLabels.outOfRangeWarning
+      warningMsg = labels.outOfRangeWarning
     }
 
     if (warningMsg) {
@@ -96,18 +96,23 @@ export default class Temp extends Component {
   render() {
     return (
       <View style={{ flex: 1 }}>
-        <ScrollView>
+        <ScrollView style={styles.page}>
           <View>
-            <View style={styles.symptomViewRowInline}>
+            <SymptomSection
-              <Text style={styles.symptomDayView}>Temperature (°C)</Text>
+              header="Temperature (°C)"
+              explainer={labels.temperature.explainer}
+              inline={true}
+            >
               <TempInput
                 value={this.state.temperature}
                 setState={(val) => this.setState(val)}
                 isSuggestion={this.state.isSuggestion}
               />
-            </View>
+            </SymptomSection>
-            <View style={styles.symptomViewRowInline}>
+            <SymptomSection
-              <Text style={styles.symptomDayView}>Time</Text>
+              header="Time"
+              inline={true}
+            >
               <TextInput
                 style={styles.temperatureTextInput}
                 onFocus={() => {
@@ -116,42 +121,44 @@ export default class Temp extends Component {
                 }}
                 value={this.state.time}
               />
-            </View>
+              <DateTimePicker
-            <DateTimePicker
+                mode="time"
-              mode="time"
+                isVisible={this.state.isTimePickerVisible}
-              isVisible={this.state.isTimePickerVisible}
+                onConfirm={jsDate => {
-              onConfirm={jsDate => {
+                  this.setState({
-                this.setState({
+                    time: `${jsDate.getHours()}:${jsDate.getMinutes()}`,
-                  time: `${jsDate.getHours()}:${jsDate.getMinutes()}`,
+                    isTimePickerVisible: false
-                  isTimePickerVisible: false
+                  })
-                })
+                }}
-              }}
+                onCancel={() => this.setState({ isTimePickerVisible: false })}
-              onCancel={() => this.setState({ isTimePickerVisible: false })}
+              />
-            />
+            </SymptomSection>
-            <View style={styles.symptomViewRowInline}>
+            <SymptomSection
-              <Text style={styles.symptomDayView}>Note</Text>
+              header="Note"
-            </View>
+              explainer={labels.note.explainer}
-            <View>
+            >
               <TextInput
-                style={styles.temperatureTextInput}
                 multiline={true}
                 autoFocus={this.state.focusTextArea}
-                placeholder="enter"
+                placeholder="Enter"
                 value={this.state.note}
                 onChangeText={(val) => {
                   this.setState({ note: val })
                 }}
               />
-            </View>
+            </SymptomSection>
-            <View style={styles.symptomViewRowInline}>
+            <SymptomSection
-              <Text style={styles.symptomDayView}>Exclude</Text>
+              header="Exclude"
+              explainer={labels.excludeExplainer}
+              inline={true}
+            >
               <Switch
                 onValueChange={(val) => {
                   this.setState({ exclude: val })
                 }}
                 value={this.state.exclude}
               />
-            </View>
+            </SymptomSection>
           </View>
         </ScrollView>
         <ActionButtonFooter

components/settings.js

@@ -4,7 +4,6 @@ import {
   TouchableOpacity,
   ScrollView,
   Alert,
-  Text,
   Switch
 } from 'react-native'
 import DateTimePicker from 'react-native-modal-datetime-picker-nevo'
@@ -23,6 +22,7 @@ import {
   tempReminderObservable,
   saveTempReminder
 } from '../local-storage'
+import { AppText } from './app-text'
 
 export default class Settings extends Component {
   constructor(props) {
@@ -35,36 +35,36 @@ export default class Settings extends Component {
       <ScrollView>
         <TempReminderPicker/>
         <View style={styles.settingsSegment}>
-          <Text style={styles.settingsSegmentTitle}>
+          <AppText style={styles.settingsSegmentTitle}>
             {labels.tempScale.segmentTitle}
-          </Text>
+          </AppText>
-          <Text>{labels.tempScale.segmentExplainer}</Text>
+          <AppText>{labels.tempScale.segmentExplainer}</AppText>
           <TempSlider/>
         </View>
         <View style={styles.settingsSegment}>
-          <Text style={styles.settingsSegmentTitle}>
+          <AppText style={styles.settingsSegmentTitle}>
             {labels.export.button}
-          </Text>
+          </AppText>
-          <Text>{labels.export.segmentExplainer}</Text>
+          <AppText>{labels.export.segmentExplainer}</AppText>
           <TouchableOpacity
             onPress={openShareDialogAndExport}
             style={styles.settingsButton}>
-            <Text style={styles.settingsButtonText}>
+            <AppText style={styles.settingsButtonText}>
               {labels.export.button}
-            </Text>
+            </AppText>
           </TouchableOpacity>
         </View>
         <View style={styles.settingsSegment}>
-          <Text style={styles.settingsSegmentTitle}>
+          <AppText style={styles.settingsSegmentTitle}>
             {labels.import.button}
-          </Text>
+          </AppText>
-          <Text>{labels.import.segmentExplainer}</Text>
+          <AppText>{labels.import.segmentExplainer}</AppText>
           <TouchableOpacity
             onPress={openImportDialogAndImport}
             style={styles.settingsButton}>
-            <Text style={styles.settingsButtonText}>
+            <AppText style={styles.settingsButtonText}>
               {labels.import.button}
-            </Text>
+            </AppText>
           </TouchableOpacity>
         </View>
       </ScrollView>
@@ -84,15 +84,15 @@ class TempReminderPicker extends Component {
         style={styles.settingsSegment}
         onPress={() => this.setState({ isTimePickerVisible: true })}
       >
-        <Text style={styles.settingsSegmentTitle}>
+        <AppText style={styles.settingsSegmentTitle}>
           {labels.tempReminder.title}
-        </Text>
+        </AppText>
         <View style={{ flexDirection: 'row', alignItems: 'center' }}>
           <View style={{ flex: 1 }}>
             {this.state.time && this.state.enabled ?
-              <Text>{labels.tempReminder.timeSet(this.state.time)}</Text>
+              <AppText>{labels.tempReminder.timeSet(this.state.time)}</AppText>
               :
-              <Text>{labels.tempReminder.noTimeSet}</Text>
+              <AppText>{labels.tempReminder.noTimeSet}</AppText>
             }
           </View>
           <Switch
@@ -160,8 +160,8 @@ class TempSlider extends Component {
   render() {
     return (
       <View style={{ alignItems: 'center' }}>
-        <Text>{`${labels.tempScale.min} ${this.state.min}`}</Text>
+        <AppText>{`${labels.tempScale.min} ${this.state.min}`}</AppText>
-        <Text>{`${labels.tempScale.max} ${this.state.max}`}</Text>
+        <AppText>{`${labels.tempScale.max} ${this.state.max}`}</AppText>
         <Slider
           values={[this.state.min, this.state.max]}
           min={config.temperatureScale.min}

components/stats.js

@@ -1,6 +1,5 @@
 import React, { Component } from 'react'
 import {
-  Text,
   View,
   ScrollView
 } from 'react-native'
@@ -9,6 +8,7 @@ import styles from '../styles/index'
 import cycleModule from '../lib/cycle'
 import {getCycleLengthStats as getCycleInfo} from '../lib/cycle-length'
 import {stats as labels} from './labels'
+import { AppText } from './app-text'
 
 export default class Stats extends Component {
   render() {
@@ -28,32 +28,32 @@ export default class Stats extends Component {
       <ScrollView>
         <View>
           {!atLeastOneCycle &&
-            <Text style={styles.statsIntro}>{labels.emptyStats}</Text>
+            <AppText style={styles.statsIntro}>{labels.emptyStats}</AppText>
           }
           {atLeastOneCycle && numberOfCycles === 1 &&
-            <Text style={styles.statsIntro}>
+            <AppText style={styles.statsIntro}>
               {labels.oneCycleStats(cycleLengths[0])}
-            </Text>
+            </AppText>
           }
           {atLeastOneCycle && numberOfCycles > 1 && <View>
-            <Text style={styles.statsIntro}>
+            <AppText style={styles.statsIntro}>
               {labels.getBasisOfStats(numberOfCycles)}
-            </Text>
+            </AppText>
             <View style={styles.statsRow}>
-              <Text style={styles.statsLabelLeft}>{labels.averageLabel}</Text>
+              <AppText style={styles.statsLabelLeft}>{labels.averageLabel}</AppText>
-              <Text style={styles.statsLabelRight}>{cycleInfo.mean + ' ' + labels.daysLabel}</Text>
+              <AppText style={styles.statsLabelRight}>{cycleInfo.mean + ' ' + labels.daysLabel}</AppText>
             </View>
             <View style={styles.statsRow}>
-              <Text style={styles.statsLabelLeft}>{labels.minLabel}</Text>
+              <AppText style={styles.statsLabelLeft}>{labels.minLabel}</AppText>
-              <Text style={styles.statsLabelRight}>{cycleInfo.minimum + ' ' + labels.daysLabel}</Text>
+              <AppText style={styles.statsLabelRight}>{cycleInfo.minimum + ' ' + labels.daysLabel}</AppText>
             </View>
             <View style={styles.statsRow}>
-              <Text style={styles.statsLabelLeft}>{labels.maxLabel}</Text>
+              <AppText style={styles.statsLabelLeft}>{labels.maxLabel}</AppText>
-              <Text style={styles.statsLabelRight}>{cycleInfo.maximum + ' ' + labels.daysLabel}</Text>
+              <AppText style={styles.statsLabelRight}>{cycleInfo.maximum + ' ' + labels.daysLabel}</AppText>
             </View>
             <View style={styles.statsRow}>
-              <Text style={styles.statsLabelLeft}>{labels.stdLabel}</Text>
+              <AppText style={styles.statsLabelLeft}>{labels.stdLabel}</AppText>
-              <Text style={styles.statsLabelRight}>{cycleInfo.stdDeviation + ' ' + labels.daysLabel}</Text>
+              <AppText style={styles.statsLabelRight}>{cycleInfo.stdDeviation + ' ' + labels.daysLabel}</AppText>
             </View>
           </View>}
         </View>

package.json

@@ -33,7 +33,6 @@
     "react-native-modal-datetime-picker-nevo": "^4.11.0",
     "react-native-push-notification": "^3.1.1",
     "react-native-share": "^1.1.0",
-    "react-native-simple-radio-button": "^2.7.1",
     "react-native-vector-icons": "^5.0.0",
     "react-navigation": "^2.0.4",
     "realm": "^2.7.1",

styles/index.js

@@ -5,6 +5,9 @@ export const secondaryColor = '#351c4d'
 export const fontOnPrimaryColor = 'white'
 
 export default StyleSheet.create({
+  appText: {
+    color: 'black'
+  },
   welcome: {
     fontSize: 20,
     margin: 30,
@@ -23,20 +26,15 @@ export default StyleSheet.create({
     textAlign: 'center',
     marginLeft: 15
   },
-  symptomDayView: {
+  symptomViewHeading: {
     fontSize: 20,
-    textAlignVertical: 'center'
+    color: 'black',
+    marginBottom: 5
   },
   symptomBoxImage: {
     width: 50,
     height: 50
   },
-  radioButton: {
-    fontSize: 18,
-    margin: 8,
-    textAlign: 'center',
-    textAlignVertical: 'center'
-  },
   symptomBoxesView: {
     flexDirection: 'row',
     flexWrap: 'wrap',
@@ -83,17 +81,6 @@ export default StyleSheet.create({
   symptomDataText: {
     fontSize: 12
   },
-  symptomEditRow: {
-    justifyContent: 'space-between',
-    marginBottom: 10,
-  },
-  symptomViewRowInline: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    marginBottom: 10,
-    alignItems: 'center',
-    height: 50
-  },
   header: {
     backgroundColor: primaryColor,
     paddingHorizontal: 15,
@@ -150,11 +137,6 @@ export default StyleSheet.create({
   symptomEditButton: {
     width: 130
   },
-  radioButtonRow: {
-    marginTop: 15,
-    marginLeft: 'auto',
-    marginRight: 'auto'
-  },
   statsIntro: {
     fontSize: 18,
     margin: 10,
@@ -198,6 +180,57 @@ export default StyleSheet.create({
     fontSize: 15,
     color: fontOnPrimaryColor
   },
+  selectBox: {
+    backgroundColor: 'lightgrey',
+    marginRight: 7,
+    marginVertical: 5,
+    paddingHorizontal: 15,
+    paddingVertical: 10,
+    borderRadius: 10
+  },
+  selectBoxActive: {
+    backgroundColor: secondaryColor,
+    color: fontOnPrimaryColor
+  },
+  selectBoxTextActive: {
+    color: fontOnPrimaryColor
+  },
+  selectBoxSection: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    marginVertical: 10,
+  },
+  selectTabGroup: {
+    marginVertical: 10,
+    flexDirection: 'row'
+  },
+  selectTab: {
+    backgroundColor: 'lightgrey',
+    borderStyle: 'solid',
+    borderLeftWidth: 1,
+    paddingVertical: 10,
+    paddingHorizontal: 15,
+    borderColor: 'white',
+    marginBottom: 3,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  selectTabActive: {
+    backgroundColor: secondaryColor,
+    color: fontOnPrimaryColor
+  },
+  selectTabLast: {
+    borderTopRightRadius: 10,
+    borderBottomRightRadius: 10,
+  },
+  selectTabFirst: {
+    borderTopLeftRadius: 10,
+    borderBottomLeftRadius: 10,
+    borderLeftWidth: null
+  },
+  page: {
+    marginHorizontal: 10
+  }
 })
 
 export const iconStyles = {
@@ -217,5 +250,5 @@ export const iconStyles = {
   },
   menuIconInactive: {
     color: 'lightgrey'
-  }
+  },
 }