Displays a circular loading indicator.

Example

• Function Component Example
• Class Component Example

import React from "react";

import { ActivityIndicator, StyleSheet, Text, View } from "react-native";

export default function App() {

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

}

});

import React, { Component } from "react";

import { ActivityIndicator, 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

}

});

Reference

Props

Inherits View Props.

animating

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

Type	Required
bool	No

---

color

The foreground color of the spinner (default is gray on iOS and dark cyan on Android).

Type	Required
color	No

---

hidesWhenStopped

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

Type	Required	Platform
bool	No	iOS

---

size

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

Type	Required
enum('small', 'large'), number	No