From 65e16992810b8a2672125d758ee02d864a8cc966 Mon Sep 17 00:00:00 2001 From: yasemincidem Date: Wed, 16 Nov 2016 11:26:47 +0300 Subject: [PATCH 1/4] Flexbox used instead of fixed width so progressbar will be flexible. --- ProgressBar.js | 96 +++++++++++++++++++++++++++----------------------- 1 file changed, 51 insertions(+), 45 deletions(-) diff --git a/ProgressBar.js b/ProgressBar.js index a21e79e..c760fb0 100644 --- a/ProgressBar.js +++ b/ProgressBar.js @@ -8,60 +8,66 @@ import { } from 'react-native'; var styles = StyleSheet.create({ - background: { - backgroundColor: '#bbbbbb', - height: 5, - overflow: 'hidden' - }, - fill: { - backgroundColor: '#3b5998', - height: 5 - } + background: { + backgroundColor: '#bbbbbb', + height: 5, + overflow: 'hidden' + }, + fill: { + backgroundColor: '#3b5998', + height: 5 + } }); var ProgressBar = React.createClass({ - getDefaultProps() { - return { - style: styles, - easing: Easing.inOut(Easing.ease), - easingDuration: 500 - }; - }, - - getInitialState() { - return { - progress: new Animated.Value(this.props.initialProgress || 0) - }; - }, + getDefaultProps() { + return { + style: styles, + easing: Easing.inOut(Easing.ease), + easingDuration: 500 + }; + }, - componentDidUpdate(prevProps, prevState) { - if (this.props.progress >= 0 && this.props.progress != prevProps.progress) { - this.update(); - } - }, + getInitialState() { + return { + progress: new Animated.Value(this.props.initialProgress || 0), + calculatedWidth: 0 + }; + }, - render() { + componentDidUpdate(prevProps, prevState) { + if (this.props.progress >= 0 && this.props.progress != prevProps.progress) { + this.update(); + } + }, - var fillWidth = this.state.progress.interpolate({ - inputRange: [0, 1], - outputRange: [0 * this.props.style.width, 1 * this.props.style.width], - }); + render() { + var fillWidth = this.state.progress.interpolate({ + inputRange: [0, 1], + outputRange: [0 * (this.props.style.width || this.state.calculatedWidth ), + 1 * (this.props.style.width || this.state.calculatedWidth)], + }); - return ( - - - - ); - }, + return ( + { + if (!this.props.style.width) { + this.setState({calculatedWidth: event.nativeEvent.layout.width}) + } + }}> + + + ); + }, - update() { - Animated.timing(this.state.progress, { - easing: this.props.easing, - duration: this.props.easingDuration, - toValue: this.props.progress - }).start(); - } + update() { + Animated.timing(this.state.progress, { + easing: this.props.easing, + duration: this.props.easingDuration, + toValue: this.props.progress + }).start(); + } }); module.exports = ProgressBar; From d93f1ecf1795442c756f17268f569c14c491690e Mon Sep 17 00:00:00 2001 From: yasemincidem Date: Wed, 16 Nov 2016 11:50:51 +0300 Subject: [PATCH 2/4] code refactor --- ProgressBar.js | 103 +++++++++++++++++++++++++------------------------ 1 file changed, 52 insertions(+), 51 deletions(-) diff --git a/ProgressBar.js b/ProgressBar.js index c760fb0..25c9e10 100644 --- a/ProgressBar.js +++ b/ProgressBar.js @@ -8,66 +8,67 @@ import { } from 'react-native'; var styles = StyleSheet.create({ - background: { - backgroundColor: '#bbbbbb', - height: 5, - overflow: 'hidden' - }, - fill: { - backgroundColor: '#3b5998', - height: 5 - } + background: { + backgroundColor: '#bbbbbb', + height: 5, + overflow: 'hidden' + }, + fill: { + backgroundColor: '#3b5998', + height: 5 + } }); var ProgressBar = React.createClass({ - getDefaultProps() { - return { - style: styles, - easing: Easing.inOut(Easing.ease), - easingDuration: 500 - }; - }, + getDefaultProps() { + return { + style: styles, + easing: Easing.inOut(Easing.ease), + easingDuration: 500 + }; + }, + + getInitialState() { + return { + progress: new Animated.Value(this.props.initialProgress || 0), + calculatedWidth: 0 + }; + }, - getInitialState() { - return { - progress: new Animated.Value(this.props.initialProgress || 0), - calculatedWidth: 0 - }; - }, + componentDidUpdate(prevProps, prevState) { + if (this.props.progress >= 0 && this.props.progress != prevProps.progress) { + this.update(); + } + }, - componentDidUpdate(prevProps, prevState) { - if (this.props.progress >= 0 && this.props.progress != prevProps.progress) { - this.update(); - } - }, + render() { - render() { - var fillWidth = this.state.progress.interpolate({ - inputRange: [0, 1], - outputRange: [0 * (this.props.style.width || this.state.calculatedWidth ), - 1 * (this.props.style.width || this.state.calculatedWidth)], - }); + var fillWidth = this.state.progress.interpolate({ + inputRange: [0, 1], + outputRange: [0 * (this.props.style.width || this.state.calculatedWidth ), + 1 * (this.props.style.width || this.state.calculatedWidth)] + }); - return ( - { - if (!this.props.style.width) { - this.setState({calculatedWidth: event.nativeEvent.layout.width}) - } - }}> - - - ); - }, + return ( + { + if (!this.props.style.width) { + this.setState({calculatedWidth: event.nativeEvent.layout.width}) + } + }}> + + + ); + }, - update() { - Animated.timing(this.state.progress, { - easing: this.props.easing, - duration: this.props.easingDuration, - toValue: this.props.progress - }).start(); - } + update() { + Animated.timing(this.state.progress, { + easing: this.props.easing, + duration: this.props.easingDuration, + toValue: this.props.progress + }).start(); + } }); module.exports = ProgressBar; From e2c541fd790083c980d1addc83c275fdb160fb72 Mon Sep 17 00:00:00 2001 From: Rafael Bravo Date: Wed, 9 Aug 2017 04:40:07 -0300 Subject: [PATCH 3/4] infinite progress --- ProgressBar.js | 33 ++++++++++++++++++++++++++++--- README.md | 53 ++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 83 insertions(+), 3 deletions(-) diff --git a/ProgressBar.js b/ProgressBar.js index 25c9e10..63efa87 100644 --- a/ProgressBar.js +++ b/ProgressBar.js @@ -25,7 +25,9 @@ var ProgressBar = React.createClass({ return { style: styles, easing: Easing.inOut(Easing.ease), - easingDuration: 500 + easingDuration: 850, + updateInterval: 1000, + updateRatio: .15 }; }, @@ -42,6 +44,31 @@ var ProgressBar = React.createClass({ } }, + componentWillUnmount(){ + this.clearIntt(); + }, + clearIntt(){ + if(this._interval) clearInterval(this._interval); + }, + start() { + this.clearIntt(); + this._interval = setInterval((()=>{ + console.log('PROG BAR: ' + JSON.stringify(this.state)); + var val = JSON.stringify(this.state.progress)*1; + console.log('PROG BAR IS: ' + val); + var to = val + ((1-val)*this.props.updateRatio); + if(to>.99) + to = .99; + console.log('UPDATE PROG BAR TO: ' + to); + this.update(to); + }).bind(this),this.props.updateInterval) + }, + + end() { + this.clearIntt(); + this.update(1); + }, + render() { var fillWidth = this.state.progress.interpolate({ @@ -62,11 +89,11 @@ var ProgressBar = React.createClass({ ); }, - update() { + update(prog) { Animated.timing(this.state.progress, { easing: this.props.easing, duration: this.props.easingDuration, - toValue: this.props.progress + toValue: prog ? prog : this.props.progress }).start(); } }); diff --git a/README.md b/README.md index 3231e8a..ad48e20 100644 --- a/README.md +++ b/README.md @@ -80,6 +80,55 @@ AppRegistry.registerComponent('rnsandbox', () => rnsandbox); ``` +## Infinite progress usage example + +```javascript +var React = require('react-native'); +var { + AppRegistry, + StyleSheet, + Text, + View, + Button +} = React; +var ProgressBar = require('react-native-progress-bar'); + +var rnsandbox = React.createClass({ + + render() { + + return ( + +