React Native Firebase Storage

Assuming you have a React Native Firebase app and now you want a simple tutorial on how to use Firebase Storage, you came to the right place.

First, let’s understand how it works and some key concepts.

How it works

Let us compare it to how your computer filing system works. I am going to split it up into 3 categories: 1. Hard Drive 2. Folders 3. Files.

The Hard Drive is where the information is stored. It has a specific amount it can hold. It can have a unique name.

With Firebase Cloud Storage you need to ‘set aside’ space to act as your hard drive. They call it a bucket (ie. a basic container). Every piece of data that you would like to hold in your Firebase Cloud Storage must be in a bucket. Since in reality, it is cloud storage and not a hard drive it can do things that a hard drive cannot. But it also has a lot of restrictions.

Let’s first talk about what cloud storage can do.

You aren’t limited by space at all. You can store however much you want in the storage. Just be aware that it will affect the pricing. Depending on your plan you can also create multiple buckets.

When you create your bucket you specify where geographically you would like your bucket to be. This is so that there shouldn’t be any lagging. When your base users’ location is in a specific region, the server shouldn’t be across the world. You can also check out Dual-regions and Multi-regions. They allow you to have your data in more than one region and another perk of it being cloud storage is that it's geo-redundant. That means that your data is actually in more than one place at a time.

Two more things that you can do with cloud storage. Number one is security. You can restrict the storage to only ones with the proper authority. Number two is to specify a default storage class. A storage class is a way to define how often you intend to access data and create different price points for each of them. The default is Standard storage which is best used for frequently accessed data or data that you don’t want to be stored for long periods of time.

Next, we will talk about the restrictions.

The name of each bucket has to be globally unique. This is because every bucket resides in a single namespace. Once you create your bucket you can’t change the name. You aren’t able to nest buckets. There are limits on bucket creation and bucket deletion.

Next, let us talk about Folders and Files.

In Firebase Cloud Storage there is no hierarchal structure at all. It uses a flat namespace to store data. But the tools that are used to access the data use a virtual hierarchy that uses the slash / to determine the Folder/File system. There is no limit to how many data objects you can store in a bucket and each object must have a unique name for the bucket. But in a traditional Folder/File system you would be able to have the same name in two different folders!

Take for example: flowers.jpg and images/flowers.jpg
Can you save them both in the same bucket?

The answer is yes!

They are each able to be stored since the cloud storage looks at ‘flowers.jpg’ as a full name and ‘images/flowers.jpg’ as a different full name. The virtual hierarchy treats them as being in separate ‘Folders’ or in the terminology of Cloud Storage ‘parent’ and ‘child’.

How to use

Installation
First, let’s install the Storage module

# Install the storage module
yarn add @react-native-firebase/storage
# If you're developing your app using iOS, run this command
cd ios/ && pod install

Reference
In order to gain access to a bucket, you need to make a reference to it. If you don’t specify a bucket it will go to your default bucket. On your firebase console, it is the path that begins with gs:// .

const bucketRef = storage()

You can use ref to get a storage reference. You can even make a reference to an object that doesn’t exist yet.

const storageRef = bucketRef.ref()
// ref an object directly
const flowers = bucketRef.ref('flowers.jpg')
// ref a nested object
const flowers = bucketRef.ref('images/flowers.jpg')

You can use parent and child to traverse the storage and create a reference.

const imagesRef = storageRef.child('images')
const flowers = images.child('flowers.jpg')
const rocks = flowers.parent.child('rocks.jpg')

Or use root to get back to the bucket.

const storageRef = rocks.root

To get info from a reference you can use fullPath ('images/flowers.jpg'), name ('flowers.jpg') or bucket (which bucket the file is from).

Uploading
You can use putFile to upload a file using a string path to the file. The putFile returns a task which lets you hook onto information about the progress of the upload or to pause and resume the upload.

const upload = async () => {
  const task = await reference.putFile(pathToFile)
  // This is something you would use a progress bar for
  task.on('state_changed', taskSnapshot => {
    console.log(`${taskSnapshot.bytesTransferred} transferred out of ${taskSnapshot.totalBytes}`);
  })
  // You can manually pause the upload
  setTimeout(() => task.pause(), 500)
  // You can manually resume the upload
  setTimeout(() => task.resume(), 600)
  // When finished upload what to return
  task.then(() => {
    console.log('Image uploaded to the bucket!');
  })

Downloading
In order to ‘download’ a file all you need is a url. To get the url from a reference use .getDownloadURL() .

const url = await flowers.getDownloadURL()

Deleting
Finally to delete a file, use delete() method.

flowers.delete().then(() => {
  // File deleted successfully
}).catch((error) => {
  // Uh-oh, an error occurred!
})

I hope this helps you. Happy Coding!