(feat): add a tint color

bartgryszko · Mar 27, 2020 · 501fb13 · 501fb13 · Monir-Shembesh · Mar 27, 2020
1 parent e343ab4
commit 501fb13
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 8 deletions.
diff --git a/index.d.ts b/index.d.ts
@@ -48,12 +48,20 @@ declare module 'react-native-circular-progress' {
     tintColor?: string;
 
     /**
-     * Change the fill color from tintColor to tintColorSecondary as animation progresses.
-     *
+     * Change the fill color from the first to the second color as animation progresses.
+     * 
+     * @type {string}
+     * @default 'undefined'
+     */
+    secondTintColor?: string;
+
+    /**
+     * Change the fill color from the second color to the third color as animation progresses.
+     * 
      * @type {string}
      * @default 'undefined'
      */
-    tintColorSecondary?: string;
+    thirdTintColor?: string;
 
     /**
      * Current progress / tint transparency
@@ -181,7 +189,7 @@ declare module 'react-native-circular-progress' {
 
   export class AnimatedCircularProgress extends React.Component<
     AnimatedCircularProgressProps
-  > {
+    > {
     /**
      * Animate the progress bar to a specific value
      *

diff --git a/src/AnimatedCircularProgress.js b/src/AnimatedCircularProgress.js
@@ -36,7 +36,7 @@ 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 anim = Animated.timing(this.state.fillAnimation, {
       useNativeDriver,
       toValue,
@@ -49,13 +49,17 @@ export default class AnimatedCircularProgress extends React.PureComponent {
   }
 
   animateColor() {
-    if (!this.props.tintColorSecondary) {
+    if (!this.props.secondTintColor) {
       return this.props.tintColor
     }
 
+    if (!this.props.thirdTintColor) {
+      return this.props.secondTintColor
+    }
+
     const tintAnimation = this.state.fillAnimation.interpolate({
-      inputRange: [0, 100],
-      outputRange: [this.props.tintColor, this.props.tintColorSecondary]
+      inputRange: [0, 50, 100],
+      outputRange: [this.props.tintColor, this.props.secondTintColor, this.props.thirdTintColor]
     })
 
     return tintAnimation