Add app text component and remove radio button dep

components/app-text.js

@@ -0,0 +1,23 @@
+import React, { Component } from 'react'
+import { Text } from 'react-native'
+import styles from "../styles"
+
+export class AppText extends Component {
+  render() {
+    return (
+      <Text style={[styles.appText, this.props.style]}>
+        {this.props.children}
+      </Text>
+    )
+  }
+}
+
+export class SymptomSectionHeader extends Component {
+  render() {
+    return (
+      <AppText style={styles.symptomViewHeading}>
+        {this.props.children}
+      </AppText>
+    )
+  }
+}

components/chart/chart.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { View, FlatList, Text } from 'react-native'
+import { View, FlatList } from 'react-native'
 import range from 'date-range'
 import { LocalDate } from 'js-joda'
 import { makeYAxisLabels, normalizeToScale, makeHorizontalGrid } from './y-axis'
@@ -9,6 +9,7 @@ import { getCycleDay, cycleDaysSortedByDate, getAmountOfCycleDays } from '../../
 import styles from './styles'
 import { scaleObservable } from '../../local-storage'
 import config from '../../config'
+import { AppText } from '../app-text'
 
 export default class CycleChart extends Component {
   constructor(props) {
@@ -100,7 +101,7 @@ export default class CycleChart extends Component {
       >
         {!this.state.chartLoaded &&
           <View style={{width: '100%', justifyContent: 'center', alignItems: 'center'}}>
-            <Text>Loading...</Text>
+            <AppText>Loading...</AppText>
           </View>
         }
 

components/chart/y-axis.js

@@ -1,8 +1,9 @@
 import React from 'react'
-import { Text, View } from 'react-native'
+import { View } from 'react-native'
 import config from '../../config'
 import styles from './styles'
 import { scaleObservable } from '../../local-storage'
+import { AppText } from '../app-text'
 
 export function makeYAxisLabels(columnHeight) {
   const units = config.temperatureScale.units
@@ -15,11 +16,11 @@ export function makeYAxisLabels(columnHeight) {
     // to reliably place the label vertically centered to the grid
     if (scaleMax - i * units === 37) console.log(y)
     return (
-      <Text
+      <AppText
         style={[style, {top: y - 8}]}
         key={i}>
         {scaleMax - i * units}
-      </Text>
+      </AppText>
     )
   })
 }

components/cycle-day/cycle-day-overview.js

@@ -2,7 +2,6 @@ import React, { Component } from 'react'
 import {
   ScrollView,
   View,
-  Text,
   TouchableOpacity,
   Dimensions
 } from 'react-native'
@@ -22,6 +21,7 @@ import {
   cervixPosition as positionLabels,
   intensity as intensityLabels
 } from './labels/labels'
+import { AppText } from '../app-text'
 
 export default class CycleDayOverView extends Component {
   constructor(props) {
@@ -198,10 +198,10 @@ class SymptomBox extends Component {
             name='thermometer'
             {...iconStyle}
           />
-          <Text style={[textActive, disabledStyle]}>{this.props.title}</Text>
+          <AppText style={[textActive, disabledStyle]}>{this.props.title}</AppText>
         </View>
         <View style={[styles.symptomDataBox, disabledStyle]}>
-          <Text style={styles.symptomDataText}>{this.props.data}</Text>
+          <AppText style={styles.symptomDataText}>{this.props.data}</AppText>
         </View>
       </TouchableOpacity>
     )

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

@@ -1,10 +1,10 @@
 import React, { Component } from 'react'
 import {
   View,
-  Text,
   TouchableOpacity,
 } from 'react-native'
 import styles from '../../styles'
+import { AppText } from '../app-text'
 
 export default class RadioButton extends Component {
   render() {
@@ -13,7 +13,6 @@ export default class RadioButton extends Component {
         {
           this.props.buttons.map(({ label, value }) => {
             const isActive = value === this.props.active
-            const circleStyle = [styles.radioButton]
             return (
               <TouchableOpacity
                 onPress={() => this.props.onSelect(value)}
@@ -21,11 +20,11 @@ export default class RadioButton extends Component {
                 activeOpacity={1}
               >
                 <View style={styles.radioButtonTextGroup}>
-                  <View style={circleStyle}>
+                  <View style={styles.radioButton}>
                     {isActive ?
                       <View style={styles.radioButtonActiveDot}/> : null}
                   </View>
-                  <Text>{label}</Text>
+                  <AppText>{label}</AppText>
                 </View>
               </TouchableOpacity>
             )

components/cycle-day/select-box.js

@@ -1,10 +1,10 @@
 import React, { Component } from 'react'
 import {
   View,
-  Text,
   TouchableOpacity,
 } from 'react-native'
 import styles from '../../styles'
+import { AppText } from '../app-text'
 
 export default class SelectBox extends Component {
   render () {
@@ -17,7 +17,7 @@ export default class SelectBox extends Component {
     return (
       <TouchableOpacity onPress={this.props.onPress}>
         <View style={style}>
-          <Text style={textStyle}>{this.props.label}</Text>
+          <AppText style={textStyle}>{this.props.label}</AppText>
         </View>
       </TouchableOpacity>
     )

components/cycle-day/symptoms/bleeding.js

@@ -1,15 +1,15 @@
 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 { bleeding as labels } from '../labels/labels'
 import ActionButtonFooter from './action-button-footer'
+import RadioButtonGroup from '../radio-button-group'
+import { SymptomSectionHeader, AppText } from '../../app-text'
 
 export default class Bleeding extends Component {
   constructor(props) {
@@ -37,20 +37,18 @@ export default class Bleeding extends Component {
       <View style={{ flex: 1 }}>
         <ScrollView style={styles.page}>
           <View>
-            <View style={styles.radioButtonRow}>
+            <SymptomSectionHeader>Heaviness</SymptomSectionHeader>
-              <RadioForm
+            <AppText>How heavy is the bleeding?</AppText>
-                radio_props={bleedingRadioProps}
+            <RadioButtonGroup
-                initial={this.state.currentValue}
+              buttons={bleedingRadioProps}
-                formHorizontal={true}
+              active={this.state.currentValue}
-                labelHorizontal={false}
+              onSelect={val => this.setState({ currentValue: val })}
-                labelStyle={styles.radioButton}
-                onPress={(itemValue) => {
-                  this.setState({ currentValue: itemValue })
-                }}
             />
+            <SymptomSectionHeader>Exclude</SymptomSectionHeader>
+            <View flexDirection={'row'}>
+              <View flex={1}>
+                <AppText>You can exclude this value if it's not menstrual bleeding</AppText>
               </View>
-            <View style={styles.symptomViewRowInline}>
-              <Text style={styles.symptomViewHeading}>Exclude</Text>
               <Switch
                 onValueChange={(val) => {
                   this.setState({ exclude: val })

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>
+            <SymptomSectionHeader>Opening</SymptomSectionHeader>
-            <View style={styles.radioButtonRow}>
+            <RadioButtonGroup
-              <RadioForm
+              buttons={cervixOpeningRadioProps}
-                radio_props={cervixOpeningRadioProps}
+              active={this.state.opening}
-                initial={this.state.opening}
+              onSelect={val => this.setState({ opening: val })}
-                formHorizontal={true}
-                labelHorizontal={false}
-                labelStyle={styles.radioButton}
-                onPress={(itemValue) => {
-                  this.setState({ opening: itemValue })
-                }}
             />
-            </View>
+            <SymptomSectionHeader>Firmness</SymptomSectionHeader>
-            <Text style={styles.symptomViewHeading}>Firmness</Text>
+            <RadioButtonGroup
-            <View style={styles.radioButtonRow}>
+              buttons={cervixFirmnessRadioProps}
-              <RadioForm
+              active={this.state.firmness}
-                radio_props={cervixFirmnessRadioProps}
+              onSelect={val => this.setState({ firmness: val })}
-                initial={this.state.firmness}
-                formHorizontal={true}
-                labelHorizontal={false}
-                labelStyle={styles.radioButton}
-                onPress={(itemValue) => {
-                  this.setState({ firmness: itemValue })
-                }}
             />
-            </View>
+            <SymptomSectionHeader>Position</SymptomSectionHeader>
-            <Text style={styles.symptomViewHeading}>Position</Text>
+            <RadioButtonGroup
-            <View style={styles.radioButtonRow}>
+              buttons={cervixPositionRadioProps}
-              <RadioForm
+              active={this.state.position}
-                radio_props={cervixPositionRadioProps}
+              onSelect={val => this.setState({ position: val })}
-                initial={this.state.position}
-                formHorizontal={true}
-                labelHorizontal={false}
-                labelStyle={styles.radioButton}
-                onPress={(itemValue) => {
-                  this.setState({ position: itemValue })
-                }}
             />
-            </View>
             <View style={styles.symptomViewRowInline}>
-              <Text style={styles.symptomViewHeading}>Exclude</Text>
+              <SymptomSectionHeader>Exclude</SymptomSectionHeader>
               <Switch
                 onValueChange={(val) => {
                   this.setState({ exclude: val })

components/cycle-day/symptoms/desire.js

@@ -3,11 +3,11 @@ import {
   View,
   ScrollView
 } from 'react-native'
-import RadioForm from 'react-native-simple-radio-button'
 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'
 
 export default class Desire extends Component {
   constructor(props) {
@@ -31,19 +31,12 @@ export default class Desire extends Component {
       <View style={{ flex: 1 }}>
         <ScrollView style={styles.page}>
           <View>
-            <View style={styles.radioButtonRow}>
+            <RadioButtonGroup
-              <RadioForm
+              buttons={desireRadioProps}
-                radio_props={desireRadioProps}
+              acitve={this.state.currentValue}
-                initial={this.state.currentValue}
+              onSelect={val => this.setState({ currentValue: val })}
-                formHorizontal={true}
-                labelHorizontal={false}
-                labelStyle={styles.radioButton}
-                onPress={(itemValue) => {
-                  this.setState({ currentValue: itemValue })
-                }}
             />
           </View>
-          </View>
         </ScrollView>
         <ActionButtonFooter
           symptom='desire'

components/cycle-day/symptoms/mucus.js

@@ -1,7 +1,6 @@
 import React, { Component } from 'react'
 import {
   View,
-  Text,
   Switch,
   ScrollView
 } from 'react-native'
@@ -14,6 +13,7 @@ import {
 import computeSensiplanValue from '../../../lib/sensiplan-mucus'
 import ActionButtonFooter from './action-button-footer'
 import RadioButtonGroup from '../radio-button-group'
+import { SymptomSectionHeader } from '../../app-text'
 
 
 export default class Mucus extends Component {
@@ -51,24 +51,20 @@ export default class Mucus extends Component {
       <View style={{ flex: 1 }}>
         <ScrollView style={styles.page}>
           <View>
-            <Text style={styles.symptomViewHeading}>Feeling</Text>
+            <SymptomSectionHeader>Feeling</SymptomSectionHeader>
-            <View style={styles.radioButtonRow}>
             <RadioButtonGroup
               buttons={mucusFeeling}
               onSelect={val => this.setState({ feeling: val })}
               active={this.state.feeling}
             />
-            </View>
+            <SymptomSectionHeader>Texture</SymptomSectionHeader>
-            <Text style={styles.symptomViewHeading}>Texture</Text>
-            <View style={styles.radioButtonRow}>
             <RadioButtonGroup
               buttons={mucusTexture}
               onSelect={val => this.setState({ texture: val })}
               active={this.state.texture}
             />
-            </View>
             <View style={styles.symptomViewRowInline}>
-              <Text style={styles.symptomViewHeading}>Exclude</Text>
+              <SymptomSectionHeader>Exclude</SymptomSectionHeader>
               <Switch
                 onValueChange={(val) => {
                   this.setState({ exclude: val })

components/cycle-day/symptoms/sex.js

@@ -1,6 +1,5 @@
 import React, { Component } from 'react'
 import {
-  Text,
   TextInput,
   View,
   ScrollView
@@ -13,6 +12,7 @@ import {
 } from '../labels/labels'
 import ActionButtonFooter from './action-button-footer'
 import SelectBox from '../select-box'
+import { SymptomSectionHeader } from '../../app-text'
 
 const sexBoxes = [{
   label: activityLabels.solo,
@@ -79,12 +79,9 @@ export default class Sex extends Component {
     return (
       <View style={{ flex: 1 }}>
         <ScrollView style={styles.page}>
-          <Text style={styles.symptomViewHeading}>Activity</Text>
+          <SymptomSectionHeader>Activity</SymptomSectionHeader>
-          <View style={styles.selectBoxSection}>
           {this.makeSelectBoxes(sexBoxes)}
-          </View>
+          <SymptomSectionHeader>Contraceptives</SymptomSectionHeader>
-          <Text style={styles.symptomViewHeading}>Contraceptives</Text>
-          <View style={styles.selectBoxSection}>
           {this.makeSelectBoxes(contraceptiveBoxes)}
           <SelectBox
             value={this.state.other}
@@ -94,7 +91,6 @@ export default class Sex extends Component {
               this.setState({ focusTextArea: true })
             }}
           />
-          </View>
           {this.state.other &&
             <TextInput
               autoFocus={this.state.focusTextArea}

components/cycle-day/symptoms/temperature.js

@@ -1,7 +1,6 @@
 import React, { Component } from 'react'
 import {
   View,
-  Text,
   TextInput,
   Switch,
   Keyboard,
@@ -18,6 +17,7 @@ import { scaleObservable } from '../../../local-storage'
 import { shared } from '../../labels'
 import ActionButtonFooter from './action-button-footer'
 import config from '../../../config'
+import { SymptomSectionHeader } from '../../app-text'
 
 const minutes = ChronoUnit.MINUTES
 
@@ -99,7 +99,7 @@ export default class Temp extends Component {
         <ScrollView style={styles.page}>
           <View>
             <View style={styles.symptomViewRowInline}>
-              <Text style={styles.symptomViewHeading}>Temperature (°C)</Text>
+              <SymptomSectionHeader>Temperature (°C)</SymptomSectionHeader>
               <TempInput
                 value={this.state.temperature}
                 setState={(val) => this.setState(val)}
@@ -107,7 +107,7 @@ export default class Temp extends Component {
               />
             </View>
             <View style={styles.symptomViewRowInline}>
-              <Text style={styles.symptomViewHeading}>Time</Text>
+              <SymptomSectionHeader>Time</SymptomSectionHeader>
               <TextInput
                 style={styles.temperatureTextInput}
                 onFocus={() => {
@@ -128,9 +128,7 @@ export default class Temp extends Component {
               }}
               onCancel={() => this.setState({ isTimePickerVisible: false })}
             />
-            <View style={styles.symptomViewRowInline}>
+            <SymptomSectionHeader>Note</SymptomSectionHeader>
-              <Text style={styles.symptomViewHeading}>Note</Text>
-            </View>
             <View>
               <TextInput
                 style={styles.temperatureTextInput}
@@ -144,7 +142,7 @@ export default class Temp extends Component {
               />
             </View>
             <View style={styles.symptomViewRowInline}>
-              <Text style={styles.symptomViewHeading}>Exclude</Text>
+              <SymptomSectionHeader>Exlude</SymptomSectionHeader>
               <Switch
                 onValueChange={(val) => {
                   this.setState({ exclude: val })

components/settings.js

@@ -4,7 +4,6 @@ import {
   TouchableOpacity,
   ScrollView,
   Alert,
-  Text,
   Switch
 } from 'react-native'
 import DateTimePicker from 'react-native-modal-datetime-picker-nevo'
@@ -23,6 +22,7 @@ import {
   tempReminderObservable,
   saveTempReminder
 } from '../local-storage'
+import { AppText } from './app-text'
 
 export default class Settings extends Component {
   constructor(props) {
@@ -35,36 +35,36 @@ export default class Settings extends Component {
       <ScrollView>
         <TempReminderPicker/>
         <View style={styles.settingsSegment}>
-          <Text style={styles.settingsSegmentTitle}>
+          <AppText style={styles.settingsSegmentTitle}>
             {labels.tempScale.segmentTitle}
-          </Text>
+          </AppText>
-          <Text>{labels.tempScale.segmentExplainer}</Text>
+          <AppText>{labels.tempScale.segmentExplainer}</AppText>
           <TempSlider/>
         </View>
         <View style={styles.settingsSegment}>
-          <Text style={styles.settingsSegmentTitle}>
+          <AppText style={styles.settingsSegmentTitle}>
             {labels.export.button}
-          </Text>
+          </AppText>
-          <Text>{labels.export.segmentExplainer}</Text>
+          <AppText>{labels.export.segmentExplainer}</AppText>
           <TouchableOpacity
             onPress={openShareDialogAndExport}
             style={styles.settingsButton}>
-            <Text style={styles.settingsButtonText}>
+            <AppText style={styles.settingsButtonText}>
               {labels.export.button}
-            </Text>
+            </AppText>
           </TouchableOpacity>
         </View>
         <View style={styles.settingsSegment}>
-          <Text style={styles.settingsSegmentTitle}>
+          <AppText style={styles.settingsSegmentTitle}>
             {labels.import.button}
-          </Text>
+          </AppText>
-          <Text>{labels.import.segmentExplainer}</Text>
+          <AppText>{labels.import.segmentExplainer}</AppText>
           <TouchableOpacity
             onPress={openImportDialogAndImport}
             style={styles.settingsButton}>
-            <Text style={styles.settingsButtonText}>
+            <AppText style={styles.settingsButtonText}>
               {labels.import.button}
-            </Text>
+            </AppText>
           </TouchableOpacity>
         </View>
       </ScrollView>
@@ -84,15 +84,15 @@ class TempReminderPicker extends Component {
         style={styles.settingsSegment}
         onPress={() => this.setState({ isTimePickerVisible: true })}
       >
-        <Text style={styles.settingsSegmentTitle}>
+        <AppText style={styles.settingsSegmentTitle}>
           {labels.tempReminder.title}
-        </Text>
+        </AppText>
         <View style={{ flexDirection: 'row', alignItems: 'center' }}>
           <View style={{ flex: 1 }}>
             {this.state.time && this.state.enabled ?
-              <Text>{labels.tempReminder.timeSet(this.state.time)}</Text>
+              <AppText>{labels.tempReminder.timeSet(this.state.time)}</AppText>
               :
-              <Text>{labels.tempReminder.noTimeSet}</Text>
+              <AppText>{labels.tempReminder.noTimeSet}</AppText>
             }
           </View>
           <Switch
@@ -160,8 +160,8 @@ class TempSlider extends Component {
   render() {
     return (
       <View style={{ alignItems: 'center' }}>
-        <Text>{`${labels.tempScale.min} ${this.state.min}`}</Text>
+        <AppText>{`${labels.tempScale.min} ${this.state.min}`}</AppText>
-        <Text>{`${labels.tempScale.max} ${this.state.max}`}</Text>
+        <AppText>{`${labels.tempScale.max} ${this.state.max}`}</AppText>
         <Slider
           values={[this.state.min, this.state.max]}
           min={config.temperatureScale.min}

components/stats.js

@@ -1,6 +1,5 @@
 import React, { Component } from 'react'
 import {
-  Text,
   View,
   ScrollView
 } from 'react-native'
@@ -9,6 +8,7 @@ import styles from '../styles/index'
 import cycleModule from '../lib/cycle'
 import {getCycleLengthStats as getCycleInfo} from '../lib/cycle-length'
 import {stats as labels} from './labels'
+import { AppText } from './app-text'
 
 export default class Stats extends Component {
   render() {
@@ -28,32 +28,32 @@ export default class Stats extends Component {
       <ScrollView>
         <View>
           {!atLeastOneCycle &&
-            <Text style={styles.statsIntro}>{labels.emptyStats}</Text>
+            <AppText style={styles.statsIntro}>{labels.emptyStats}</AppText>
           }
           {atLeastOneCycle && numberOfCycles === 1 &&
-            <Text style={styles.statsIntro}>
+            <AppText style={styles.statsIntro}>
               {labels.oneCycleStats(cycleLengths[0])}
-            </Text>
+            </AppText>
           }
           {atLeastOneCycle && numberOfCycles > 1 && <View>
-            <Text style={styles.statsIntro}>
+            <AppText style={styles.statsIntro}>
               {labels.getBasisOfStats(numberOfCycles)}
-            </Text>
+            </AppText>
             <View style={styles.statsRow}>
-              <Text style={styles.statsLabelLeft}>{labels.averageLabel}</Text>
+              <AppText style={styles.statsLabelLeft}>{labels.averageLabel}</AppText>
-              <Text style={styles.statsLabelRight}>{cycleInfo.mean + ' ' + labels.daysLabel}</Text>
+              <AppText style={styles.statsLabelRight}>{cycleInfo.mean + ' ' + labels.daysLabel}</AppText>
             </View>
             <View style={styles.statsRow}>
-              <Text style={styles.statsLabelLeft}>{labels.minLabel}</Text>
+              <AppText style={styles.statsLabelLeft}>{labels.minLabel}</AppText>
-              <Text style={styles.statsLabelRight}>{cycleInfo.minimum + ' ' + labels.daysLabel}</Text>
+              <AppText style={styles.statsLabelRight}>{cycleInfo.minimum + ' ' + labels.daysLabel}</AppText>
             </View>
             <View style={styles.statsRow}>
-              <Text style={styles.statsLabelLeft}>{labels.maxLabel}</Text>
+              <AppText style={styles.statsLabelLeft}>{labels.maxLabel}</AppText>
-              <Text style={styles.statsLabelRight}>{cycleInfo.maximum + ' ' + labels.daysLabel}</Text>
+              <AppText style={styles.statsLabelRight}>{cycleInfo.maximum + ' ' + labels.daysLabel}</AppText>
             </View>
             <View style={styles.statsRow}>
-              <Text style={styles.statsLabelLeft}>{labels.stdLabel}</Text>
+              <AppText style={styles.statsLabelLeft}>{labels.stdLabel}</AppText>
-              <Text style={styles.statsLabelRight}>{cycleInfo.stdDeviation + ' ' + labels.daysLabel}</Text>
+              <AppText style={styles.statsLabelRight}>{cycleInfo.stdDeviation + ' ' + labels.daysLabel}</AppText>
             </View>
           </View>}
         </View>

package.json

@@ -33,7 +33,6 @@
     "react-native-modal-datetime-picker-nevo": "^4.11.0",
     "react-native-push-notification": "^3.1.1",
     "react-native-share": "^1.1.0",
-    "react-native-simple-radio-button": "^2.7.1",
     "react-native-vector-icons": "^5.0.0",
     "react-navigation": "^2.0.4",
     "realm": "^2.7.1",

styles/index.js

@@ -5,6 +5,9 @@ export const secondaryColor = '#351c4d'
 export const fontOnPrimaryColor = 'white'
 
 export default StyleSheet.create({
+  appText: {
+    color: 'black'
+  },
   welcome: {
     fontSize: 20,
     margin: 30,
@@ -25,6 +28,8 @@ export default StyleSheet.create({
   },
   symptomViewHeading: {
     fontSize: 20,
+    color: 'black',
+    marginBottom: 5
   },
   symptomBoxImage: {
     width: 50,
@@ -208,6 +213,9 @@ export default StyleSheet.create({
     flexWrap: 'wrap',
     marginVertical: 10,
   },
+  radioButtonGroup: {
+    marginTop: 10
+  },
   radioButton: {
     width: 20,
     height: 20,
@@ -215,7 +223,8 @@ export default StyleSheet.create({
     borderStyle: 'solid',
     borderWidth: 2,
     borderColor: secondaryColor,
-    marginBottom: 5,
+    marginBottom: 3,
+    marginRight: 10,
     alignItems: 'center',
     justifyContent: 'center'
   },
@@ -225,17 +234,13 @@ export default StyleSheet.create({
     borderRadius: 100,
     backgroundColor: secondaryColor
   },
-  radioButtonGroup: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    marginVertical: 10,
-  },
   radioButtonTextGroup: {
-    alignItems: 'center',
+    marginRight: 10,
-    marginHorizontal: 10
+    flexDirection: 'row',
+    marginBottom: 10
   },
   page: {
-    padding: 10
+    marginHorizontal: 10
   }
 })