How to upload multiple images to AWS S3 in react-native App — Part 1

Get multi-select images from the gallery

Install react-native-image-crop-picker

Define state and basic UI

const [images, setImages] = useState([]);

Request camera permissions

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 n 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;
}
};
<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" />

Open image library

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);
}
});
}
};

Display images in your App

{images.length > 0 &&
images.map(image => (
<View key={image.path}>
<Image
style={{
width: 80,
height: 80,
}}
source={{uri: image.path}}
/>
</View>
))}

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store