First attempt for radio buttons

components/cycle-day/radio-button-group.js

@@ -0,0 +1,36 @@
+import React, { Component } from 'react'
+import {
+  View,
+  Text,
+  TouchableOpacity,
+} from 'react-native'
+import styles from '../../styles'
+
+export default class RadioButton extends Component {
+  render() {
+    return (
+      <View style={styles.radioButtonGroup}>
+        {
+          this.props.buttons.map(({ label, value }) => {
+            const circleStyle = [styles.radioButton]
+            if (value === this.props.active) {
+              circleStyle.push(styles.radioButtonActive)
+            }
+            return (
+              <TouchableOpacity
+                onPress={() => this.props.onSelect(value)}
+                key={value}
+                activeOpacity={1}
+              >
+                <View style={styles.radioButtonTextGroup}>
+                  <View style={circleStyle} />
+                  <Text>{label}</Text>
+                </View>
+              </TouchableOpacity>
+            )
+          })
+        }
+      </View>
+    )
+  }
+}

components/cycle-day/symptoms/mucus.js

@@ -5,7 +5,6 @@ import {
   Switch,
   ScrollView
 } from 'react-native'
-import RadioForm from 'react-native-simple-radio-button'
 import styles from '../../../styles'
 import { saveSymptom } from '../../../db'
 import {
@@ -14,7 +13,7 @@ import {
 } from '../labels/labels'
 import computeSensiplanValue from '../../../lib/sensiplan-mucus'
 import ActionButtonFooter from './action-button-footer'
-import SelectBox from '../select-box'
+import RadioButtonGroup from '../radio-button-group'
 
 
 export default class Mucus extends Component {
@@ -37,13 +36,13 @@ export default class Mucus extends Component {
   }
 
   render() {
-    const mucusFeelingBoxes = [
+    const mucusFeeling = [
-      { label: feelingLabels[0], value: 0 },
+      { label: feelingLabels[0], stateKey: ''},
       { label: feelingLabels[1], value: 1 },
       { label: feelingLabels[2], value: 2 },
       { label: feelingLabels[3], value: 3 }
     ]
-    const mucusTextureRadioProps = [
+    const mucusTexture = [
       { label: textureLabels[0], value: 0 },
       { label: textureLabels[1], value: 1 },
       { label: textureLabels[2], value: 2 }
@@ -54,11 +53,19 @@ export default class Mucus extends Component {
           <View>
             <Text style={styles.symptomViewHeading}>Feeling</Text>
             <View style={styles.radioButtonRow}>
-              {makeSelectBoxes(mucusFeelingBoxes, 'feeling')}
+              <RadioButtonGroup
+                buttons={mucusFeeling}
+                onSelect={val => this.setState({feeling: val})}
+                active={this.state.feeling}
+              />
             </View>
             <Text style={styles.symptomViewHeading}>Texture</Text>
             <View style={styles.radioButtonRow}>
-              {makeSelectBoxes(mucusTextureRadioProps, 'texture')}
+              <RadioButtonGroup
+                buttons={mucusTexture}
+                onSelect={val => this.setState({texture: val})}
+                active={this.state.texture}
+              />
             </View>
             <View style={styles.symptomViewRowInline}>
               <Text style={styles.symptomViewHeading}>Exclude</Text>
@@ -89,15 +96,3 @@ export default class Mucus extends Component {
     )
   }
 }
-
-function makeSelectBoxes(boxes, category) {
-  return boxes.map(({ label, value }) => {
-    return (
-      <SelectBox
-        label={label}
-        onPress={() => this.setState({ [category]: value })}
-        key={value}
-      />
-    )
-  })
-}

styles/index.js

@@ -30,12 +30,6 @@ export default StyleSheet.create({
     width: 50,
     height: 50
   },
-  radioButton: {
-    fontSize: 18,
-    margin: 8,
-    textAlign: 'center',
-    textAlignVertical: 'center'
-  },
   symptomBoxesView: {
     flexDirection: 'row',
     flexWrap: 'wrap',
@@ -151,8 +145,6 @@ export default StyleSheet.create({
   },
   radioButtonRow: {
     marginTop: 15,
-    marginLeft: 'auto',
-    marginRight: 'auto'
   },
   statsIntro: {
     fontSize: 18,
@@ -216,6 +208,28 @@ export default StyleSheet.create({
     flexWrap: 'wrap',
     marginVertical: 10,
   },
+  radioButton: {
+    width: 30,
+    height: 30,
+    borderRadius: 100,
+    borderStyle: 'solid',
+    borderWidth: 2,
+    borderColor: secondaryColor,
+    marginBottom: 5
+  },
+  radioButtonActive: {
+    backgroundColor: secondaryColor,
+    color: fontOnPrimaryColor
+  },
+  radioButtonGroup: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    marginVertical: 10,
+  },
+  radioButtonTextGroup: {
+    alignItems: 'center',
+    marginHorizontal: 10
+  },
   page: {
     padding: 10
   }