feat: add camera capture for trip and item images

app.json

@@ -34,6 +34,15 @@
       "eas": {
         "projectId": "1275f90e-33c6-4af1-942e-ca29a309f8c8"
       }
-    }
+    },
+    "plugins": [
+      [
+        "expo-image-picker",
+        {
+          "photosPermission": "Allow Luggage List to access your photos for trip and item images.",
+          "cameraPermission": "Allow Luggage List to use your camera to take trip and item photos."
+        }
+      ]
+    ]
   }
 }

src/AppRoot.js

@@ -169,6 +169,23 @@ export default function AppRoot() {
     }
   }
 
+  async function takeImage(onPicked) {
+    const perm = await ImagePicker.requestCameraPermissionsAsync();
+    if (!perm.granted) {
+      Alert.alert('Permission needed', 'Allow camera access to take photos.');
+      return;
+    }
+
+    const result = await ImagePicker.launchCameraAsync({
+      allowsEditing: false,
+      quality: 0.85,
+    });
+
+    if (!result.canceled && result.assets?.[0]?.uri) {
+      onPicked(result.assets[0].uri);
+    }
+  }
+
   function createTrip() {
     if (!tripForm.name.trim()) {
       Alert.alert('Missing name', 'Trip name is required.');
@@ -526,6 +543,7 @@ export default function AppRoot() {
               tripForm={tripForm}
               updateTripForm={updateTripForm}
               pickTripImage={() => pickImage((uri) => updateTripForm('imageUri', uri))}
+              takeTripImage={() => takeImage((uri) => updateTripForm('imageUri', uri))}
               templateTrip={templateTrip}
               createTrip={createTrip}
               trips={data.trips}
@@ -587,6 +605,7 @@ export default function AppRoot() {
         setItemModalVisible={setItemModalVisible}
         updateItemForm={updateItemForm}
         pickItemImage={() => pickImage((uri) => updateItemForm('imageUri', uri))}
+        takeItemImage={() => takeImage((uri) => updateItemForm('imageUri', uri))}
         saveItemFromModal={saveItemFromModal}
       />
 

src/modals/ItemModal.js

@@ -11,6 +11,7 @@ export default function ItemModal({
   setItemModalVisible,
   updateItemForm,
   pickItemImage,
+  takeItemImage,
   saveItemFromModal,
 }) {
   return (
@@ -81,9 +82,14 @@ export default function ItemModal({
                 </Field>
               ) : null}
 
-              <Pressable style={styles.secondaryBtn} onPress={pickItemImage}>
-                <Text style={styles.secondaryBtnText}>{itemForm.imageUri ? 'Change image' : 'Add image'}</Text>
+              <View style={styles.actionRow}>
+                <Pressable style={[styles.secondaryBtnTight, styles.flex]} onPress={takeItemImage}>
+                  <Text style={styles.secondaryBtnText}>Take photo</Text>
                 </Pressable>
+                <Pressable style={[styles.secondaryBtnTight, styles.flex]} onPress={pickItemImage}>
+                  <Text style={styles.secondaryBtnText}>{itemForm.imageUri ? 'From gallery (change)' : 'From gallery'}</Text>
+                </Pressable>
+              </View>
               {!!itemForm.imageUri && <Image source={{ uri: itemForm.imageUri }} style={styles.previewImageSmall} />}
 
               <Pressable style={styles.primaryBtn} onPress={saveItemFromModal}>

src/styles.js

@@ -211,6 +211,11 @@ export const styles = StyleSheet.create({
     color: '#dbeafe',
     fontWeight: '700',
   },
+  actionRow: {
+    flexDirection: 'row',
+    gap: 8,
+    marginTop: 4,
+  },
 
   inlineToggle: {
     marginTop: 2,

src/tabs/TripsTab.js

@@ -17,6 +17,7 @@ export default function TripsTab({
   tripForm,
   updateTripForm,
   pickTripImage,
+  takeTripImage,
   templateTrip,
   createTrip,
   trips,
@@ -58,9 +59,14 @@ export default function TripsTab({
         <DateField label="Start Date" value={tripForm.startDate} onPress={() => openDatePicker('startDate')} />
         <DateField label="End Date" value={tripForm.endDate} onPress={() => openDatePicker('endDate')} />
 
-        <Pressable style={styles.secondaryBtn} onPress={pickTripImage}>
-          <Text style={styles.secondaryBtnText}>{tripForm.imageUri ? 'Change trip image' : 'Add trip image'}</Text>
+        <View style={styles.actionRow}>
+          <Pressable style={[styles.secondaryBtnTight, styles.flex]} onPress={takeTripImage}>
+            <Text style={styles.secondaryBtnText}>Take photo</Text>
           </Pressable>
+          <Pressable style={[styles.secondaryBtnTight, styles.flex]} onPress={pickTripImage}>
+            <Text style={styles.secondaryBtnText}>{tripForm.imageUri ? 'From gallery (change)' : 'From gallery'}</Text>
+          </Pressable>
+        </View>
 
         {tripForm.imageUri ? <Image source={{ uri: tripForm.imageUri }} style={styles.previewImage} /> : null}