{ React Native } Image Picker

import React, { useState, useEffect } from 'react';
import { View, Image, StyleSheet, TouchableOpacity } from 'react-native';
import * as ImagePicker from 'expo-image-picker';
import CameraImage from '../../assets/images/camera_btn.png';

const styles = StyleSheet.create({
  imagesContainer: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  image: {
    width: 100,
    height: 100,
    margin: 5,
  },
});

const SellPage = () => {
  // State for storing the images
  const [images, setImages] = useState([]);

  // Function to pick an image from the media library
  const pickImage = async () => {
    // Request permission to access the media library
    const permissionResult = await ImagePicker.requestMediaLibraryPermissionsAsync();

    // If permission is not granted, show an alert and return
    if (!permissionResult.granted) {
      alert('Permission to access the camera roll is required.');
      return;
    }

    // Launch the image picker
    const pickerResult = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      allowsEditing: true,
      aspect: [4, 3],
      quality: 1,
    });

    // If an image is selected, add it to the images array
    if (pickerResult.assets && pickerResult.assets.length > 0) {
      setImages([...images, pickerResult.assets[0].uri]);
    }
  };

  // Request permission to access the media library when the component mounts
  useEffect(() => {
    (async () => {
      const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
      if (status !== 'granted') {
        alert('Sorry, we need camera roll permissions to make this work!');
      }
    })();
  }, []);

  // Render the component
  return (
    <View style={styles.imagesContainer}>
      {/* Camera image button to trigger the image picker */}
      <TouchableOpacity onPress={pickImage}>
        <Image source={CameraImage} style= />
      </TouchableOpacity>

      {/* Render the selected images */}
      {images.length
        ? images.map((imageUrl, index) => (
            <React.Fragment key={index}>
              <Image source= style={styles.image} />
            </React.Fragment>
          ))
        : ''}
    </View>
  );
};

export default SellPage;