diff --git a/README.md b/README.md index 12faaee..5de4abb 100644 --- a/README.md +++ b/README.md @@ -114,7 +114,8 @@ 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 +secondTintColor | string | the same as tintColor | To change fill color from the first color to the second color as animation progresses +thirdTintColor | string | the same as secondColor | To change fill color from the second color to the third color as animation progresses `AnimatedCircularProgress` also exposes the following functions: diff --git a/index.d.ts b/index.d.ts index d902b0b..34ca73c 100644 --- 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 index 19197ce..737ac00 100644 --- 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