MultipleImagePicker

A component that allows users to select and preview multiple images, with options to delete or add more images.

Import

import MultipleImagePicker from '@/components/MultipleImagePicker';

Features

• Select multiple images from device
• Display image previews
• Main image + additional images layout
• Delete functionality for each image
• Customizable appearance

Props

Basic Usage

// Basic usage with state management
const [images, setImages] = useState([]);
const [mainImage, setMainImage] = useState(null);
 
<MultipleImagePicker
  images={images}
  setImages={setImages}
  mainImage={mainImage}
  setMainImage={setMainImage}
/>
 
// With maximum limit set
<MultipleImagePicker
  images={images}
  setImages={setImages}
  mainImage={mainImage}
  setMainImage={setMainImage}
  maxImages={5}
/>

Without Main Image

If you need to collect multiple images without highlighting a main one:

<MultipleImagePicker hasMainImage={false} />

Implementation

The component uses expo-image-picker to access the device's media library and presents the selected images in a horizontal scroll layout. Users can tap on empty slots to add images or tap the trash icon on existing images to remove them.