Add Popup Form

StressPrediction/src/newJournalEntry.js

-import { View, Text, StyleSheet, TextInput, Button, Image } from 'react-native'
+import { View, Text, StyleSheet, TextInput, Button, Image, Modal, TouchableOpacity } from 'react-native'
 import React, { useState } from 'react'
 import { db } from '../config'
 import { ref, set } from 'firebase/database'
@@ -7,6 +7,7 @@ const AddData = () => {
     const [Job_Satisfaction, setTitle] = useState('');
     const [Sleep_Hours, setSleepHours] = useState('');
     const [Additional_Text, setText] = useState('');
+    const [modalVisible, setModalVisible] = useState(false);
 
     // function to update data in Firebase Realtime DB
     const updateData = () => {
@@ -24,15 +25,35 @@ const AddData = () => {
         } else {
             console.error("Invalid input for Job Satisfaction or Sleep Hours. Please enter valid numbers.");
         }
+        setModalVisible(false); // Close the modal after updating data
     }
 
     return (
         <View style={styles.container}>
             <Text style={styles.header}>STRESS TRACKER </Text>
+            <TouchableOpacity onPress={() => setModalVisible(true)}>
                 <Image
                   source={require('../images/Home.jpg')}
                   style={styles.image}
                 />
+            </TouchableOpacity>
+            <Button 
+              title="Open Popup"
+              onPress={() => setModalVisible(true)}
+            />
+            <Modal
+              animationType="slide"
+              transparent={true}
+              visible={modalVisible}
+              onRequestClose={() => {
+                setModalVisible(!modalVisible);
+              }}
+            >
+                <View style={styles.modalContainer}>
+                    <View style={styles.modalContent}>
+                        <TouchableOpacity onPress={() => setModalVisible(false)} style={styles.closeButton}>
+                            <Text style={styles.closeButtonText}>X</Text>
+                        </TouchableOpacity>
                         <TextInput
                           placeholder='Job Satisfaction'
                           value={Job_Satisfaction}
@@ -58,6 +79,9 @@ const AddData = () => {
                           onPress={updateData}
                         />
                     </View>
+                </View>
+            </Modal>
+        </View>
     )
 }
 
@@ -86,5 +110,32 @@ const styles = StyleSheet.create({
     image: {
       width: '100%',
       height: 200,
-    }
+    },
+    modalContainer: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    },
+    modalContent: {
+        backgroundColor: '#fff',
+        padding: 20,
+        borderRadius: 10,
+        width: '80%',
+    },
+    closeButton: {
+        position: 'absolute',
+        top: 10,
+        right: 10,
+        backgroundColor: '#ccc',
+        borderRadius: 15,
+        width: 30,
+        height: 30,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    closeButtonText: {
+        fontSize: 20,
+        fontWeight: 'bold',
+    },
 });