Merge pull request #295 from jkhusanov/master

Add delay to animated circular progress

README.md

@@ -112,6 +112,7 @@ Name                | Type                   | Default value           | Descrip
 --------------------|------------------------|-------------------------|--------------
 prefill             | number (0-100)         | 0                       | Initial fill-value before animation starts
 duration            | number                 | 500                     | Duration of animation in ms
+delay               | number                 | 0                       | Delay of animation in ms
 easing              | function               | Easing.out(Easing.ease) | Animation easing function
 onAnimationComplete | function               |                         | Function that's invoked when the animation completes (both on mount and if called with `.animate()`)
 onFillChange        | function               |                         | Function that returns current progress on every change

index.d.ts

@@ -141,6 +141,14 @@ declare module 'react-native-circular-progress' {
      */
     duration?: number;
 
+    /**
+     * Delay of animation in ms
+     *
+     * @type {number}
+     * @default 0
+     */
+    delay?: number;
+
     /**
      *
      * @type {Function}

src/AnimatedCircularProgress.js

@@ -10,7 +10,7 @@ export default class AnimatedCircularProgress extends React.PureComponent {
     this.state = {
       fillAnimation: new Animated.Value(props.prefill),
     };
-    if(props.onFillChange){
+    if (props.onFillChange) {
       this.state.fillAnimation.addListener(({ value }) =>
         props.onFillChange(value)
       );
@@ -41,12 +41,14 @@ export default class AnimatedCircularProgress extends React.PureComponent {
     const duration = dur || this.props.duration;
     const easing = ease || this.props.easing;
     const useNativeDriver = this.props.useNativeDriver;
+    const delay = this.props.delay;
 
     const anim = Animated.timing(this.state.fillAnimation, {
       useNativeDriver,
       toValue,
       easing,
       duration,
+      delay,
     });
     anim.start(this.props.onAnimationComplete);
 
@@ -86,11 +88,13 @@ AnimatedCircularProgress.propTypes = {
   easing: PropTypes.func,
   onAnimationComplete: PropTypes.func,
   useNativeDriver: PropTypes.bool,
+  delay: PropTypes.number,
 };
 
 AnimatedCircularProgress.defaultProps = {
   duration: 500,
   easing: Easing.out(Easing.ease),
   prefill: 0,
   useNativeDriver: false,
+  delay: 0,
 };