mirror of https://github.com/zhigang1992/react-native-web.git synced 2026-01-12 22:51:09 +08:00

Files

Nicolas Gallagher 7705f521c8 [change] new accessibility features and docs

* Change 'accessible' to align with React Native.
* Add support for 'importantForAccessibility'.
* Stop event propagation for keyboard-activated Touchables (nested
  Touchables now respond the same as when touch-activated).
* Fix whitespace layout of nested Text elements.
* Use 'div' for Text to improve TalkBack grouping.
* Rewrite accessibility docs.

Close #382
Fix #408

2017-04-19 16:41:01 -07:00

1.3 KiB

Raw Blame History

ActivityIndicator

Props

...View props

animating: boolean = true

Whether to show the indicator or hide it.

color: ?color = '#1976D2'

The foreground color of the spinner.

hidesWhenStopped: ?boolean = true

Whether the indicator should hide when not animating.

size: ?enum('small, 'large') | number = 'small'

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

Examples

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

class ToggleAnimatingActivityIndicator extends Component {
  constructor(props) {
    super(props)
    this.state = { animating: true }
  }

  componentDidMount: function() {
    this.setToggleTimeout();
  }

  render() {
    return (
      <ActivityIndicator
        animating={this.state.animating}
        size="large"
        style={[styles.centering, { height: 80 }]}
      />
    );
  }

  _setToggleTimeout() {
    setTimeout(() => {
      this.setState({ animating: !this.state.animating })
      this._setToggleTimeout()
    }, 1200)
  }
})

const styles = StyleSheet.create({
  centering: {
    alignItems: 'center',
    justifyContent: 'center'
  },
  gray: {
    backgroundColor: '#cccccc'
  },
  horizontal: {
    flexDirection: 'row',
    justifyContent: 'space-around'
  }
})

1.3 KiB Raw Blame History

ActivityIndicator

Props

Examples

1.3 KiB

Raw Blame History