How to create a Loading Icon for your React Native App

Hi there, it is Sunday afternoon and the weather is bright but melancholy in England at this very moment… So I thought it would be cool to write a tutorial about how to create a simple loading screen for your React Native app. Lets begin!

The first thing you will want to do is create a new React Native project. So open your terminal and navigate to a place/folder in your computer that you want the project to be located at. Use the command below to create the React Native project.

Now open this project in your chosen text editor, I like to use Visual Studio Code, one of the well known practices with React Native or just React is to have a succinct folder structure, since this is only a small tutorial we won’t worry about that too much, however, in the root of your project create a folder called “components” and inside of this create a js file called “LoadingIcon”.

So now your project should look like the screenshot below.

The first 2 pieces of code you will need to enter into the “LoadingIcon” file is below.

“import React from react” — Used to import functionalities of React into the file.

“import {ActivityIndicator} from react-native” — Imports the “ActivityIndicator” component which displays a circular loading indicator animation. You can customise this animation with different colours and sizes.

Since we won’t be using state in this file we do not need to create a class, instead we create a variable equal to the “ActivityIndicator” component so it is known as a “stateless component”. An example is below.

Above I have created a variable called “LoadingIcon” and destructured the parameters so I do not have to enter “props” before referencing a prop in the component.

I am passing in one prop of “isIconAnimating” which is equal to the referenced method “animating” within the “ActivityIndicator” component. The “animating” is either a “true” or “false” value, if true, the activity indicator will show on the screen, however, if false, the activity indicator will not show.

The size method can be “small” or “large” or a number can be used, however, using a number is only supported on Android. I prefer using “large”.

The colour method is self explanatory and just defines the colour of the activity indicator.

The next step is to simply export the component using the code below.

Since the const “LoadingIcon” is the only function we are exporting we can use the “default” keyword after “export”.

The next step is to import the “LoadingIcon” function into another file and show the loading icon on the load of the component.

Find the component called “App.js” this should contain all of your default text for your app. Now import your loading icon into this file using the code below.

In addition, you should scrap the default “App” const variable and the code inside it and replace it with the below for now.

One of the main uses of this loading icon is for the icon to show while data is is waiting to be loaded onto the screen for the user to see, this may be from a website, database or an API. For todays tutorial I will use an API as an example to show the loading icon. The API is completely free to use and you do not need an api key, it is an API that will retrieve a random image of one of my favourite animals apart from Flamingos and llamas…dogs!

We will be fetching a random image of a dog so you will first need to import the “image” component from “react-native”. So your react-native import should now look like the below.

Next add state to your component (you will need to add this inside of the constructor tag), you will need 2 states, one for showing the icon and another for displaying the image returned from the API into the image component. An example of the state is below.

Next add the lifecycle component method “componentDidMount”. This lifecycle methos is invoked/ran straight after a component is mounted, it is simply the below code.

This is where we will write the code to fetch the data from our API. We will be using “fetch” to retrieve this data and then convert it to json. Inside of the “success” part of the function we then set the state of iconAnimating to false, this is because we want the icon to show when the component loads and only hide when we have successfully retrieved the data from the API so we will only see the loading icon for a few seconds, if we were retrieving 10,000 records we would see it for longer.

In addition, we are setting the state “imageURL” to “jsonResponse.message” because “jsonResponse” is what I have set the parameter to be which will contain the successfully returned data from the API. The message is the key to use to access the returned image url.

If you want to see the “console.log” statement then you can open your simulator of your app by entering the command “react-native run-ios” in your terminal in the code editor you are using then when this is open press “cmd” and “D” on your mac then click “debugging” or “start debugging” this will then open a tab on your default browser where you can inspect the console results.

Furthermore, since we have now written the method to retrieve the data we need to use the image component to show the data. Below is an example of using the image component.

We have set the width to 350 and height to 300. In addition we have set the image source to the state value “imageURL” which if you remember earlier we set this state equal to the URL returned from the API, so this url will show in the image and the loading icon will show slightly before the image is shown on the simulator.

Below is an example of what I get when I load up my app on the simulator!

Hopefully you have learned something from this tutorial, as always I welcome feedback and/or criticism as I am always looking to improve my coding and article writing abilities. Thank you for reading this and have a good day :)

Related posts:

Life gets unexpected as much as it can get, maybe it keeps being just like that. These events change opinions about everything you thought and believed was true. Like life’s course as it change…

If you manage to calculate how many apples equal one pair of shoes, barter is not always possible. After all, a trade requires that each side want what the other has to offer. What happens if the…

Happy Sunday before Winter Solstice. I hope this finds you thriving in some discomfort as this is the season for doing so. I found myself in an isle at Target for the fifth time in a week. This time…