React Native

React Native – ActivityIndicator

animatingOption to show the indicator (bydefault it is true) or hide it (false).
sizeSet the size of indicator (‘small’,’large’, number). The default size is small. Number format support only in android.
colorSet the foreground color of the spinner (default is gray).
hidesWhenStoppedIt provides an option to show or hide the indicator when there is no animating (true by default).


In this example, the animating property set the activity indicator to true, and it is visible on the screen. When the component mounts, the animated activity indicator will be closed after six seconds using the closeActivityIndicator() method.

import React,{Component} from 'react';
import { Picker, View, StyleSheet, ActivityIndicator } from 'react-native';
export default class ActivityIndicatorDemo extends Component {
  state = { animating: true }
  closeActivityIndicator = () => setTimeout(() => this.setState({
    animating: false
  }), 6000)
  componentDidMount = () => this.closeActivityIndicator()
  render() {
    const animating = this.state.animating
    return (
      <View style={[styles.container, styles.horizontal]} >
        <ActivityIndicator animating={animating} size="large" color="#ff0000" />
        <ActivityIndicator size="small" color="#44ff00" />
        <ActivityIndicator size="large" color="#rtwrw" />

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center'
  horizontal: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    padding: 10

Shaiv Roy

Hy Myself shaiv roy, I am a passionate blogger and love to share ideas among people, I am having good experience with laravel, vue js, react, flutter and doing website and app development work from last 7 years.

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button