Add app text component and remove radio button dep

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 })