in this chapter we will show you how to use the activity indicator in react native.

step 1: app

app component will be used to import and show our activityindicator.

app.js

import react from 'react'
import activityindicatorexample from './activity_indicator_example.js'

const home = () => {
   return (
      <activityindicatorexample />
   )
}
export default home

step 2: activityindicatorexample

animating property is a boolean which is used for showing the activity indicator. the latter closes six seconds after the component is mounted. this is done using the closeactivityindicator() function.

activity_indicator_example.js

import react, { component } from 'react';
import { activityindicator, view, text, touchableopacity, stylesheet } from 'react-native';

class activityindicatorexample extends component {
   state = { animating: true }
   
   closeactivityindicator = () => settimeout(() => this.setstate({
   animating: false }), 60000)
   
   componentdidmount = () => this.closeactivityindicator()
   render() {
      const animating = this.state.animating
      return (
         <view style = {styles.container}>
            <activityindicator
               animating = {animating}
               color = '#bc2b78'
               size = "large"
               style = {styles.activityindicator}/>
         </view>
      )
   }
}
export default activityindicatorexample

const styles = stylesheet.create ({
   container: {
      flex: 1,
      justifycontent: 'center',
      alignitems: 'center',
      margintop: 70
   },
   activityindicator: {
      flex: 1,
      justifycontent: 'center',
      alignitems: 'center',
      height: 80
   }
})

when we run the app, we will see the loader on screen. it will disappear after six seconds.