Multiple Image Picker in React Native

How to pick multiple images from the gallery and send the images to Server

Assuming you have some prior knowledge of React-Native and how to install packages and also know information about the permissions required to use camera-roll in IOS and Android.

We will use a library called ‘expo-image-picker-multiple’ to do this job, also i am using React Navigation 5x, to use navigation.

Picking Images using expo-image-picker-multiple Library

For All those Quick Starter, Here is the whole code, those who need to understand the concept, please give this article a read.

import * as React from ‘react’;
import { Text, View, StyleSheet } from ‘react-native’;
import Constants from ‘expo-constants’;
import {ImageBrowser} from ‘expo-image-picker-multiple’
var Images = [];
export default class App extends React.Component {
state = {
hasCameraPermission: null,
hasCameraRollPermission: null,
};
imagesCallback = (callback) => {
callback.then((photos) => {
//Assigning all photos selected to an array
Images = photos;
}).catch((e) => console.log(e))
};
updateHandler = (count, onSubmit) => {
this.props.navigation.setOptions({
headerTitle: count+” selected”,
headerRight: onSubmit,
});
console.log(“List Of Images”+Images);
};
renderSelectedComponent = (number) => (
<View style={styles.countBadge}>
<Text style={styles.countBadgeText}>{number}</Text>
</View>
);
componentDidMount(){
this._unSubscribe = this.props.navigation.addListener(‘blur’,()=>{
(console.log(Images);
});
}
UNSAFE_componentWillMount(){
this._unSubscribe;
}
render() {
const emptyStayComponent = <Text style={styles.emptyStay}>Empty =(</Text>;
const noCameraPermissionComponent = <Text style={styles.emptyStay}>No access to camera</Text>;
return (
<View style={[styles.flex, styles.container]}>
<ImageBrowser
max={4}
onChange={this.updateHandler}
callback={this.imagesCallback}
renderSelectedComponent={this.renderSelectedComponent}
emptyStayComponent={emptyStayComponent}
noCameraPermissionComponent={noCameraPermissionComponent}
/>
</View>
);
}
}
const styles = StyleSheet.create({
flex: {
flex: 1
},
container: {
paddingTop: 2,
position: ‘relative’
},
emptyStay:{
textAlign: ‘center’,
},
countBadge: {
paddingHorizontal: 8.6,
paddingVertical: 5,
borderRadius: 50,
position: ‘absolute’,
right: 3,
bottom: 3,
justifyContent: ‘center’,
backgroundColor: ‘#ffa45c’
},
countBadgeText: {
fontWeight: ‘bold’,
alignSelf: ‘center’,
padding: ‘auto’,
color: ‘#5d5d5a’
}
});

1. Install the Library into the Project

Open your project’s directory, open cmd and write the following command to download the library into your project

expo install expo-image-picker-multiple

Once installed we can move on to the part where we are importing and using it.

2. Import Image-Picker-Multiple into the Project

import { ImageBrowser } from ‘expo-image-picker-multiple’;

Main Imports along the library

3. Components to be rendered according to permissions

We need to set up different components in order to render the view according to the permissions. Image-Picker-Multiple automatically asks for the permissions, so you only need to render certain components.

Component 1: emptyStayComponent — Renders Empty View.

const emptyStayComponent = <Text style={styles.emptyStay}>Nothing to Display</Text>;

Component 2: noCameraPermissionComponent — Renders when Camera permission is not granted.

const noCameraPermissionComponent = <Text style{styles.emptyStay}>No access to camera</Text>;

Component 3: renderSelectedComponent — Renders the Selected Image with a argument passed number, it shows the number of the selected image on top of the image.

renderSelectedComponent = (number) => (
<View style={styles.countBadge}>
<Text style={styles.countBadgeText}>{number}</Text>
</View>
);

Components to Render on Permissions

4. Setting handlers to handle the events of Image Selection

We want the images in an array, Right? We need to do this task in some sort of user defined event, we will perform this in a call back function.

imagesCallback = (callback) => {
callback.then((photos) => {
Images = photos;
}).catch((e) => console.log(e))
};

The callback function callback.then() returns an array of selected photos, which we are assigning to the variable Images. console.log() shows the Array with the Image objects

All Selected Images Stored in an Array

As i am using React Navigation 5x, i also get a header, that i can customize to the show the number of images selected on my header. We will do this in the updateHandler as shown below.

updateHandler = (count, onSubmit) => {
this.props.navigation.setOptions({
headerTitle: count+” selected”
});
};

Call Backs to handle on event generations

5. And, Finally we are ready to use our component ImageBrowser

render() {
const emptyStayComponent = <Text style={styles.emptyStay}>Empty =(</Text>;
const noCameraPermissionComponent = <Text style={styles.emptyStay}>No access to camera</Text>;
return (
<View style={[styles.flex, styles.container]}>
<ImageBrowser
max={4}
onChange={this.updateHandler}
callback={this.imagesCallback}
renderSelectedComponent={this.renderSelectedComponent}
emptyStayComponent={emptyStayComponent}
noCameraPermissionComponent={noCameraPermissionComponent}
/>
</View>
);

<ImageBrowser > takes in the following arguments

1. max: the maximum number of images a user can select
2. onChange — (handler): what happens when the user selects/deselects an image
3. callback — (handler): a callback handler/function that works on the photos received via the callback.
4. renderSelectedComponent — (component): a view that renders on the image basically showing the number on the selected image
5. emptyStayComponent — (component): a view that renders when the main components(renderSelectedComponent and noCameraPermissionComponent) has not loaded.
6. noCameraPermissionComponent — (component): a view that renders when the Camera Permissions is denied.

Render the Main Component ImageBrowser

Results: -

Results …

We will send these selected images to Server in the next article :)…