Use own modal instead of alert for symptom info

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

@@ -0,0 +1,22 @@
+import React from 'react'
+import { ScrollView, View, TouchableOpacity } from 'react-native'
+import Icon from 'react-native-vector-icons/SimpleLineIcons'
+import AppText from '../../app-text'
+import labels from '../../../i18n/en/symptom-info.js'
+import styles, {iconStyles} from '../../../styles/index'
+
+export default function InfoSymptom(props) {
+  return (
+    <View style={styles.infoPopUpWrapper}>
+      <View style={styles.dimmed}></View>
+      <View style={styles.infoPopUp}>
+        <TouchableOpacity onPress={props.close} style={styles.infoSymptomClose}>
+          <Icon name='close' {...iconStyles.infoPopUpClose}/>
+        </TouchableOpacity>
+        <ScrollView style={styles.infoSymptomText}>
+          <AppText>{labels[props.symptom].text}</AppText>
+        </ScrollView>
+      </View>
+    </View>
+  )
+}

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

@@ -3,12 +3,12 @@ import {
   BackHandler, View, Alert, TouchableOpacity
 } from 'react-native'
 import { saveSymptom } from '../../../db'
+import InfoPopUp from './info-symptom'
 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/Feather'
 import styles, { iconStyles } from '../../../styles'
-import infoLabels from '../../../i18n/en/symptom-info'
 
 export default class SymptomView extends Component {
   constructor(props) {
@@ -19,6 +19,10 @@ export default class SymptomView extends Component {
     )
     this.globalBackhandler = props.handleBackButtonPress
     this.date = props.date
+    this.navigate = props.navigate
+    this.state = {
+      showInfo: false
+    }
   }
 
   async handleBackButtonPressOnSymptomView() {
@@ -46,13 +50,6 @@ export default class SymptomView extends Component {
     })
   }
 
-  showInfoBox(){
-    Alert.alert(
-      infoLabels[this.symptomName].title,
-      infoLabels[this.symptomName].text
-    )
-  }
-
   render() {
     return (
       <View style={{flex: 1}}>
@@ -78,9 +75,9 @@ export default class SymptomView extends Component {
             )
           }}
         />
-        <View>
+        <View flex={1}>
           <TouchableOpacity
-            onPress={this.showInfoBox.bind(this)}
+            onPress={() => this.setState({showInfo: true})}
             style={styles.infoButtonSymptomView}
           >
             <FeatherIcon
@@ -90,6 +87,12 @@ export default class SymptomView extends Component {
             />
           </TouchableOpacity>
           {this.renderContent()}
+          { this.state.showInfo &&
+              <InfoPopUp
+                symptom={this.symptomName}
+                close={() => this.setState({showInfo: false})}
+              />
+          }
         </View>
       </View>
     )