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