ActivityIndicator
Displays a circular loading indicator.
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
Whether to show the indicator (true, the default) or hide it (false).
The foreground color of the spinner (default is gray on iOS and dark cyan on Android).
Whether the indicator should hide when not animating (true by default).
Type | Required | Platform |
---|
bool | No | iOS |
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 |