How to upload image to Firebase using React Native

Uploading image to firebase is one of the most complicated part of developing a image based ( React Native) app. In this article we will unravel this complicated puzzle, so that, it is a cake walk for us next time we code a firebase image upload feature.

We will we using following two pre-build components for our article :

  1. https://www.npmjs.com/package/react-native-camera-roll-picker
  2. https://www.npmjs.com/package/react-native-fetch-blob

If you go through the Firebase documentation about uploading files, you will learn, that before uploading file we need to convert it to either one of the formats, like File, Blob, Base64 etc. So, we will first convert the file into  base64 format and then into Blob format and then we can use firebase ‘put’ method to upload the file to Firebase Google Cloud Storage bucket.

Here is the code to convert file to a format supported by Firebase and then successfully upload it to Firebase storage :

Once the image is uploaded successfully, you will get the url which points to the image uploaded on firebase. You can save this url to firebase database and fetch it later to render it in your react native app using Image component.

Here is demo of firebase image upload using react native :

 

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *