react-native/website/versioned_docs/0.22/progressviewios.md

id, title, original_id

id	title	original_id
version-0.22-progressviewios	progressviewios	progressviewios

ProgressViewIOS #

Edit on GitHub

Use ProgressViewIOS to render a UIProgressView on iOS.

Props #

View props... #

progress number #

The progress value (between 0 and 1).

progressImage Image.propTypes.source #

A stretchable image to display as the progress bar.

progressTintColor string #

The tint color of the progress bar itself.

progressViewStyle enum('default', 'bar') #

The progress bar style.

trackImage Image.propTypes.source #

A stretchable image to display behind the progress bar.

trackTintColor string #

The tint color of the progress bar track.

Examples #

Edit on GitHub

'use strict';

var React = require('react-native'); var { ProgressViewIOS, StyleSheet, View, } = React; var TimerMixin = require('react-timer-mixin');

var ProgressViewExample = React.createClass({ mixins: [TimerMixin],

getInitialState() { return { progress: 0, }; },

componentDidMount() { this.updateProgress(); },

updateProgress() { var progress = this.state.progress + 0.01; this.setState({ progress }); this.requestAnimationFrame(() => this.updateProgress()); },

getProgress(offset) { var progress = this.state.progress + offset; return Math.sin(progress % Math.PI) % 1; },

render() { return ( <View style={styles.container}> <ProgressViewIOS style={styles.progressView} progress={this.getProgress(0)}/> <ProgressViewIOS style={styles.progressView} progressTintColor="purple" progress={this.getProgress(0.2)}/> <ProgressViewIOS style={styles.progressView} progressTintColor="red" progress={this.getProgress(0.4)}/> <ProgressViewIOS style={styles.progressView} progressTintColor="orange" progress={this.getProgress(0.6)}/> <ProgressViewIOS style={styles.progressView} progressTintColor="yellow" progress={this.getProgress(0.8)}/> </View> ); }, });

exports.displayName = (undefined: ?string); exports.framework = 'React'; exports.title = 'ProgressViewIOS'; exports.description = 'ProgressViewIOS'; exports.examples = [{ title: 'ProgressViewIOS', render() { return ( <ProgressViewExample/> ); } }];

var styles = StyleSheet.create({ container: { marginTop: -20, backgroundColor: 'transparent', }, progressView: { marginTop: 20, } });

Next →