Don't render delete icon, instead of just setting it invisible

components/header/navigation-arrow.js

@@ -8,6 +8,10 @@ export default function NavigationArrow(props) {
     left: 'chevron-thin-left',
     right: 'chevron-thin-right'
   }[props.direction]
+  const iconPosition = {
+    left: 'navigationArrowLeft',
+    right: 'navigationArrowRight'
+  }[props.direction]
   let pressHandler
   if (props.goBack) {
     pressHandler = () => props.goBack()
@@ -19,7 +23,7 @@ export default function NavigationArrow(props) {
   }
   return (
     <TouchableOpacity
-      style={styles.navigationArrow}
+      style={[styles.navigationArrow, styles[iconPosition]]}
       onPress={pressHandler}
     >
       <Icon

components/header/symptom-view.js

@@ -30,19 +30,19 @@ export default function SymptomViewHeader(props) {
           {formatDate(props.date)}
         </Text>
       </View >
-      <TouchableOpacity
-        onPress={props.deleteEntry}
-        style={[
-          styles.headerDeleteButton,
-          {opacity: props.deleteIconActive ? 1 : 0}
-        ]}
-        disabled={!props.deleteIconActive}
-      >
-        <Icon
-          name="delete"
-          {...iconStyles.symptomHeaderIcons}
-        />
-      </TouchableOpacity>
+      { props.deleteIconActive &&
+        <TouchableOpacity
+          onPress={props.deleteEntry}
+          style={[
+            styles.headerDeleteButton,
+          ]}
+        >
+          <Icon
+            name="delete"
+            {...iconStyles.symptomHeaderIcons}
+          />
+        </TouchableOpacity>
+      }
 
     </View>
   )

styles/index.js

@@ -234,13 +234,12 @@ export default StyleSheet.create({
     justifyContent: 'center',
     height: 80
   },
-  headerCycleDay: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-  },
   navigationArrow: {
-    padding: 20
+    padding: 20,
+    position: 'absolute'
   },
+  navigationArrowLeft: { left: 0 },
+  navigationArrowRight: { right: 0 },
   menu: {
     backgroundColor: primaryColor,
     alignItems: 'center',
@@ -453,7 +452,8 @@ export default StyleSheet.create({
   headerDeleteButton: {
     paddingHorizontal: 20,
     paddingVertical: 20,
-    alignItems: 'flex-end'
+    position: 'absolute',
+    right: 0
   },
   infoButtonSymptomView: {
     position: 'absolute',