Deep Dive into Implementing react-native-image-picker (2024)

Moleseng Mokgosi

What is React Native Image Picker?

React-Native-Image-Picker is a React Native module that allows you to use native UI to select media from the device library or directly from the camera. It is currently used by almost 60 000 developers, as it is quite robust in what it offers.

Installing and setting up React-Native-Image-Picker

Start by installing the package to your project:

Android:

yarn add react-native-image-picker

iOS:

npx pod-install ios

On the react-native-image-picker repository, there is advise on some post-install steps. These include:
If you are allowing user to select image/video from photos, add NSPhotoLibraryUsageDescription.

iOS

If you are allowing user to capture image add NSCameraUsageDescription key also.
If you are allowing user to capture video add NSCameraUsageDescription add NSMicrophoneUsageDescription key also.

Android

Permissions are not required unless you have the saveToPhotos property set to true.

Permissions for iOS go in the Info.plist file in the test folder as follows:

<key>NSPhotoLibraryUsageDescription</key>
 <string>$(PRODUCT_NAME) would like access to your photo gallery</string>
<key>NSCameraUsageDescription</key>
 <string>$(PRODUCT_NAME) would like to use your camera</string>

Permissions for Android go into the AndroidManifest.xml file :

The React-Native-Image-Picker module does not need permissions to work for your users, but if you do set up the option to save images captured on the app to gallery, you will need one permission:

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

Here you are asking your user for permission to access their gallery and save the images captured from the application to their gallery.

Implementing React-Native-image-Picker

Create a component Profile.js. react-native-image-picker has two methods we can use; launchCamera() which will launch the camera to take a picture and launchImageLibrary() which will launch the gallery to pick a picture or video. We will import these into our file.

The launchLibrary method launches the user’s gallery and takes two parameters; configurations for the image and a response.

Image/video captured via camera will be stored in temporary folder so will be deleted any time, so don’t expect it to persist. Use saveToPhotos: true (default is false) to save the file in the public photos. saveToPhotos requires WRITE_EXTERNAL_STORAGE permission on Android 28 and below (You have to obtain the permission, the library does not).

The launchCamera method launches the user’s camera and and also takes two parameters; configurations for the image and a response.

The pickerResponse state variable is to save the response from the image picker. The imageFromDB state variable is to save the image from the database so we can access it later.

We use the Image component as follows:

<Card style=//card styles, specifically if you want the image to have elevation>
 <Image
 source={{
 uri: `data:image/*;base64,${imageFromDB}`,,
 width: ..,
 height: ...,
 }}
 style=//extra image styles
 />
</Card>

This line of code

uri: `data:image/*;base64,${imageFromDB}`,

means that we use the uri property to render the image from the database and image/* is a catchall that will make sure that the component renders whichever image type.

We can also add a pressable icon to activate a modal where the user can choose to access their gallery or camera to upload an image.

 <Pressable
 style={({ pressed }) => [
 {
 ...styles.cameraIconView,
 opacity: pressed ? 0.5 : 1,
 },
 ]}
 onPress={() => setVisible(true)}
>
 <IconComponent
 source={icons.camera}
 tintColor={themeColor.primaryWhite}
 />
</Pressable>

We want to put the modal in our Profile component and pass it all the necessary properties.

<ImagePickerModal
 isVisible={visible}
 onClose={() => setVisible(false)}
 onImageLibraryPress={onImageGalleryPress}
 onCameraPress={onCameraPress}
/>

Finally, we will need to create an ImagePickerModal component.

For those of you wondering why we are using a base64 image instead of sending the image as is to the database, base64 encoding reduces the size of data by up to 33% and many programming languages have built in support for base64 encoding.

To render our image, we will be looking at 3 cases:

The user is not logged in
The user is logged in but does not have a profile image
The user is logged in and does have a profile image
The user is logged in and just changed their profile image

userLoggedIn ? {
 uri ? (
 <Card style={styles.userDBImageView}>
 <Image
 source={{
 uri: uri,
 width: styles.userDBImage.width,
 height: styles.userDBImage.height,
 }}
 style={styles.userDBImage}
 />
 </Card>
) : imageFromDB ? (
 <Card style={styles.userDBImageView}>
 <Image
 source={{
 uri: `data:image/*;base64,${imageFromDB}`,
 width: styles.userDBImage.width,
 height: styles.userDBImage.height,
 }}
 style={styles.userDBImage}
 // tintColor={colors.primaryWhite}
 />
 </Card>
) : (
 <Card
 style={{
 ...styles.userImageView,
 marginTop: '8%',
 width: '25%',
 }}
 >
 <Image
 source={icons.profileImage}
 style={styles.userImage}
 tintColor={colors.primaryWhite}
 />
 </Card>
)
) : (
<Card style={styles.userImageView}>
 <Image
 source={icons.profileImage}
 style={styles.userImage}
 tintColor={colors.primaryWhite}
 />
</Card>
 )
}

User is not logged in

The last component will be the one to be called when the user is not logged in, so the source for that image should be the default/fallback image.

The user is logged in but does not have a profile image

When the user is logged in but does not have a profile image, we will show the same image as when the user is not logged in, which is the second last component in the code.

The user is logged in and does have a profile image

The second component is rendered when a check has been executed to see if the user has logged in and if the user has an image from the database

The user is logged in and just changed their profile image

This code snippet first looks at if the user has selected/captured a new image using the uri variable. If there is a value for uri, it will immediately get displayed since it has precedence over the other variables in the ternary operator.

react-native-image-picker makes implementing image uploading capabilities very easy. It is so robust in its offering that you can easily build yourself an application where users can upload images and videos. It also helps make user experience pleseant but the best part about it is that it makes the developer experience even more enjoyable.