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>
   )