Expo Docs

ActivityIndicator

Displays a circular loading indicator.


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)


Reference

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

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

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

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