Most mobile app has user taken images functionality and store those images in cloud storage. So in this article, I will cover how to get multiple images from the gallery and I'll make part 2 for uploading those to AWS S3.
Get multi select images from the gallery
I used react-native-image-crop-picker
for multiple selections of images from the gallery of both iOS and Android devices.
Install react-native-image-crop-picker
Please go through their library to install and configure this package here.
Define state and basic UI
I created a button and on its press, I am opening the phone's gallery to select images.
<TouchableOpacity onPress={() => openImageLibrary()}>
<Text>Select Photos</Text>
</TouchableOpacity>
now to store these images I created a state using React hooks
const [images, setImages] = useState([]);
Request camera permissions
Before opening the gallery of the phone, we have to take user permission to access the gallery and photos. So for that, I used PermissionsAndroid
method.
const requestExternalWritePermission = async () => {
if (Platform.OS === 'android') {
try {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.CAMERA,
{
title: 'Access to photos',
message: 'Our App would like to access your photos on your device',
buttonNegative: 'Deny',
buttonPositive: 'Allow',
},
);
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
return granted;
} else {
console.log('Camera permission denied');
}
} catch (err) {
console.warn(err);
}
} else {
return true;
}
};
This function is checking if the platform or device is android
then it would show the dialog box with a message and buttons below to accept or reject the permissions.
Before that, I also defined user permission in AndroidManifest.xml
file like this
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.CAMERA" />
Note: I didn't need to add permissions for the iOS side at this point because during the installation process of react-native-image-crop-picker
it will ask you to add camera and gallery permissions in info.plist
file.
Open image library
Now I defined my method to select photos from the gallery and storing in my images
state.
const openImageLibrary = async () => {
let isStoragePermitted = await requestExternalWritePermission();
if (isStoragePermitted) {
openPicker({
multiple: true,
mediaType: 'photo',
maxFiles: `4`,
showsSelectedCount: true,
}).then(imgs => {
if (imgs.length <= 4) {
setImages([...images, ...imgs]);
} else {
setImages([...images]);
ToastAndroid.show("Maximum of 4 images allowed", ToastAndroid.SHORT);
}
});
}
};
In this function, I am calling requestExternalWritePermission
method which I described above, if the user clicks granted then it will open the default gallery view of the user device and will allow the user to select multiple photos. I defined maxFiles
as 4, you can define your limit as you want.
Note: maxFiles
and showsSelectedCount
prop only works for iOS devices so you would have to define custom logic for android devices.
So I am showing ToastAndroid
saying Maximum of 4 images allowed if the user selects more than 4 images from the android device.
Display images in your App
Now I display the images on screen like this
{images.length > 0 &&
images.map(image => (
<View key={image.path}>
<Image
style={{
width: 80,
height: 80,
}}
source={{uri: image.path}}
/>
</View>
))}
Please go to part 2 to upload these images to AWS
Top comments (0)