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

id, title, original_id

id	title	original_id
version-0.36-progressbarandroid	progressbarandroid	progressbarandroid

ProgressBarAndroid #

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 ReactPropTypes.number #

The progress value (between 0 and 1).

styleAttr ReactPropTypes.oneOf(STYLE_ATTRIBUTES) #

Style of the ProgressBar. One of:

• Horizontal
• Normal (default)
• Small
• Large
• Inverse
• SmallInverse
• LargeInverse

testID ReactPropTypes.string #

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

You can edit the content above on GitHub and send us a pull request!

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} />; }, });

class ProgressBarAndroidExample extends React.Component { static title = '<ProgressBarAndroid>'; static description = 'Horizontal bar to show the progress of some operation.';

render() { return ( <UIExplorerPage title="ProgressBar Examples"> <UIExplorerBlock title="Horizontal Indeterminate ProgressBar"> <ProgressBar styleAttr="Horizontal" /> </UIExplorerBlock>

    &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">"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;

Run this example

×

Powered by appetize.io

← PrevNext →