Try out moving it to body

components/cycle-day/symptoms/symptom-view.js

@@ -1,9 +1,13 @@
 import React, { Component } from 'react'
-import { BackHandler, View, Alert } from 'react-native'
+import {
+  BackHandler, View, Alert, TouchableOpacity
+} from 'react-native'
 import { saveSymptom } from '../../../db'
 import Header from '../../header/symptom-view'
 import { headerTitles } from '../../../i18n/en/labels'
 import { sharedDialogs } from '../../../i18n/en/cycle-day'
+import FeatherIcon from 'react-native-vector-icons/Entypo'
+import styles, { iconStyles } from '../../../styles'
 
 export default class SymptomView extends Component {
   constructor(props) {
@@ -66,6 +70,16 @@ export default class SymptomView extends Component {
             )
           }}
         />
+        <TouchableOpacity
+          onPress={() => {}}
+          style={styles.infoButtonSymptomView}
+        >
+          <FeatherIcon
+            name="info-with-circle"
+            {...iconStyles.infoInSymptomView}
+            style={styles.symptomInfoIcon}
+          />
+        </TouchableOpacity>
         {this.renderContent()}
       </View>
     )

components/header/symptom-view.js

@@ -32,12 +32,14 @@ export default function SymptomViewHeader(props) {
       </View >
       <TouchableOpacity
         onPress={props.deleteEntry}
-        style={[styles.infoButton, {opacity: props.deleteIconActive ? 1 : 0}]}
+        style={[
+          styles.headerDeleteButton,
+          {opacity: props.deleteIconActive ? 1 : 0}
+        ]}
         disabled={!props.deleteIconActive}
       >
         <Icon
           name="delete"
-          style={styles.symptomDeleteIcon}
           {...iconStyles.symptomHeaderIcons}
         />
       </TouchableOpacity>

styles/index.js

@@ -176,10 +176,6 @@ export default StyleSheet.create({
     fontFamily: textFontBold,
     marginTop: 10
   },
-  symptomDeleteIcon: {
-    marginRight: 20,
-    marginLeft: 20
-  },
   symptomBoxImage: {
     width: 50,
     height: 50
@@ -438,8 +434,15 @@ export default StyleSheet.create({
     marginTop: 20,
     color: 'grey'
   },
-  infoButton: {
+  headerDeleteButton: {
-    paddingVertical: 20
+    paddingHorizontal: 20,
+    paddingVertical: 20,
+    alignItems: 'flex-end'
+  },
+  infoButtonSymptomView: {
+    paddingHorizontal: 20,
+    paddingVertical: 10,
+    alignItems: 'flex-end'
   },
   licensePage: {
     paddingVertical: 20,
@@ -479,7 +482,13 @@ export const iconStyles = {
     color: colorInActive,
   },
   infoInHeading: {
-    marginRight: 5,
+    marginRight: 5
-    color: 'black'
+  },
+  infoInSymptomView: {
+    size: 20
+  },
+  hiddenIcon: {
+    size: 20,
+    display: 'none'
   }
 }