Adds info button to the body as alert

components/cycle-day/symptoms/note.js

@@ -1,13 +1,19 @@
 import React from 'react'
 import {
+  Alert,
   ScrollView,
   TextInput,
+  TouchableOpacity,
+  View
 } from 'react-native'
+import FeatherIcon from 'react-native-vector-icons/Feather'
 
-import styles from '../../../styles'
-import SymptomSection from './symptom-section'
+import infoLabels from '../../../i18n/en/symptom-info'
 import { noteExplainer } from '../../../i18n/en/cycle-day'
 import { shared as sharedLabels } from '../../../i18n/en/labels'
+import styles, { iconStyles } from '../../../styles'
+
+import SymptomSection from './symptom-section'
 import SymptomView from './symptom-view'
 
 export default class Note extends SymptomView {
@@ -23,6 +29,14 @@ export default class Note extends SymptomView {
 
   symptomName = 'note'
 
+  showInfoBox(){
+    const symptomName = 'note'
+    Alert.alert(
+      infoLabels[symptomName].title,
+      infoLabels[symptomName].text
+    )
+  }
+
   onBackButtonPress() {
     if (!this.state.currentValue) {
       this.deleteSymptomEntry()
@@ -36,19 +50,31 @@ export default class Note extends SymptomView {
   renderContent() {
     return (
       <ScrollView style={styles.page}>
-        <SymptomSection
-          explainer={noteExplainer}
-        >
-          <TextInput
-            autoFocus={!this.state.currentValue}
-            multiline={true}
-            placeholder={sharedLabels.enter}
-            onChangeText={(val) => {
-              this.setState({ currentValue: val })
-            }}
-            value={this.state.currentValue}
-          />
-        </SymptomSection>
+        <View style={{ flexDirection: 'row' }}>
+          <SymptomSection
+            explainer={noteExplainer}
+          >
+            <TextInput
+              autoFocus={!this.state.currentValue}
+              multiline={true}
+              placeholder={sharedLabels.enter}
+              onChangeText={(val) => {
+                this.setState({ currentValue: val })
+              }}
+              value={this.state.currentValue}
+            />
+          </SymptomSection>
+          <View style={{ flex: 1 }}></View>
+          <TouchableOpacity
+            onPress={this.showInfoBox}
+            style={styles.infoButton}
+          >
+            <FeatherIcon
+              name="info"
+              style={iconStyles.symptomInfo}
+            />
+          </TouchableOpacity>
+        </View>
       </ScrollView>
     )
   }