This is a searchable version of the documentation included in the open source project React Native.

ActivityIndicatorIOS

Edit on GitHubProps #

animating bool #

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

color string #

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

hidesWhenStopped bool #

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

onLayout function #

Invoked on mount and layout changes with

{nativeEvent: { layout: {x, y, width, height}}}.

size enum('small', 'large') #

Size of the indicator. Small has a height of 20, large has a height of 36.

Edit on GitHubExamples #

'use strict'; var React = require('react-native'); var { ActivityIndicatorIOS, StyleSheet, View, } = React; var TimerMixin = require('react-timer-mixin'); var ToggleAnimatingActivityIndicator = React.createClass({ mixins: [TimerMixin], getInitialState: function() { return { animating: true, }; }, setToggleTimeout: function() { this.setTimeout( () => { this.setState({animating: !this.state.animating}); this.setToggleTimeout(); }, 1200 ); }, componentDidMount: function() { this.setToggleTimeout(); }, render: function() { return ( <ActivityIndicatorIOS animating={this.state.animating} style={[styles.centering, {height: 80}]} size="large" /> ); } }); exports.displayName = (undefined: ?string); exports.framework = 'React'; exports.title = '<ActivityIndicatorIOS>'; exports.description = 'Animated loading indicators.'; exports.examples = [ { title: 'Default (small, white)', render: function() { return ( <ActivityIndicatorIOS style={[styles.centering, styles.gray, {height: 40}]} color="white" /> ); } }, { title: 'Gray', render: function() { return ( <View> <ActivityIndicatorIOS style={[styles.centering, {height: 40}]} /> <ActivityIndicatorIOS style={[styles.centering, {backgroundColor: '#eeeeee', height: 40}]} /> </View> ); } }, { title: 'Custom colors', render: function() { return ( <View style={styles.horizontal}> <ActivityIndicatorIOS color="#0000ff" /> <ActivityIndicatorIOS color="#aa00aa" /> <ActivityIndicatorIOS color="#aa3300" /> <ActivityIndicatorIOS color="#00aa00" /> </View> ); } }, { title: 'Large', render: function() { return ( <ActivityIndicatorIOS style={[styles.centering, styles.gray, {height: 80}]} color="white" size="large" /> ); } }, { title: 'Large, custom colors', render: function() { return ( <View style={styles.horizontal}> <ActivityIndicatorIOS size="large" color="#0000ff" /> <ActivityIndicatorIOS size="large" color="#aa00aa" /> <ActivityIndicatorIOS size="large" color="#aa3300" /> <ActivityIndicatorIOS size="large" color="#00aa00" /> </View> ); } }, { title: 'Start/stop', render: function(): ReactElement { return <ToggleAnimatingActivityIndicator />; } }, ]; var styles = StyleSheet.create({ centering: { alignItems: 'center', justifyContent: 'center', }, gray: { backgroundColor: '#cccccc', }, horizontal: { flexDirection: 'row', justifyContent: 'space-around', }, });