react-native/website/versioned_docs/0.27/progressbarandroid.md

id, title, original_id

id	title	original_id
version-0.27-progressbarandroid	progressbarandroid	progressbarandroid

ProgressBarAndroid #

Edit on GitHub

React component that wraps the Android-only ProgressBar. This component is used to indicate that the app is loading or there is some activity in the app.

Example:

render: function() { var progressBar = <View style={styles.container}> <ProgressBar styleAttr="Inverse" /> </View>;

return ( <MyLoadingComponent componentView={componentView} loadingView={progressBar} style={styles.loadingComponent} /> ); },

Props #

View props... #

color color #

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
• Normal (default)
• Small
• Large
• Inverse
• SmallInverse
• LargeInverse

testID string #

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

Examples #

Edit on GitHub

'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: { title: '<ProgressBarAndroid>', description: 'Visual indicator of progress of some operation. ' + 'Shows either a cyclic animation or a horizontal bar.', },

render: function() { return ( <UIExplorerPage title="ProgressBar Examples"> <UIExplorerBlock title="Default ProgressBar"> <ProgressBar /> </UIExplorerBlock>

    &lt;UIExplorerBlock title<span class="token operator">=</span><span class="token string">"Normal ProgressBar"</span><span class="token operator">&gt;</span>
      &lt;ProgressBar styleAttr<span class="token operator">=</span><span class="token string">"Normal"</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
    &lt;<span class="token operator">/</span>UIExplorerBlock<span class="token operator">&gt;</span>

    &lt;UIExplorerBlock title<span class="token operator">=</span><span class="token string">"Small ProgressBar"</span><span class="token operator">&gt;</span>
      &lt;ProgressBar styleAttr<span class="token operator">=</span><span class="token string">"Small"</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
    &lt;<span class="token operator">/</span>UIExplorerBlock<span class="token operator">&gt;</span>

    &lt;UIExplorerBlock title<span class="token operator">=</span><span class="token string">"Large ProgressBar"</span><span class="token operator">&gt;</span>
      &lt;ProgressBar styleAttr<span class="token operator">=</span><span class="token string">"Large"</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
    &lt;<span class="token operator">/</span>UIExplorerBlock<span class="token operator">&gt;</span>

    &lt;UIExplorerBlock title<span class="token operator">=</span><span class="token string">"Inverse ProgressBar"</span><span class="token operator">&gt;</span>
      &lt;ProgressBar styleAttr<span class="token operator">=</span><span class="token string">"Inverse"</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
    &lt;<span class="token operator">/</span>UIExplorerBlock<span class="token operator">&gt;</span>

    &lt;UIExplorerBlock title<span class="token operator">=</span><span class="token string">"Small Inverse ProgressBar"</span><span class="token operator">&gt;</span>
      &lt;ProgressBar styleAttr<span class="token operator">=</span><span class="token string">"SmallInverse"</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
    &lt;<span class="token operator">/</span>UIExplorerBlock<span class="token operator">&gt;</span>

    &lt;UIExplorerBlock title<span class="token operator">=</span><span class="token string">"Large Inverse ProgressBar"</span><span class="token operator">&gt;</span>
      &lt;ProgressBar styleAttr<span class="token operator">=</span><span class="token string">"LargeInverse"</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
    &lt;<span class="token operator">/</span>UIExplorerBlock<span class="token operator">&gt;</span>

    &lt;UIExplorerBlock title<span class="token operator">=</span><span class="token string">"Horizontal Indeterminate ProgressBar"</span><span class="token operator">&gt;</span>
      &lt;ProgressBar styleAttr<span class="token operator">=</span><span class="token string">"Horizontal"</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
    &lt;<span class="token operator">/</span>UIExplorerBlock<span class="token operator">&gt;</span>

    &lt;UIExplorerBlock title<span class="token operator">=</span><span class="token string">"Horizontal ProgressBar"</span><span class="token operator">&gt;</span>
      &lt;MovingBar styleAttr<span class="token operator">=</span><span class="token string">"Horizontal"</span> indeterminate<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
    &lt;<span class="token operator">/</span>UIExplorerBlock<span class="token operator">&gt;</span>

    &lt;UIExplorerBlock title<span class="token operator">=</span><span class="token string">"Large Red ProgressBar"</span><span class="token operator">&gt;</span>
      &lt;ProgressBar styleAttr<span class="token operator">=</span><span class="token string">"Large"</span> color<span class="token operator">=</span><span class="token string">"red"</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
    &lt;<span class="token operator">/</span>UIExplorerBlock<span class="token operator">&gt;</span>

    &lt;UIExplorerBlock title<span class="token operator">=</span><span class="token string">"Horizontal Black Indeterminate ProgressBar"</span><span class="token operator">&gt;</span>
      &lt;ProgressBar styleAttr<span class="token operator">=</span><span class="token string">"Horizontal"</span> color<span class="token operator">=</span><span class="token string">"black"</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
    &lt;<span class="token operator">/</span>UIExplorerBlock<span class="token operator">&gt;</span>

    &lt;UIExplorerBlock title<span class="token operator">=</span><span class="token string">"Horizontal Blue ProgressBar"</span><span class="token operator">&gt;</span>
      &lt;MovingBar styleAttr<span class="token operator">=</span><span class="token string">"Horizontal"</span> indeterminate<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</span> color<span class="token operator">=</span><span class="token string">"blue"</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
    &lt;<span class="token operator">/</span>UIExplorerBlock<span class="token operator">&gt;</span>
  &lt;<span class="token operator">/</span>UIExplorerPage<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>

}, });

module.exports = ProgressBarAndroidExample;

Next →