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}