React Native ActivityIndicator - React Native

What is React Native ActivityIndicator?

In this tutorial, we will be discussing about how to use activity indicator in React Native.

Step 1 - Create File

As we had already have HomeContainer.js, we use it as a container component.

Let us create a new file withinsrc/components/home/ folder. We will name it ActivityIndicatorExample.js and this will be our presentational component.

Step 2 - Logic

We can use this.state.animating to control activity indicator.

Activity Indicator will close three seconds after component is mounted. This is done using closeActivityIndicator function.

src/components/home/HomeContainer.js

Example

Step 3 - Presentation

We passed animating property from container and we are using it as a prop of the ActivityIndicator.

src/components/home/ActivityIndicatorExample.js

Example

On executing the app,a loader will be displayed on screen. This will get disappeared after three seconds.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

React Native Topics