Permalink
80b0aa6 Jan 30, 2018
2 contributors

Users who have contributed to this file

@hramos @mostafasoufi
100 lines (72 sloc) 1.92 KB
id title
activityindicator
ActivityIndicator

Displays a circular loading indicator.

Example

import React, { Component } from 'react'
import {
  ActivityIndicator,
  AppRegistry,
  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
  }
})

AppRegistry.registerComponent('App', () => App)

Props


Reference

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).

Type Required
color No

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

hidesWhenStopped

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

Type Required Platform
bool No iOS