adding picture display with cloudfront and working on ios take photo and post flow

app/(tabs)/index.tsx

@@ -1,15 +1,21 @@
 import { CameraView, useCameraPermissions } from 'expo-camera'
-import { useRef, useState } from 'react'
-import { Button, Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+import React, { useRef, useState } from 'react'
+import { Button, Image, 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 cameraRef = useRef<CameraView>(null)
 
     async function _takePhoto() {
         if (cameraRef.current) {
-            const pic = await cameraRef.current.takePictureAsync()
+            let pic = await cameraRef.current.takePictureAsync({
+                quality: 0.1,
+                base64: true
+            })
+            console.log(pic)
             setPhoto(pic.base64 || '')
         }
     }
@@ -24,8 +30,9 @@ export default function App() {
             body: JSON.stringify({
                 userID: '6883ddb2640ebaa1a12e3791',
                 date: new Date(),
-                photo: photo,
-                notes: '3333 W Smoochie St'
+                photo,
+                address,
+                notes
             })
         })
     }
@@ -50,6 +57,26 @@ export default function App() {
             {photo ? (
                 <View style={styles.cameraContainer}>
                     <Image source={{ uri: photo }} style={styles.camera} />
+                    <View>
+                        <Text style={styles.label}>Address</Text>
+                        <TextInput
+                            style={styles.input}
+                            placeholder='Add address here...'
+                            value={address}
+                            onChangeText={setAddress}
+                        />
+                    </View>
+                    <View>
+                        <Text style={styles.label}>Notes</Text>
+                        <TextInput
+                            style={styles.multiline}
+                            placeholder='Add notes here...'
+                            multiline
+                            numberOfLines={4}
+                            value={notes}
+                            onChangeText={setNotes}
+                        />
+                    </View>
                     <View style={styles.buttonContainer}>
                         <TouchableOpacity style={styles.button} onPress={() => setPhoto('')}>
                             <Text style={styles.text}>Retake</Text>
@@ -109,5 +136,19 @@ const styles = StyleSheet.create({
         fontSize: 24,
         fontWeight: 'bold',
         color: 'white'
+    },
+    input: {
+        backgroundColor: 'white',
+        borderRadius: 5,
+        fontSize: 18,
+        textAlignVertical: 'top'
+    },
+    label: { color: 'white', fontSize: 18, marginBottom: 5, marginTop: 10 },
+    multiline: {
+        backgroundColor: 'white',
+        borderRadius: 5,
+        fontSize: 18,
+        minHeight: 80,
+        textAlignVertical: 'top'
     }
 })