image picker fix, working order

components/CarForm.tsx

@@ -33,12 +33,13 @@ export const CarForm = () => {
                 price: Number(formData.price),
                 year: Number(formData.year),
                 images: images,
-                postedBy: user.$id
+                postedBy: user.$id,
+                featured: false
             });
 
             router.back();
         } catch (error) {
-            console.error('Error creating car:', error);
+            console.error('Error creating car listing:', error);
             alert('Failed to create car listing');
         }
     };
@@ -47,15 +48,11 @@ export const CarForm = () => {
         <ScrollView className="p-4">
             <Text className="text-lg font-bold mb-4">Add New Car</Text>
             
-            {/* Images */}
             <View className="mb-4">
                 <ImagePickerComponent 
-                    onImageSelected={(url) => setImages([...images, url])}
-                    multiple
+                    onImageSelected={setImages}
+                    images={images}
                 />
-                <Text className="text-sm text-gray-500 mt-2">
-                    {images.length} images selected
-                </Text>
             </View>
 
             {/* Basic Info */}
@@ -115,7 +112,7 @@ export const CarForm = () => {
                 />
             </View>
 
-            {/* Fuel Type Picker */}
+            {/* Pickers */}
             <View className="border border-gray-300 rounded-lg mb-4 px-2">
                 <Picker
                     selectedValue={formData.fuelType}
@@ -127,7 +124,6 @@ export const CarForm = () => {
                 </Picker>
             </View>
 
-            {/* Transmission Picker */}
             <View className="border border-gray-300 rounded-lg mb-4 px-2">
                 <Picker
                     selectedValue={formData.transmission}
@@ -139,6 +135,7 @@ export const CarForm = () => {
                 </Picker>
             </View>
 
+            {/* Submit Button */}
             <TouchableOpacity
                 onPress={handleSubmit}
                 className="bg-blue-500 p-4 rounded-full"

components/ImagePicker.tsx

@@ -1,16 +1,21 @@
-import React from 'react';
-import { View, TouchableOpacity, Image, Text } from 'react-native';
+import React, { useState } from 'react';
+import { View, TouchableOpacity, Image, Text, ScrollView } from 'react-native';
 import * as ImagePicker from 'expo-image-picker';
 import { uploadImage } from '@/lib/appwrite';
 import icons from '@/constants/icons';
 
 interface Props {
-    onImageSelected: (url: string) => void;
-    multiple?: boolean;
+    onImageSelected: (url: string[]) => void;
+    images: string[];
 }
 
-export const ImagePickerComponent = ({ onImageSelected, multiple = false }: Props) => {
+export const ImagePickerComponent = ({ onImageSelected, images }: Props) => {
     const pickImage = async () => {
+        if (images.length >= 5) {
+            alert('Maximum 5 images allowed');
+            return;
+        }
+
         const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
         
         if (status !== 'granted') {
@@ -19,27 +24,24 @@ export const ImagePickerComponent = ({ onImageSelected, multiple = false }: Prop
         }
 
         const result = await ImagePicker.launchImageLibraryAsync({
-            mediaTypes: ImagePicker.MediaTypeOptions.Images,
+            mediaTypes: ['images'],
             allowsEditing: true,
             aspect: [4, 3],
             quality: 1,
-            allowsMultipleSelection: multiple,
         });
 
         if (!result.canceled) {
             try {
-                // Convert image to blob
                 const response = await fetch(result.assets[0].uri);
                 const blob = await response.blob();
                 
-                // Upload to Appwrite
                 const imageUrl = await uploadImage({
                     uri: result.assets[0].uri,
                     type: 'image/jpeg',
                     name: 'image.jpg',
                     size: blob.size
                 });
-                onImageSelected(imageUrl);
+                onImageSelected([...images, imageUrl]);
             } catch (error) {
                 console.error('Error uploading image:', error);
                 alert('Failed to upload image');
@@ -47,17 +49,49 @@ export const ImagePickerComponent = ({ onImageSelected, multiple = false }: Prop
         }
     };
 
+    const removeImage = (index: number) => {
+        const newImages = [...images];
+        newImages.splice(index, 1);
+        onImageSelected(newImages);
+    };
+
     return (
-        <TouchableOpacity 
-            onPress={pickImage}
-            className="flex items-center justify-center border-2 border-dashed border-gray-300 rounded-lg p-4"
-        >
-            <Image 
-                source={icons.dumbell} 
-                className="w-8 h-8 mb-2"
-            />
-            {/* change dumbell to camera */}
-            <Text className="text-gray-500">Upload Image</Text>
-        </TouchableOpacity>
+        <View>
+            <ScrollView 
+                horizontal 
+                showsHorizontalScrollIndicator={false}
+                className="mb-4"
+            >
+                {images.map((image, index) => (
+                    <View key={index} className="relative mr-2">
+                        <Image 
+                            source={{ uri: image }} 
+                            className="w-24 h-24 rounded-lg"
+                        />
+                        <TouchableOpacity 
+                            onPress={() => removeImage(index)}
+                            className="absolute -top-2 -right-2 bg-red-500 rounded-full p-1"
+                        >
+                            <Text className="text-white text-xs">✕</Text>
+                        </TouchableOpacity>
+                    </View>
+                ))}
+            </ScrollView>
+
+            {images.length < 5 && (
+                <TouchableOpacity 
+                    onPress={pickImage}
+                    className="flex items-center justify-center border-2 border-dashed border-gray-300 rounded-lg p-4"
+                >
+                    <Image 
+                        source={icons.dumbell} 
+                        className="w-8 h-8 mb-2"
+                    />
+                    <Text className="text-gray-500">
+                        Upload Image ({images.length}/5)
+                    </Text>
+                </TouchableOpacity>
+            )}
+        </View>
     );
 };