as

Settings
Sign out
Notifications
Alexa
Amazon Appstore
AWS
Documentation
Support
Contact Us
My Cases
Get Started
Design and Develop
Publish
Reference
Support

ActivityIndicator

Displays a circular loading indicator.

Example


import React from 'react';
import {ActivityIndicator, StyleSheet, View} from 'react-native';

const App = () => (
  <View style={[styles.container, styles.horizontal]}>
    <ActivityIndicator />
    <ActivityIndicator size="large" />
    <ActivityIndicator size="small" color="#0000ff" />
    <ActivityIndicator size="large" color="#00ff00" />
  </View>
);

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

export default App;

Reference

Props

View Props

Inherits View Props.


animating

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

Type Default
bool true

color

The foreground color of the spinner.

Type Default
color null (system accent default color) '#999999'

size

Size of the indicator.

Type Default
enum('small', 'large') 'small'

Last updated: Sep 30, 2025