diff --git a/docs/progressbarandroid.html b/docs/progressbarandroid.html index 3932c00b523..998b57a515e 100644 --- a/docs/progressbarandroid.html +++ b/docs/progressbarandroid.html @@ -12,13 +12,39 @@ that the app is loading or there is some activity in the app.

Example:

style={styles.loadingComponent} /> ); -},

Edit on GitHubProps #

color string #

Color of the progress bar.

styleAttr STYLE_ATTRIBUTES #

Style of the ProgressBar. One of:

  • Horizontal
  • Small
  • Large
  • Inverse
  • SmallInverse
  • LargeInverse

testID string #

Used to locate this view in end-to-end tests.

Edit on GitHubExamples #

'use strict'; +},

Edit on GitHubProps #

color string #

Color of the progress bar.

indeterminate indeterminateType #

If the progress bar will show indeterminate progress. Note that this +can only be false if styleAttr is Horizontal.

progress number #

The progress value (between 0 and 1).

styleAttr STYLE_ATTRIBUTES #

Style of the ProgressBar. One of:

  • Horizontal
  • Small
  • Large
  • Inverse
  • SmallInverse
  • LargeInverse

testID string #

Used to locate this view in end-to-end tests.

Edit on GitHubExamples #

'use strict'; var ProgressBar = require('ProgressBarAndroid'); var React = require('React'); var UIExplorerBlock = require('UIExplorerBlock'); var UIExplorerPage = require('UIExplorerPage'); +var TimerMixin = require('react-timer-mixin'); + +var MovingBar = React.createClass({ + mixins: [TimerMixin], + + getInitialState: function() { + return { + progress: 0 + }; + }, + + componentDidMount: function() { + this.setInterval( + () => { + var progress = (this.state.progress + 0.02) % 1; + this.setState({progress: progress}); + }, 50 + ); + }, + + render: function() { + return <ProgressBar progress={this.state.progress} {...this.props} />; + }, +}); + var ProgressBarAndroidExample = React.createClass({ statics: { @@ -54,9 +80,25 @@ that the app is loading or there is some activity in the app.

Example:

<ProgressBar styleAttr="LargeInverse" /> </UIExplorerBlock> + <UIExplorerBlock title="Horizontal Indeterminate ProgressBar"> + <ProgressBar styleAttr="Horizontal" /> + </UIExplorerBlock> + + <UIExplorerBlock title="Horizontal ProgressBar"> + <MovingBar styleAttr="Horizontal" indeterminate={false} /> + </UIExplorerBlock> + <UIExplorerBlock title="Large Red ProgressBar"> <ProgressBar styleAttr="Large" color="red" /> </UIExplorerBlock> + + <UIExplorerBlock title="Horizontal Black Indeterminate ProgressBar"> + <ProgressBar styleAttr="Horizontal" color="black" /> + </UIExplorerBlock> + + <UIExplorerBlock title="Horizontal Blue ProgressBar"> + <MovingBar styleAttr="Horizontal" indeterminate={false} color="blue" /> + </UIExplorerBlock> </UIExplorerPage> ); },