ActivityIndicator

Displays a circular loading indicator.

Example


import React, { Component } from 'react'
import {
  ActivityIndicator,
  AppRegistry,
  StyleSheet,
  Text,
  View,
} from 'react-native'

export default class App extends Component {
  render() {
    return (
      <View style={[styles.container, styles.horizontal]}>
        <ActivityIndicator size="large" color="#0000ff" />
        <ActivityIndicator size="small" color="#00ff00" />
        <ActivityIndicator size="large" color="#0000ff" />
        <ActivityIndicator size="small" color="#00ff00" />
      </View>
    )
  }
}

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

AppRegistry.registerComponent('App', () => App)

Props


Reference

Props

animating

Whether to show the indicator (true, the default) or hide it (false).

TypeRequired
boolNo

color

The foreground color of the spinner (default is gray).

TypeRequired
colorNo

size

Size of the indicator (default is 'small'). Passing a number to the size prop is only supported on Android.

TypeRequired
enum('small', 'large'), ,numberNo

hidesWhenStopped

Whether the indicator should hide when not animating (true by default).

TypeRequiredPlatform
boolNoiOS