React Native Async Image Loading with Firebase Storage

In one of the recent apps, I had to figure out a way to load Apps asynchronously from Firebase Storage. While there are a few components out there most of them had a quirk or two. After trying them, I decided to build what worked for me. While it may not be perfect, it provides a base for others to build upon. So sharing it here.

Before Getting Started

I use the React-Native-Firebase from Invertase. It is one of the best libraries out there to simplify firebase integration. Make sure you have that installed. The steps to get that setup are all at this site. So we won’t duplicate them. You can install it from this link.

Create a Component called AsyncImage

In your project, create a new component called AsyncImage. You can do this by simply creating a JS file called AsyncImage.js and copying and pasting the following code.

In the snippet below, we import react, react-native-firebase, and other components such as View, ActivityIndicator, and Image from the react-native library. Then create a custom component class called “AsyncImage” and create the “shell” that you can use to build your component. Before you proceed, review the code comments inline to understand how each of the function was used.

Populate your component (The real code)

First, in the constructor let us set the state variables.

Then in the componentDidMount let’s load the image. We will write a custom function called getAndLoadHttpUrl(). This function is the heart of this entire component. We first check if the component is mounted, look to access a prop called “image”. This prop can be anything you want it to be and it should be used by the component to provide a reference to the item in firebase storage. We then call the getDownloadURL() function from the react-native-firebase, set the URL prop, complete the loading. If the loading results in an error, show a default image.

Next, let’s look at the componentWillUnmount(). We basically tell the component code that it is unmounted. This will ensure that there is no more new download functions are called.

You can then look at componentWillReceiveProps(props). This is a very useful function especially if someone uses your component to conduct a search or would like to do something when a prop changes. In this case, we actually expect a custom prop called refresh and if the component using this component wants to refresh, we can execute whatever we want. In this case, I just don’t do anything.

Let’s render the image now. We check if the image is mounted and loading then we return an Activity Indicator. If the image loads, then we render the image. If the component is not mounted we don’t render anything.

Improving upon this code

The code here renders the image as soon as the URL from firebase is available. It doesn’t check if the actual image loads. It works for me because the images I am loading are extremely small in size and it is actually fast. You can continue to better it by reworking the getAndLoadHttpUrl to check if all the bytes of the image successfully loaded.

That’s it

You can then use this component anywhere you want in your app using the following snippet.

I hope you find it helpful. The github gist is available here.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.