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

styles/index.js

@@ -270,20 +270,6 @@ export default StyleSheet.create({
   temperatureTextInputSuggestion: {
     color: '#939393'
   },
-  actionButtonFooter: {
-    alignItems: 'center',
-    justifyContent: 'space-around',
-    flexDirection: 'row',
-    height: 60,
-  },
-  actionButtonItem: {
-    backgroundColor: secondaryColor,
-    alignItems: 'center',
-    flex: 1,
-    marginHorizontal: 5,
-    paddingVertical: 5,
-    borderRadius: 5,
-  },
   symptomEditButton: {
     width: 130
   },
@@ -308,6 +294,33 @@ export default StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center'
   },
+  infoPopUpWrapper: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0
+  },
+  infoPopUp: {
+    backgroundColor: 'white',
+    padding: 15,
+    position: 'absolute',
+    top: 20,
+    bottom: 20,
+    left: 20,
+    right: 20
+  },
+  dimmed: {
+    backgroundColor: 'black',
+    opacity: 0.5,
+    flex: 1
+  },
+  infoSymptomClose: {
+    alignItems: 'flex-end'
+  },
+  infoSymptomText: {
+    marginTop: 10
+  },
   settingsButton: {
     padding: 10,
     alignItems: 'center',
@@ -385,7 +398,7 @@ export default StyleSheet.create({
   },
   page: {
     marginHorizontal: 10,
-    marginTop: 20
+    marginTop: 20,
   },
   calendarToday: {
     fontWeight: 'bold',
@@ -490,14 +503,7 @@ export const iconStyles = {
   menuIconInactive: {
     color: colorInActive,
   },
-  infoInHeading: {
-    marginRight: 5
-  },
-  infoInSymptomView: {
-    size: 20
-  },
-  hiddenIcon: {
-    size: 20,
-    display: 'none'
+  infoPopUpClose: {
+    size: 25
   }
 }