import React, { useState, useEffect } from 'react';
import { View, Image, Button, StyleSheet } from 'react-native';
import * as ImagePicker from 'expo-image-picker';
const ImagePickerComponent = () => {
const [selectedImages, setSelectedImages] = useState([]);
const pickImage = async () => {
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.All,
allowsEditing: true,
aspect: [4, 3],
quality: 1,
});
if (!result.cancelled) {
setSelectedImages([...selectedImages, result.uri]);
}
};
useEffect(() => {
(async () => {
const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
if (status !== 'granted') {
alert('Sorry, we need camera roll permissions to make this work!');
}
})();
}, []);
return (
<View style={styles.container}>
<Button title="Pick an image from camera roll" onPress={pickImage} />
<View style={styles.imageContainer}>
{selectedImages.map((uri, index) => (
<Image key={index} source={{ uri }} style={styles.image} />
))}
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
imageContainer: {
flexDirection: 'row',
marginTop: 20,
},
image: {
width: 100,
height: 100,
marginHorizontal: 5,
},
});
export default ImagePickerComponent;
NEW ENTRIES