Convert radio button group to select tab group

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

@@ -1,36 +0,0 @@
-import React, { Component } from 'react'
-import {
-  View,
-  TouchableOpacity,
-} from 'react-native'
-import styles from '../../styles'
-import { AppText } from '../app-text'
-
-export default class RadioButton extends Component {
-  render() {
-    return (
-      <View style={styles.radioButtonGroup}>
-        {
-          this.props.buttons.map(({ label, value }) => {
-            const isActive = value === this.props.active
-            return (
-              <TouchableOpacity
-                onPress={() => this.props.onSelect(value)}
-                key={value}
-                activeOpacity={1}
-              >
-                <View style={styles.radioButtonTextGroup}>
-                  <View style={styles.radioButton}>
-                    {isActive ?
-                      <View style={styles.radioButtonActiveDot}/> : null}
-                  </View>
-                  <AppText>{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={value}
+                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

@@ -8,7 +8,7 @@ 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 SelectTabGroup from '../select-tab-group'
 import { SymptomSectionHeader, AppText } from '../../app-text'
 
 export default class Bleeding extends Component {
@@ -39,7 +39,7 @@ export default class Bleeding extends Component {
           <View>
             <SymptomSectionHeader>Heaviness</SymptomSectionHeader>
             <AppText>How heavy is the bleeding?</AppText>
-            <RadioButtonGroup
+            <SelectTabGroup
               buttons={bleedingRadioProps}
               active={this.state.currentValue}
               onSelect={val => this.setState({ currentValue: val })}

components/cycle-day/symptoms/cervix.js

@@ -12,7 +12,7 @@ import {
   cervixPosition as positionLabels
 } from '../labels/labels'
 import ActionButtonFooter from './action-button-footer'
-import RadioButtonGroup from '../radio-button-group'
+import SelectTabGroup from '../select-tab-group'
 import { SymptomSectionHeader } from '../../app-text'
 
 export default class Cervix extends Component {
@@ -54,19 +54,19 @@ export default class Cervix extends Component {
         <ScrollView style={styles.page}>
           <View>
             <SymptomSectionHeader>Opening</SymptomSectionHeader>
-            <RadioButtonGroup
+            <SelectTabGroup
               buttons={cervixOpeningRadioProps}
               active={this.state.opening}
               onSelect={val => this.setState({ opening: val })}
             />
             <SymptomSectionHeader>Firmness</SymptomSectionHeader>
-            <RadioButtonGroup
+            <SelectTabGroup
               buttons={cervixFirmnessRadioProps}
               active={this.state.firmness}
               onSelect={val => this.setState({ firmness: val })}
             />
             <SymptomSectionHeader>Position</SymptomSectionHeader>
-            <RadioButtonGroup
+            <SelectTabGroup
               buttons={cervixPositionRadioProps}
               active={this.state.position}
               onSelect={val => this.setState({ position: val })}

components/cycle-day/symptoms/desire.js

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

components/cycle-day/symptoms/mucus.js

@@ -12,7 +12,7 @@ import {
 } from '../labels/labels'
 import computeSensiplanValue from '../../../lib/sensiplan-mucus'
 import ActionButtonFooter from './action-button-footer'
-import RadioButtonGroup from '../radio-button-group'
+import SelectTabGroup from '../select-tab-group'
 import { SymptomSectionHeader } from '../../app-text'
 
 
@@ -52,13 +52,13 @@ export default class Mucus extends Component {
         <ScrollView style={styles.page}>
           <View>
             <SymptomSectionHeader>Feeling</SymptomSectionHeader>
-            <RadioButtonGroup
+            <SelectTabGroup
               buttons={mucusFeeling}
               onSelect={val => this.setState({ feeling: val })}
               active={this.state.feeling}
             />
             <SymptomSectionHeader>Texture</SymptomSectionHeader>
-            <RadioButtonGroup
+            <SelectTabGroup
               buttons={mucusTexture}
               onSelect={val => this.setState({ texture: val })}
               active={this.state.texture}

styles/index.js

@@ -213,31 +213,33 @@ export default StyleSheet.create({
     flexWrap: 'wrap',
     marginVertical: 10,
   },
-  radioButtonGroup: {
+  selectTabGroup: {
-    marginTop: 10
+    marginTop: 10,
+    flexDirection: 'row'
   },
-  radioButton: {
+  selectTab: {
-    width: 20,
+    backgroundColor: 'lightgrey',
-    height: 20,
-    borderRadius: 100,
     borderStyle: 'solid',
-    borderWidth: 2,
+    borderLeftWidth: 1,
-    borderColor: secondaryColor,
+    paddingVertical: 10,
+    paddingHorizontal: 15,
+    borderColor: 'white',
     marginBottom: 3,
-    marginRight: 10,
     alignItems: 'center',
     justifyContent: 'center'
   },
-  radioButtonActiveDot: {
+  selectTabActive: {
-    width: 10,
+    backgroundColor: secondaryColor,
-    height: 10,
+    color: fontOnPrimaryColor
-    borderRadius: 100,
-    backgroundColor: secondaryColor
   },
-  radioButtonTextGroup: {
+  selectTabLast: {
-    marginRight: 10,
+    borderTopRightRadius: 10,
-    flexDirection: 'row',
+    borderBottomRightRadius: 10,
-    marginBottom: 10
+  },
+  selectTabFirst: {
+    borderTopLeftRadius: 10,
+    borderBottomLeftRadius: 10,
+    borderLeftWidth: null
   },
   page: {
     marginHorizontal: 10