Dynamic fill color addressing Issue #188

README.md

@@ -95,6 +95,7 @@ prefill             | number (0-100)         | 0                       | Initial
 duration            | number                 | 500                     | Duration 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()`)
+tintColorSecondary  | string                 | the same as tintColor   | To change fill color from tintColor to tintColorSecondary as animation progresses
 
 `AnimatedCircularProgress` also exposes the following functions:
 
@@ -107,7 +108,7 @@ reAnimate   | (prefill: number, toVal: number, duration: number, ease: function)
 
 ```sh
 git clone https://github.com/bgryszko/react-native-circular-progress.git
-cd react-native-circular-progress/example
+cd react-native-circular-progress/example-app
 yarn
 yarn start
 ```

example-app/App.tsx

@@ -69,7 +69,8 @@ export default class App extends React.Component {
           width={15}
           backgroundWidth={5}
           fill={fill}
-          tintColor="#00e0ff"
+          tintColor="#00ff00"
+          tintColorSecondary="#ff0000"
           backgroundColor="#3d5875"
           arcSweepAngle={240}
           rotation={240}

src/AnimatedCircularProgress.js

@@ -35,7 +35,7 @@ export default class AnimatedCircularProgress extends React.PureComponent {
     const toValue = toVal >= 0 ? toVal : this.props.fill;
     const duration = dur || this.props.duration;
     const easing = ease || this.props.easing;
-
+    console.log("THE KEY: " + JSON.stringify(this.state.fillAnimation));
     const anim = Animated.timing(this.state.fillAnimation, {
       toValue,
       easing,
@@ -46,10 +46,23 @@ export default class AnimatedCircularProgress extends React.PureComponent {
     return anim;
   }
 
+  animateColor() {
+    if (!this.props.tintColorSecondary) {
+      return this.props.tintColor
+    }
+
+    const tintAnimation = this.state.fillAnimation.interpolate({
+      inputRange: [0, 100],
+      outputRange: [this.props.tintColor, this.props.tintColorSecondary]
+    })
+
+    return tintAnimation
+  }
+
   render() {
     const { fill, prefill, ...other } = this.props;
 
-    return <AnimatedProgress {...other} fill={this.state.fillAnimation} />;
+    return <AnimatedProgress {...other} fill={this.state.fillAnimation} tintColor={this.animateColor()} />;
   }
 }
 
@@ -65,4 +78,4 @@ AnimatedCircularProgress.defaultProps = {
   duration: 500,
   easing: Easing.out(Easing.ease),
   prefill: 0,
-};
+};