fixing image display for posts on profile page, adding success confirmation modal, changing posts display,

app/(tabs)/home.tsx

@@ -1,12 +1,13 @@
 import { CameraView, useCameraPermissions } from 'expo-camera'
 import React, { useRef, useState } from 'react'
-import { Button, Image, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native'
+import { Button, Image, Modal, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native'
 
 export default function App() {
     const [permission, requestPermission] = useCameraPermissions()
     const [photo, setPhoto] = useState('')
     const [address, setAddress] = useState('')
     const [notes, setNotes] = useState('')
+    const [showConfirmation, setShowConfirmation] = useState(false)
     const cameraRef = useRef<CameraView>(null)
 
     async function resetState() {
@@ -43,6 +44,7 @@ export default function App() {
         }).then((res) => {
             console.log(res.status)
             if (res.status === 200) {
+                setShowConfirmation(true)
                 resetState()
             }
         })
@@ -109,6 +111,26 @@ export default function App() {
                     </View>
                 </>
             )}
+            <Modal
+                animationType='fade'
+                transparent={true}
+                visible={showConfirmation}
+                onRequestClose={() => {
+                    setShowConfirmation(!showConfirmation)
+                }}
+            >
+                <View style={styles.modalView}>
+                    <Text style={styles.modalText}>
+                        Your post has been submitted and will be reviewed within 3 business days. Thanks!
+                    </Text>
+                    <TouchableOpacity
+                        style={[styles.modalButton, styles.buttonClose]}
+                        onPress={() => setShowConfirmation(!showConfirmation)}
+                    >
+                        <Text style={styles.textStyle}>Close</Text>
+                    </TouchableOpacity>
+                </View>
+            </Modal>
         </View>
     )
 }
@@ -121,6 +143,48 @@ const styles = StyleSheet.create({
         paddingHorizontal: 25,
         paddingVertical: 200
     },
+    centeredView: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center'
+    },
+    modalView: {
+        flex: 1,
+        top: '80%',
+        height: 100,
+        backgroundColor: '#363c43ff',
+        borderRadius: 12,
+        padding: 35,
+        shadowColor: '#000',
+        shadowOffset: {
+            width: 0,
+            height: 2
+        },
+        shadowOpacity: 0.25,
+        shadowRadius: 4,
+        elevation: 5
+    },
+    modalText: {
+        marginBottom: 15,
+        textAlign: 'center',
+        color: 'white'
+    },
+    modalButton: {
+        borderRadius: 20,
+        padding: 10,
+        elevation: 2
+    },
+    buttonClose: {
+        backgroundColor: '#96a5b1ff',
+        paddingHorizontal: 20,
+        paddingVertical: 5,
+        borderRadius: 12
+    },
+    textStyle: {
+        color: 'white',
+        fontWeight: 'bold',
+        textAlign: 'center'
+    },
     cameraContainer: {
         flex: 1
     },