put view styles in styles.js

bleeding.js

@@ -33,9 +33,9 @@ export default class Bleeding extends Component {
       {label: labels[3], value: 3 },
     ]
     return (
-      <View style={{flex: 1, flexDirection: 'column', justifyContent: 'space-between', alignItems: 'flex-start'}}>
-        <View style={{flex: 4, flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'flex-start'}}>
-          <View style={{flex: 1, flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'flex-start'}}>
+      <View style={ styles.symptomEditView }>
+        <View style={ styles.symptomEditSplitSymptomsAndLastRowButtons }>
+          <View style={ styles.symptomEditListedSymptomView }>
             <View style={{flex: 1}}>
               <Text style={styles.symptomDayView}>Bleeding</Text>
             </View>
@@ -52,11 +52,11 @@ export default class Bleeding extends Component {
               />
             </View>
           </View>
-          <View style={{flex: 1, flexDirection: 'row', justifyContent: 'space-evenly', alignItems: 'center'}}>
-            <View style={{flex: 1, margin: 5}}>
-              <Text style={styles.symptomDayView}>Exclude</Text>
+          <View style={ styles.itemsInRowSeparatedView }>
+            <View style={ styles.singleButtonView }>
+              <Text style={ styles.symptomDayView }>Exclude</Text>
             </View>
-            <View style={{flex: 1, margin: 5}}>
+            <View style={ styles.singleButtonView }>
               <Switch
                 onValueChange={(val) => {
                   this.setState({exclude: val})
@@ -66,14 +66,14 @@ export default class Bleeding extends Component {
             </View>
           </View>
         </View>
-        <View style={{flex: 1, flexDirection: 'row', justifyContent: 'space-evenly', alignItems: 'center'}}>
-          <View style={{flex: 1, margin: 5}}>
+        <View style={ styles.itemsInRowSeparatedView }>
+          <View style={ styles.singleButtonView }>
             <Button
               onPress={() => this.showView('dayView')}
               title="Cancel">
             </Button>
           </View>
-          <View style={{flex: 1, margin: 5}}>
+          <View style={ styles.singleButtonView }>
             <Button
               onPress={() => {
                 saveBleeding(this.cycleDay)
@@ -82,7 +82,7 @@ export default class Bleeding extends Component {
               title="Delete">
             </Button>
           </View>
-          <View style={{flex: 1, margin: 5}}>
+          <View style={ styles.singleButtonView }>
             <Button
               onPress={() => {
                 saveBleeding(this.cycleDay, {

cycle-day-overview.js

@@ -54,23 +54,23 @@ export default class DayView extends Component {
     }
 
     return (
-      <View style={{flex: 1, flexDirection: 'column', justifyContent: 'flex-start'}}>
-        <View style={{flexDirection: 'row', justifyContent: 'space-evenly', alignItems: 'center'}}>
+      <View style={ styles.symptomEditListedSymptomView }>
+        <View style={ styles.itemsInRowSeparatedView }>
           <View style={{flex: 1}}>
             <Text style={styles.symptomDayView}>Bleeding</Text>
           </View>
-          <View style={{flex: 1, margin:5}}>
+          <View style={ styles.singleButtonView }>
             <Button
               onPress={() => this.showView('bleedingEditView')}
               title={bleedingLabel}>
             </Button>
           </View>
         </View>
-        <View style={{flexDirection: 'row', justifyContent: 'space-evenly', alignItems: 'center'}}>
+        <View style={ styles.itemsInRowSeparatedView}>
           <View style={{flex: 1}}>
             <Text style={styles.symptomDayView}>Temperature</Text>
           </View>
-          <View style={{flex: 1, margin:5}}>
+          <View style={ styles.singleButtonView }>
             <Button
               onPress={() => this.showView('temperatureEditView')}
               title={temperatureLabel}>

cycle-day.js

@@ -29,16 +29,16 @@ export default class Day extends Component {
   render() {
     const cycleDayNumber = getCycleDayNumber(this.cycleDay.date)
     return (
-      <View style={{flex: 1, flexDirection: 'column', justifyContent: 'space-around'}}>
-        <View style={{flex: 2, justifyContent: 'center', backgroundColor: 'steelblue'}}>
+      <View style={ styles.cycleDayOuterView }>
+        <View style={ styles.cycleDayDateView }>
           <Text style={styles.dateHeader}>
             {formatDateForViewHeader(this.cycleDay.date)}
           </Text>
         </View >
-        <View style={{flex: 1, justifyContent: 'center', backgroundColor: 'skyblue'}}>
+        <View style={ styles.cycleDayNumberView }>
           { cycleDayNumber && <Text style={styles.cycleDayNumber} >Cycle day {cycleDayNumber}</Text> }
         </View >
-        <View style={{flex: 8, justifyContent: 'center',}}>
+        <View style={ styles.cycleDaySymptomsView }>
           {
             { dayView: <DayView cycleDay={this.cycleDay} showView={this.showView} />,
               bleedingEditView: <BleedingEditView cycleDay={this.cycleDay} showView={this.showView}/>,

home.js

@@ -46,13 +46,13 @@ export default class Home extends Component {
   render() {
     const navigate = this.props.navigation.navigate
     return (
-      <View style={{flex: 0.5, flexDirection: 'column', justifyContent: 'space-around'}}>
+      <View style={ styles.homeContainerView }>
         <View style={{flex: 2}}>
           <View>
             <Text style={styles.welcome}>{this.state.welcomeText}</Text>
           </View>
         </View>
-        <View style={{flex: 3, flexDirection: 'column', justifyContent: 'space-around', margin: 5}}>
+        <View style={ styles.homeButtonsView}>
           <View>
             <Button
               onPress={() => this.passTodayToDayView()}

styles.js

@@ -37,4 +37,68 @@ export default StyleSheet.create({
     textAlign: 'center',
     textAlignVertical: 'center'
   },
+  singleButtonView: {
+    flex: 1,
+    margin: 5
+  },
+  itemsInRowView: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    alignItems: 'center'
+  },
+  itemsInRowSeparatedView: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-evenly',
+    alignItems: 'center'
+  },
+  symptomEditView: {
+    flex: 1,
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start'
+  },
+  symptomEditSplitSymptomsAndLastRowButtons: {
+    flex: 4,
+    flexDirection: 'column',
+    justifyContent: 'flex-start',
+    alignItems: 'flex-start'
+  },
+  symptomEditListedSymptomView: {
+    flex: 1,
+    flexDirection: 'column',
+    justifyContent: 'flex-start',
+    alignItems: 'flex-start'
+  },
+  cycleDayOuterView: {
+    flex: 1,
+    flexDirection: 'column',
+    justifyContent: 'space-around'
+  },
+  cycleDayDateView: {
+    flex: 2,
+    justifyContent: 'center',
+    backgroundColor: 'steelblue'
+  },
+  cycleDayNumberView: {
+    flex: 1,
+    justifyContent: 'center',
+    backgroundColor: 'skyblue'
+  },
+  cycleDaySymptomsView: {
+    flex: 8,
+    justifyContent: 'center'
+  },
+  homeContainerView: {
+    flex: 0.5,
+    flexDirection: 'column',
+    justifyContent: 'space-around'
+  },
+  homeButtonsView: {
+    flex: 3,
+    flexDirection: 'column',
+    justifyContent: 'space-around',
+    margin: 5
+  }
 })
\ No newline at end of file

temperature.js

@@ -33,15 +33,15 @@ export default class Temp extends Component {
   render() {
     const cycleDay = this.cycleDay
     return (
-      <View style={{flex: 1, flexDirection: 'column', justifyContent: 'space-between', alignItems: 'flex-start'}}>
-        <View style={{flex: 4, flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'flex-start'}}>
-          <View style={{flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center'}}>
+      <View style={ styles.symptomEditView }>
+        <View style={ styles.symptomEditSplitSymptomsAndLastRowButtons }>
+          <View style={ styles.itemsInRowView }>
             <View style={{flex: 3, margin: 5}}>
               <Text style={styles.symptomDayView}>Temperature (°C)</Text>
             </View>
             <View style={{flex: 1, margin: 5}}>
               <TextInput
-                placeholder="Enter temperature"
+                placeholder="Enter"
                 onChangeText={(val) => {
                   this.setState({currentValue: val})
                 }}
@@ -50,7 +50,7 @@ export default class Temp extends Component {
               />
             </View>
           </View>
-          <View style={{flexDirection: 'row', justifyContent: 'space-evenly', alignItems: 'center'}}>
+          <View style={ styles.itemsInRowSeparatedView }>
             <View style={{flex: 1, margin: 5}}>
               <Text style={styles.symptomDayView}>Exclude</Text>
             </View>
@@ -64,8 +64,8 @@ export default class Temp extends Component {
             </View>
           </View>
         </View>
-        <View style={{flex: 1, flexDirection: 'row', justifyContent: 'space-evenly', alignItems: 'center'}}>
-          <View style={{flex: 1, margin: 5}}>
+        <View style={ styles.itemsInRowSeparatedView }>
+          <View style={ styles.singleButtonView }>
             <Button
               onPress={() => {
                 this.showView('dayView')
@@ -73,7 +73,7 @@ export default class Temp extends Component {
               title="Cancel">
             </Button>
           </View>
-          <View style={{flex: 1, margin: 5}}>
+          <View style={ styles.singleButtonView }>
             <Button
               onPress={() => {
                 saveTemperature(cycleDay)
@@ -82,7 +82,7 @@ export default class Temp extends Component {
               title="Delete">
             </Button>
           </View>
-          <View style={{flex: 1, margin: 5}}>
+          <View style={ styles.singleButtonView }>
             <Button
               onPress={() => {
                 saveTemperature(cycleDay, {