Originally published on Logrocket Blog
In my experience working with React Native, one of the tasks I’ve found myself doing most often is building the functionality for uploading images from user devices. This can be challenging if you’ve never done it before.
In this tutorial, we’ll demonstrate how to use React Native Image Crop Picker to enable your users to select images from their devices or use the device’s camera to capture and upload live photos to your app.
To show how
react-native-image-crop-picker works, we’ll create a reusable image picker component that handles permission to select an image from the media library or take a new image using the camera.
By the end of the tutorial, you should use the image picker component like so:
Here’s a simple demo of the finished result:
Choosing the right React Native image picker
There are two popular libraries you can use to implement the image picker component:
react-native-image-crop-picker. React Native Image Picker is another React Native module for selecting media from the device library or camera. So why use React Native Image Crop Picker?
The advantage of using
react-native-image-crop-picker is that, unlike
react-native-image-picker, it enables you to crop and compress images. This is especially critical when building iOS apps because uploading large files could introduce performance issues. Compressing and cropping images are also helpful for users with low internet speed.
Let’s create a new React Native project using a TypeScript template:
react-native-image-crop-picker comes with some native dependencies, we need to install
pod and rebuild the app:
react-native-image-crop-picker , you should add the following config to
NSPhotoLibraryUsageDescription config describes why you need access to user photos and why you’re accessing the camera. If you only want to access images from the device library, you don’t need to add the
Now we’re ready to build and open the app:
The Android configuration for
react-native-image-crop-picker is as follows.
If you want to use the camera picker in your project, add the following to
- If you want to allow the user to use their front camera, you should also add the following to
<uses-feature android:name="android.hardware.camera" android:required="false" />
<uses-feature android:name="android.hardware.camera.front" android:required="false" />
Building an avatar profile update
In this section, we’ll build a simple screen to update the user avatar. The idea is to create an image picker component to allow the user to upload a new avatar. The avatar component should extend its
prop from the
Image component, and we’ll add
onChange to handle uploading a new image from the user device.
We’ll wrap our image with a pressable component to open the photo library when the user presses their profile picture. Opening the image library is as easy as calling the
openPicker function from
Let’s add a crop feature that allows users to crop the selected image before uploading:
Now that our avatar component is ready to be used, let’s create a profile screen and update the user’s profile picture:
Here we added the
onChange prop to the avatar. This will provide us with all the file info, which we can easily use to upload it to our server. Here is the result:
Taking a photo using the device camera
Let’s say we want to give the user the ability to take a photo from their camera and upload it. We should also give the user the option to select a photo from the library or use their device camera to take a new photo.
openCamera won’t work on iOS Simulator. To test it, you should run the app on a real device.
To use the camera, we only need to call the
openCamera function instead of
Here’s a demo of our finished React Native app:
Now you can copy-paste this image picker component whenever you need to build an image upload feature in a React Native app.
The full code is available in this Github repo if you want to play around with this project. I hope you found that interesting, informative, and entertaining. I would be more than happy to hear your remarks and thoughts.
If you think other people should read this post. Tweet, share and Follow me on Twitter for the next articles.