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,39 +25,62 @@ 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>
-            <Image
-              source={require('../images/Home.jpg')}
-              style={styles.image}
-            />
-            <TextInput
-              placeholder='Job Satisfaction'
-              value={Job_Satisfaction}
-              onChangeText={(text) => setTitle(text)}
-              style={styles.input}
-              keyboardType='numeric'
-            />
-            <TextInput
-              placeholder='Sleep hours'
-              value={Sleep_Hours}
-              onChangeText={(text) => setSleepHours(text)}
-              style={styles.input}
-              keyboardType='numeric'
-            />
-            <TextInput
-              placeholder='Additional text'
-              value={Additional_Text}
-              onChangeText={(text) => setText(text)}
-              style={styles.input}
-            />
+            <TouchableOpacity onPress={() => setModalVisible(true)}>
+                <Image
+                  source={require('../images/Home.jpg')}
+                  style={styles.image}
+                />
+            </TouchableOpacity>
             <Button 
-              title='Update Data'
-              onPress={updateData}
+              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}
+                          onChangeText={(text) => setTitle(text)}
+                          style={styles.input}
+                          keyboardType='numeric'
+                        />
+                        <TextInput
+                          placeholder='Sleep hours'
+                          value={Sleep_Hours}
+                          onChangeText={(text) => setSleepHours(text)}
+                          style={styles.input}
+                          keyboardType='numeric'
+                        />
+                        <TextInput
+                          placeholder='Additional text'
+                          value={Additional_Text}
+                          onChangeText={(text) => setText(text)}
+                          style={styles.input}
+                        />
+                        <Button 
+                          title='Update Data'
+                          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',
+    },
 });