Align grid

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

@@ -3,7 +3,8 @@ import {
   View,
   Text,
   Image,
-  TouchableOpacity
+  TouchableOpacity,
+  Dimensions
 } from 'react-native'
 import styles from '../../styles'
 import {
@@ -48,7 +49,6 @@ export default class DayView extends Component {
   render() {
     const cycleDay = this.cycleDay
     return (
-      <View style={styles.symptomEditView}>
       <View style={styles.symptomBoxesView}>
         <SymptomBox
           title='Bleeding'
@@ -92,7 +92,9 @@ export default class DayView extends Component {
           onPress={() => this.showView('SexEditView')}
           data={getLabel('sex', cycleDay.sex)}
         />
-        </View >
+        {/*  this is just to make the last row adhere to the grid
+        (and) because there are no pseudo properties in RN */}
+        <FillerBoxes/>
       </View >
     )
   }
@@ -160,12 +162,12 @@ function getLabel(symptomName, symptom) {
         sex.patch || sex.ring || sex.implant || sex.other) {
         sexLabel += 'Contraceptive'
       }
-      return sexLabel ? sexLabel : 'edit'
+      return sexLabel ? sexLabel : undefined
     }
   }
 
-  if (!symptom) return 'edit'
+  if (!symptom) return
-  return labels[symptomName](symptom) || 'edit'
+  return labels[symptomName](symptom)
 }
 
 class SymptomBox extends Component {
@@ -184,3 +186,16 @@ class SymptomBox extends Component {
     )
   }
 }
+
+class FillerBoxes extends Component {
+  render() {
+    const n = Dimensions.get('window').width / styles.symptomBox.minHeight
+    return Array(Math.ceil(n)).fill(
+      <View
+        width={styles.symptomBox.minHeight}
+        height={0}
+        key={Math.random().toString()}
+      />
+    )
+  }
+}

styles/index.js

@@ -53,8 +53,9 @@ export default StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
     marginTop: '20%',
+    marginHorizontal: 1,
     minWidth: 100,
-    minHeight: 100
+    minHeight: 100,
   },
   symptomEditRow: {
     justifyContent: 'space-between',