Add app text component and remove radio button dep

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 RadioButtonGroup from '../radio-button-group'
+import { SymptomSectionHeader, AppText } from '../../app-text'
 
 export default class Bleeding extends Component {
   constructor(props) {
@@ -37,20 +37,18 @@ export default class Bleeding extends Component {
       <View style={{ flex: 1 }}>
         <ScrollView style={styles.page}>
           <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.symptomViewHeading}>Exclude</Text>
+            <SymptomSectionHeader>Heaviness</SymptomSectionHeader>
+            <AppText>How heavy is the bleeding?</AppText>
+            <RadioButtonGroup
+              buttons={bleedingRadioProps}
+              active={this.state.currentValue}
+              onSelect={val => this.setState({ currentValue: val })}
+            />
+            <SymptomSectionHeader>Exclude</SymptomSectionHeader>
+            <View flexDirection={'row'}>
+              <View flex={1}>
+                <AppText>You can exclude this value if it's not menstrual bleeding</AppText>
+              </View>
               <Switch
                 onValueChange={(val) => {
                   this.setState({ exclude: val })

components/cycle-day/symptoms/cervix.js

@@ -1,11 +1,9 @@
 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 {
@@ -14,6 +12,8 @@ import {
   cervixPosition as positionLabels
 } from '../labels/labels'
 import ActionButtonFooter from './action-button-footer'
+import RadioButtonGroup from '../radio-button-group'
+import { SymptomSectionHeader } from '../../app-text'
 
 export default class Cervix extends Component {
   constructor(props) {
@@ -53,47 +53,26 @@ export default class Cervix extends Component {
       <View style={{ flex: 1 }}>
         <ScrollView style={styles.page}>
           <View>
-            <Text style={styles.symptomViewHeading}>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.symptomViewHeading}>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.symptomViewHeading}>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>
+            <SymptomSectionHeader>Opening</SymptomSectionHeader>
+            <RadioButtonGroup
+              buttons={cervixOpeningRadioProps}
+              active={this.state.opening}
+              onSelect={val => this.setState({ opening: val })}
+            />
+            <SymptomSectionHeader>Firmness</SymptomSectionHeader>
+            <RadioButtonGroup
+              buttons={cervixFirmnessRadioProps}
+              active={this.state.firmness}
+              onSelect={val => this.setState({ firmness: val })}
+            />
+            <SymptomSectionHeader>Position</SymptomSectionHeader>
+            <RadioButtonGroup
+              buttons={cervixPositionRadioProps}
+              active={this.state.position}
+              onSelect={val => this.setState({ position: val })}
+            />
             <View style={styles.symptomViewRowInline}>
-              <Text style={styles.symptomViewHeading}>Exclude</Text>
+              <SymptomSectionHeader>Exclude</SymptomSectionHeader>
               <Switch
                 onValueChange={(val) => {
                   this.setState({ exclude: val })

components/cycle-day/symptoms/desire.js

@@ -3,11 +3,11 @@ 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 ActionButtonFooter from './action-button-footer'
+import RadioButtonGroup from '../radio-button-group'
 
 export default class Desire extends Component {
   constructor(props) {
@@ -31,18 +31,11 @@ export default class Desire extends Component {
       <View style={{ flex: 1 }}>
         <ScrollView style={styles.page}>
           <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>
+            <RadioButtonGroup
+              buttons={desireRadioProps}
+              acitve={this.state.currentValue}
+              onSelect={val => this.setState({ currentValue: val })}
+            />
           </View>
         </ScrollView>
         <ActionButtonFooter

components/cycle-day/symptoms/mucus.js

@@ -1,7 +1,6 @@
 import React, { Component } from 'react'
 import {
   View,
-  Text,
   Switch,
   ScrollView
 } from 'react-native'
@@ -14,6 +13,7 @@ import {
 import computeSensiplanValue from '../../../lib/sensiplan-mucus'
 import ActionButtonFooter from './action-button-footer'
 import RadioButtonGroup from '../radio-button-group'
+import { SymptomSectionHeader } from '../../app-text'
 
 
 export default class Mucus extends Component {
@@ -51,24 +51,20 @@ export default class Mucus extends Component {
       <View style={{ flex: 1 }}>
         <ScrollView style={styles.page}>
           <View>
-            <Text style={styles.symptomViewHeading}>Feeling</Text>
-            <View style={styles.radioButtonRow}>
-              <RadioButtonGroup
-                buttons={mucusFeeling}
-                onSelect={val => this.setState({feeling: val})}
-                active={this.state.feeling}
-              />
-            </View>
-            <Text style={styles.symptomViewHeading}>Texture</Text>
-            <View style={styles.radioButtonRow}>
-              <RadioButtonGroup
-                buttons={mucusTexture}
-                onSelect={val => this.setState({texture: val})}
-                active={this.state.texture}
-              />
-            </View>
+            <SymptomSectionHeader>Feeling</SymptomSectionHeader>
+            <RadioButtonGroup
+              buttons={mucusFeeling}
+              onSelect={val => this.setState({ feeling: val })}
+              active={this.state.feeling}
+            />
+            <SymptomSectionHeader>Texture</SymptomSectionHeader>
+            <RadioButtonGroup
+              buttons={mucusTexture}
+              onSelect={val => this.setState({ texture: val })}
+              active={this.state.texture}
+            />
             <View style={styles.symptomViewRowInline}>
-              <Text style={styles.symptomViewHeading}>Exclude</Text>
+              <SymptomSectionHeader>Exclude</SymptomSectionHeader>
               <Switch
                 onValueChange={(val) => {
                   this.setState({ exclude: val })

components/cycle-day/symptoms/sex.js

@@ -1,6 +1,5 @@
 import React, { Component } from 'react'
 import {
-  Text,
   TextInput,
   View,
   ScrollView
@@ -13,6 +12,7 @@ import {
 } from '../labels/labels'
 import ActionButtonFooter from './action-button-footer'
 import SelectBox from '../select-box'
+import { SymptomSectionHeader } from '../../app-text'
 
 const sexBoxes = [{
   label: activityLabels.solo,
@@ -79,22 +79,18 @@ export default class Sex extends Component {
     return (
       <View style={{ flex: 1 }}>
         <ScrollView style={styles.page}>
-          <Text style={styles.symptomViewHeading}>Activity</Text>
-          <View style={styles.selectBoxSection}>
-            {this.makeSelectBoxes(sexBoxes)}
-          </View>
-          <Text style={styles.symptomViewHeading}>Contraceptives</Text>
-          <View style={styles.selectBoxSection}>
-            {this.makeSelectBoxes(contraceptiveBoxes)}
-            <SelectBox
-              value={this.state.other}
-              label={contraceptiveLabels.other}
-              onPress={() => {
-                this.toggleState('other')
-                this.setState({ focusTextArea: true })
-              }}
-            />
-          </View>
+          <SymptomSectionHeader>Activity</SymptomSectionHeader>
+          {this.makeSelectBoxes(sexBoxes)}
+          <SymptomSectionHeader>Contraceptives</SymptomSectionHeader>
+          {this.makeSelectBoxes(contraceptiveBoxes)}
+          <SelectBox
+            value={this.state.other}
+            label={contraceptiveLabels.other}
+            onPress={() => {
+              this.toggleState('other')
+              this.setState({ focusTextArea: true })
+            }}
+          />
           {this.state.other &&
             <TextInput
               autoFocus={this.state.focusTextArea}

components/cycle-day/symptoms/temperature.js

@@ -1,7 +1,6 @@
 import React, { Component } from 'react'
 import {
   View,
-  Text,
   TextInput,
   Switch,
   Keyboard,
@@ -18,6 +17,7 @@ import { scaleObservable } from '../../../local-storage'
 import { shared } from '../../labels'
 import ActionButtonFooter from './action-button-footer'
 import config from '../../../config'
+import { SymptomSectionHeader } from '../../app-text'
 
 const minutes = ChronoUnit.MINUTES
 
@@ -99,7 +99,7 @@ export default class Temp extends Component {
         <ScrollView style={styles.page}>
           <View>
             <View style={styles.symptomViewRowInline}>
-              <Text style={styles.symptomViewHeading}>Temperature (°C)</Text>
+              <SymptomSectionHeader>Temperature (°C)</SymptomSectionHeader>
               <TempInput
                 value={this.state.temperature}
                 setState={(val) => this.setState(val)}
@@ -107,7 +107,7 @@ export default class Temp extends Component {
               />
             </View>
             <View style={styles.symptomViewRowInline}>
-              <Text style={styles.symptomViewHeading}>Time</Text>
+              <SymptomSectionHeader>Time</SymptomSectionHeader>
               <TextInput
                 style={styles.temperatureTextInput}
                 onFocus={() => {
@@ -128,9 +128,7 @@ export default class Temp extends Component {
               }}
               onCancel={() => this.setState({ isTimePickerVisible: false })}
             />
-            <View style={styles.symptomViewRowInline}>
-              <Text style={styles.symptomViewHeading}>Note</Text>
-            </View>
+            <SymptomSectionHeader>Note</SymptomSectionHeader>
             <View>
               <TextInput
                 style={styles.temperatureTextInput}
@@ -144,7 +142,7 @@ export default class Temp extends Component {
               />
             </View>
             <View style={styles.symptomViewRowInline}>
-              <Text style={styles.symptomViewHeading}>Exclude</Text>
+              <SymptomSectionHeader>Exlude</SymptomSectionHeader>
               <Switch
                 onValueChange={(val) => {
                   this.setState({ exclude: val })