Need help with Firebase-Image-Upload-React-Native?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

128 Stars 22 Forks 4 Commits 18 Opened issues


Demo to handle image with Firebase storage

Services available


Need anything else?

Contributors list

# 443,020
3 commits
# 358,719
1 commit

Handling image upload isn't a trivial task. Currently I have to implement such feature in a React Native app. Users can upload images to a feed controlled by a backend. Image uploading is data and network intensive, and you need to handle it gracefully to make it scalable and reduce stress on the server.

Eventually we decide to use Firebase Storage to handle heavy image uploading, the app then just submits the image URL to the backend server.

Firebase Storage is designed specifically for scale, security, and network resiliency:

  • Scale: every file uploaded is backed by Google Cloud Storage, which scales to petabytes.
  • Security: files can be secured to specific users or sets of users using Storage Security Rules.
  • Network resiliency: uploads and downloads are automatically retried in the case of poor network connections, so you don’t have to keep track of network status.

At first, I thought I hit a dead end because I saw this quote from Firebase Blog:

React Native does not support the File and Blob types, so Firebase Storage uploads will not work in this environment. File downloads do work however.

Luckily, I found a module that had File and Blob types support in React Native:

Some features stand out and it sounds promising:

  • Transfer data directly from/to storage without BASE64 bridging.
  • File API supports normal files, Asset files, and CameraRoll files.
  • Native-to-native file manipulation API, reduce JS bridging performance loss.
  • File stream support for dealing with large file (Blob type).
  • Blob, File, XMLHttpRequest polyfills that make browser-based library available in React Native (experimental).

So, let's build an App that can choose some photos on device and upload to Firebase Storage with


This is how the app looks like after we finish:

Firebase Demo

Let's follow the steps below to implement it!

1. Init a demo project:

$ react-native init FirebaseStorageDemo

2. Install necessary modules:

$ yarn add firebase react-native-fetch-blob react-native-image-picker
$ RNFB_ANDROID_PERMISSIONS=true react-native link

The extra

is for image picking.

3. Add permissions for Android:




4. Configure Firebase Storage:

First we need to create an

folder in the root Storage:

By default Firebase forbids read or write to the Storage folder. We need to open up permission rules.

For this demo app, I will just open up both read and write for the

folder. In real situation, you probably want to tighten the permissions.

5. Initialize Firebase based on your config:

const config = {
  apiKey: "",
  authDomain: "",
  storageBucket: "",

6. Enable Blob and XMLHttpRequest polyfills:

const Blob = RNFetchBlob.polyfill.Blob
window.XMLHttpRequest = RNFetchBlob.polyfill.XMLHttpRequest
window.Blob = Blob

7. Implement uploadImage function:

const uploadImage = (uri, mime = 'application/octet-stream') => {
  return new Promise((resolve, reject) => {
    const uploadUri = Platform.OS === 'ios' ? uri.replace('file://', '') : uri
      const sessionId = new Date().getTime()
      let uploadBlob = null
      const imageRef = storage.ref('images').child(`${sessionId}`)

  fs.readFile(uploadUri, 'base64')
  .then((data) => {
    return, { type: `${mime};BASE64` })
  .then((blob) => {
    uploadBlob = blob
    return imageRef.put(blob, { contentType: mime })
  .then(() => {
    return imageRef.getDownloadURL()
  .then((url) => {
  .catch((error) => {

}) }

Basically it uses Firebase SDK to create a reference to the Storage folder, then write the binary data from the selected image to it.

For Blob type, I find it most stable to encode the binary data with Base64 first. I hope it will get more stable in future release of



MIT License

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.