React Native Image Upload, Retrieve & Delete From Firebase Cloud Storage (iOS & Android)
With React Native, you can build cross-platform mobile applications using JavaScript as the primary programming language. Each of your mobile apps may contain single or multiple user interfaces to serve a wide range of purposes.
In this tutorial, we will go through how to upload images to Firebase Cloud Storage in React Native applications.
Here are some libraries which will help you to done your work.
1-Install react-native-image-picker
A React Native module that allows you to use native UI to select media from the device library or directly from the camera. This module will help us to pick an image that will be sent to our Firebase Storage Bucket.
To install react-native-image-picker you just need to run this command in the project terminal.
yarn add react-native-image-picker2-Install react-native-image-resizer (Optional)
A React Native module that can create scaled versions of local images. Sometime the Image which we select to upload has size of 7 MB or 8 MB or more than 10 MB it depends on the image quality. So it is better to reduce the size of image so that it will not effect on your app Performance. This library will help you to do the trick.
To install react-native-image-resizer you just need to run this command in the project terminal.
yarn add react-native-image-resizer3-Linking
From React Native 0.60 and higher, linking is automatic. So you don’t need to run react-native link.
If you’re on a Mac and developing for iOS, you need to install the pods (via Cocoapods) to complete the linking.
npx pod-install ios4-Select the image
Now the URI of the selected image will be set in selectedPictureUri state variable.
5-Reduce the size of image (Optional)
Let suppose if you want to store the image of user for his profile picture or you don’t want to display that picture in full screen in the app you can reduce the size of that image before uploading.
If you need to show the image in different sizes in the app like you want to show the image as profile picture which will be like 40 x 40 in width and height or something like that and also want to show that image on another screen with more width and height then the image in 40 x 40 in width and height will not be shown clear.
To solve that issue
You can store different sizes of images in Storage like Facebook , Instagram & Twitter do. For example for profile it will be 40 x 40 in size and for other screen it will be like 400 x 400 in size.
When user selects the image you can generate images in different sizes from it which depends on your requirement. So that it will fetched from storage fast and this will not impact on your App Performance.
By using ImageResizer we will resize our image for profile picture.
This will create new image with your given width, height ,quality and other options and set the uploadUri and imageName in the state.
6-Upload Image To Firebase Cloud Storage
Now here is the thing for which you are waiting. I am supposing that you already set and configured the firebase with your react native project.
7-Retrieve Image From Firebase Cloud Storage
To retrieve the image from the storage you should have the image reference so that you can generate downloadURL from it. You can generate image reference from the image name as shown below
To display the image you should have downloadURL of that image.
You can now display that image in the screen by using profileImageUrl which is state variable and downloadURL of the image.
<Image source={this.state.profileImageUrl} style={styles.image} />You can store that url in user document or node so the next time you get that url easily after fetching user document or node.
8-Delete Image From Firebase Cloud Storage
To delete the image from storage you need to have the image reference. You can generate that reference from image name as shown below and can delete the image.
Where to go from here
I hope this article helps in uploading, retrieving and deleting the images from firebase storage in React Native apps. You can get the more detail of the react-native-image-picker & react-native-image-resizer from the below resources
Cheers 🥰.
