Use select box group instead of single select boxes

components/cycle-day/select-box-group.js

@@ -0,0 +1,34 @@
+import React, { Component } from 'react'
+import {
+  View,
+  TouchableOpacity,
+} from 'react-native'
+import styles from '../../styles'
+import { AppText } from '../app-text'
+
+export default class SelectBoxGroup extends Component {
+  render() {
+    return (
+      <View flexDirection='row' flexWrap='wrap'>
+        {this.props.data.map(({ label, stateKey }) => {
+          const style = [styles.selectBox]
+          const textStyle = []
+          if (this.props.optionsState[stateKey]) {
+            style.push(styles.selectBoxActive)
+            textStyle.push(styles.selectBoxTextActive)
+          }
+          return (
+            <TouchableOpacity
+              onPress={() => this.props.onSelect(stateKey)}
+              key={stateKey}
+            >
+              <View style={style}>
+                <AppText style={textStyle}>{label}</AppText>
+              </View>
+            </TouchableOpacity>
+          )
+        })}
+      </View>
+    )
+  }
+}

components/cycle-day/select-box.js

@@ -1,25 +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 SelectBox extends Component {
-  render () {
-    const style = [styles.selectBox]
-    const textStyle = []
-    if (this.props.value) {
-      style.push(styles.selectBoxActive)
-      textStyle.push(styles.selectBoxTextActive)
-    }
-    return (
-      <TouchableOpacity onPress={this.props.onPress}>
-        <View style={style}>
-          <AppText style={textStyle}>{this.props.children}</AppText>
-        </View>
-      </TouchableOpacity>
-    )
-  }
-}

components/cycle-day/symptoms/sex.js

@@ -11,7 +11,7 @@ import {
   contraceptives as contraceptiveLabels
 } from '../labels/labels'
 import ActionButtonFooter from './action-button-footer'
-import SelectBox from '../select-box'
+import SelectBoxGroup from '../select-box-group'
 import { SymptomSectionHeader } from '../../app-text'
 
 const sexBoxes = [{
@@ -40,6 +40,9 @@ const contraceptiveBoxes = [{
 }, {
   label: contraceptiveLabels.implant,
   stateKey: 'implant'
+}, {
+  label: contraceptiveLabels.other,
+  stateKey: 'other'
 }]
 
 export default class Sex extends Component {
@@ -57,23 +60,12 @@ export default class Sex extends Component {
     }
   }
 
-  makeSelectBoxes(boxes) {
-    return boxes.map(({ label, stateKey }) => {
-      return (
-        <SelectBox
-          value={this.state[stateKey]}
-          onPress={() => this.toggleState(stateKey)}
-          key={stateKey}
-        >
-          {label}
-        </SelectBox>
-      )
-    })
-  }
-
-  toggleState(key) {
+  toggleState = (key) => {
     const curr = this.state[key]
     this.setState({[key]: !curr})
+    if (key === 'other' && !curr) {
+      this.setState({focusTextArea: true})
+    }
   }
 
   render() {
@@ -81,18 +73,17 @@ export default class Sex extends Component {
       <View style={{ flex: 1 }}>
         <ScrollView style={styles.page}>
           <SymptomSectionHeader>Activity</SymptomSectionHeader>
-          {this.makeSelectBoxes(sexBoxes)}
+          <SelectBoxGroup
+            data={sexBoxes}
+            onSelect={this.toggleState}
+            optionsState={this.state}
+          />
           <SymptomSectionHeader>Contraceptives</SymptomSectionHeader>
-          {this.makeSelectBoxes(contraceptiveBoxes)}
-          <SelectBox
-            value={this.state.other}
-            onPress={() => {
-              this.toggleState('other')
-              this.setState({ focusTextArea: true })
-            }}
-          >
-            {contraceptiveLabels.other}
-          </SelectBox>
+          <SelectBoxGroup
+            data={contraceptiveBoxes}
+            onSelect={this.toggleState}
+            optionsState={this.state}
+          />
 
           {this.state.other &&
             <TextInput