Add prop to Bar to animate only when progress is increasing

Bar.js

@@ -1,49 +1,58 @@
-import React, {
-  Component,
-  PropTypes,
-} from 'react';
-
-import {
-  Animated,
-  Easing,
-  View,
-} from 'react-native';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Animated, Easing, View, ViewPropTypes } from 'react-native';
 
 const INDETERMINATE_WIDTH_FACTOR = 0.3;
-const BAR_WIDTH_ZERO_POSITION = INDETERMINATE_WIDTH_FACTOR / (1 + INDETERMINATE_WIDTH_FACTOR);
+const BAR_WIDTH_ZERO_POSITION =
+  INDETERMINATE_WIDTH_FACTOR / (1 + INDETERMINATE_WIDTH_FACTOR);
+
+const RNViewPropTypes = ViewPropTypes || View.propTypes;
 
 export default class ProgressBar extends Component {
   static propTypes = {
     animated: PropTypes.bool,
+    animateIncreaseOnly: PropTypes.bool,
     borderColor: PropTypes.string,
     borderRadius: PropTypes.number,
     borderWidth: PropTypes.number,
     children: PropTypes.node,
     color: PropTypes.string,
     height: PropTypes.number,
     indeterminate: PropTypes.bool,
+    onLayout: PropTypes.func,
     progress: PropTypes.number,
-    style: View.propTypes.style,
+    style: RNViewPropTypes.style,
     unfilledColor: PropTypes.string,
     width: PropTypes.number,
+    useNativeDriver: PropTypes.bool,
+    // eslint-disable-next-line react/forbid-prop-types
+    animationConfig: PropTypes.object.isRequired,
+    animationType: PropTypes.oneOf(['decay', 'timing', 'spring']),
   };
 
   static defaultProps = {
     animated: true,
+    animateIncreaseOnly: false,
     borderRadius: 4,
     borderWidth: 1,
     color: 'rgba(0, 122, 255, 1)',
     height: 6,
     indeterminate: false,
     progress: 0,
     width: 150,
+    useNativeDriver: false,
+    animationConfig: { bounciness: 0 },
+    animationType: 'spring',
   };
 
   constructor(props) {
     super(props);
     const progress = Math.min(Math.max(props.progress, 0), 1);
     this.state = {
-      progress: new Animated.Value(props.indeterminate ? INDETERMINATE_WIDTH_FACTOR : progress),
+      width: 0,
+      progress: new Animated.Value(
+        props.indeterminate ? INDETERMINATE_WIDTH_FACTOR : progress,
+      ),
       animationValue: new Animated.Value(BAR_WIDTH_ZERO_POSITION),
     };
   }
@@ -61,22 +70,26 @@ export default class ProgressBar extends Component {
       } else {
         Animated.spring(this.state.animationValue, {
           toValue: BAR_WIDTH_ZERO_POSITION,
+          useNativeDriver: props.useNativeDriver,
         }).start();
       }
     }
     if (
       props.indeterminate !== this.props.indeterminate ||
       props.progress !== this.props.progress
     ) {
-      const progress = (props.indeterminate
+      const progress = props.indeterminate
         ? INDETERMINATE_WIDTH_FACTOR
-        : Math.min(Math.max(props.progress, 0), 1)
-      );
+        : Math.min(Math.max(props.progress, 0), 1);
 
-      if (props.animated) {
+      if (
+        props.animated &&
+        (!props.animateIncreaseOnly ||
+          (props.animateIncreaseOnly && progress > this.props.progress))
+      ) {
         Animated.spring(this.state.progress, {
           toValue: progress,
-          bounciness: 0,
+          useNativeDriver: props.useNativeDriver,
         }).start();
       } else {
         this.state.progress.setValue(progress);
@@ -91,13 +104,23 @@ export default class ProgressBar extends Component {
       duration: 1000,
       easing: Easing.linear,
       isInteraction: false,
-    }).start((endState) => {
+      useNativeDriver: this.props.useNativeDriver,
+    }).start(endState => {
       if (endState.finished) {
         this.animate();
       }
     });
   }
 
+  handleLayout = event => {
+    if (!this.props.width) {
+      this.setState({ width: event.nativeEvent.layout.width });
+    }
+    if (this.props.onLayout) {
+      this.props.onLayout(event);
+    }
+  };
+
   render() {
     const {
       borderColor,
@@ -112,7 +135,7 @@ export default class ProgressBar extends Component {
       ...restProps
     } = this.props;
 
-    const innerWidth = width - (borderWidth * 2);
+    const innerWidth = Math.max(0, width || this.state.width) - borderWidth * 2;
     const containerStyle = {
       width,
       borderWidth,
@@ -124,24 +147,35 @@ export default class ProgressBar extends Component {
     const progressStyle = {
       backgroundColor: color,
       height,
-      width: innerWidth,
-      transform: [{
-        translateX: this.state.animationValue.interpolate({
-          inputRange: [0, 1],
-          outputRange: [innerWidth * -INDETERMINATE_WIDTH_FACTOR, innerWidth],
-        }),
-      }, {
-        translateX: this.state.progress.interpolate({
-          inputRange: [0, 1],
-          outputRange: [innerWidth / -2, 0],
-        }),
-      }, {
-        scaleX: this.state.progress,
-      }],
+      transform: [
+        {
+          translateX: this.state.animationValue.interpolate({
+            inputRange: [0, 1],
+            outputRange: [innerWidth * -INDETERMINATE_WIDTH_FACTOR, innerWidth],
+          }),
+        },
+        {
+          translateX: this.state.progress.interpolate({
+            inputRange: [0, 1],
+            outputRange: [innerWidth / -2, 0],
+          }),
+        },
+        {
+          // Interpolation a temp workaround for https://github.com/facebook/react-native/issues/6278
+          scaleX: this.state.progress.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0.0001, 1],
+          }),
+        },
+      ],
     };
 
     return (
-      <View style={[containerStyle, style]} {...restProps}>
+      <View
+        style={[containerStyle, style]}
+        onLayout={this.handleLayout}
+        {...restProps}
+      >
         <Animated.View style={progressStyle} />
         {children}
       </View>

Circle.js

@@ -1,14 +1,12 @@
-import React, {
-  Component,
-  PropTypes,
-} from 'react';
-
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import {
   Animated,
   ART,
   StyleSheet,
   Text,
   View,
+  ViewPropTypes,
 } from 'react-native';
 
 import Arc from './Shapes/Arc';
@@ -19,6 +17,8 @@ const CIRCLE = Math.PI * 2;
 const AnimatedSurface = Animated.createAnimatedComponent(ART.Surface);
 const AnimatedArc = Animated.createAnimatedComponent(Arc);
 
+const RNViewPropTypes = ViewPropTypes || View.propTypes;
+
 const styles = StyleSheet.create({
   container: {
     backgroundColor: 'transparent',
@@ -32,7 +32,7 @@ export class ProgressCircle extends Component {
     borderColor: PropTypes.string,
     borderWidth: PropTypes.number,
     color: PropTypes.string,
-    children: React.PropTypes.node,
+    children: PropTypes.node,
     direction: PropTypes.oneOf(['clockwise', 'counter-clockwise']),
     formatText: PropTypes.func,
     indeterminate: PropTypes.bool,
@@ -43,7 +43,7 @@ export class ProgressCircle extends Component {
     rotation: PropTypes.instanceOf(Animated.Value),
     showsText: PropTypes.bool,
     size: PropTypes.number,
-    style: View.propTypes.style,
+    style: RNViewPropTypes.style,
     textStyle: Text.propTypes.style,
     thickness: PropTypes.number,
     unfilledColor: PropTypes.string,
@@ -92,6 +92,7 @@ export class ProgressCircle extends Component {
       showsText,
       size,
       style,
+      strokeCap,
       textStyle,
       thickness,
       unfilledColor,
@@ -148,6 +149,7 @@ export class ProgressCircle extends Component {
               endAngle={angle}
               direction={direction}
               stroke={color}
+              strokeCap={strokeCap}
               strokeWidth={thickness}
             />
           ) : false}
@@ -157,6 +159,7 @@ export class ProgressCircle extends Component {
               startAngle={0}
               endAngle={(indeterminate ? 1.8 : 2) * Math.PI}
               stroke={borderColor || color}
+              strokeCap={strokeCap}
               strokeWidth={border}
             />
           ) : false}

CircleSnail.js

@@ -1,13 +1,11 @@
-import React, {
-  Component,
-  PropTypes,
-} from 'react';
-
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import {
   Animated,
   ART,
   Easing,
   View,
+  ViewPropTypes,
 } from 'react-native';
 
 import Arc from './Shapes/Arc';
@@ -17,6 +15,8 @@ const AnimatedArc = Animated.createAnimatedComponent(Arc);
 const MIN_ARC_ANGLE = 0.1;
 const MAX_ARC_ANGLE = 1.5 * Math.PI;
 
+const RNViewPropTypes = ViewPropTypes || View.propTypes;
+
 export default class CircleSnail extends Component {
   static propTypes = {
     animating: PropTypes.bool,
@@ -30,8 +30,9 @@ export default class CircleSnail extends Component {
     hidesWhenStopped: PropTypes.bool,
     size: PropTypes.number,
     spinDuration: PropTypes.number,
-    style: View.propTypes.style,
+    style: RNViewPropTypes.style,
     thickness: PropTypes.number,
+    strokeCap: PropTypes.string
   };
 
   static defaultProps = {
@@ -41,6 +42,7 @@ export default class CircleSnail extends Component {
     hidesWhenStopped: false,
     size: 40,
     thickness: 3,
+    strokeCap: 'round'
   };
 
   constructor(props) {
@@ -128,6 +130,7 @@ export default class CircleSnail extends Component {
       size,
       style,
       thickness,
+      strokeCap,
       ...restProps
     } = this.props;
 
@@ -171,7 +174,7 @@ export default class CircleSnail extends Component {
             offset={offset}
             startAngle={this.state.startAngle}
             endAngle={this.state.endAngle}
-            strokeCap="round"
+            strokeCap={strokeCap}
             strokeWidth={thickness}
           />
         </ART.Surface>

Example/.babelrc

@@ -1,3 +1,3 @@
 {
-"presets": ["react-native"]
-}
+  "presets": ["react-native"]
+}

Example/.flowconfig

@@ -22,9 +22,9 @@ node_modules/react-native/flow
 flow/
 
 [options]
-module.system=haste
+emoji=true
 
-experimental.strict_type_args=true
+module.system=haste
 
 munge_underscores=true
 
@@ -34,11 +34,12 @@ suppress_type=$FlowIssue
 suppress_type=$FlowFixMe
 suppress_type=$FixMe
 
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(3[0-6]\\|[1-2][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(3[0-6]\\|1[0-9]\\|[1-2][0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(4[0-9]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(4[0-9]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
 suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
+suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
 
 unsafe.enable_getters_and_setters=true
 
 [version]
-^0.36.0
+^0.49.1

Example/.gitignore

@@ -34,11 +34,11 @@ local.properties
 #
 node_modules/
 npm-debug.log
+yarn-error.log
 
 # BUCK
 buck-out/
 \.buckd/
-android/app/libs
 *.keystore
 
 # fastlane