diff --git a/README.md b/README.md
index dbbe15e..e2d143f 100644
--- a/README.md
+++ b/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
```
diff --git a/example-app/App.tsx b/example-app/App.tsx
index 914b5ef..daf8c65 100644
--- a/example-app/App.tsx
+++ b/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}
diff --git a/screenshot.gif b/screenshot.gif
index 370dc03..cf50688 100644
Binary files a/screenshot.gif and b/screenshot.gif differ
diff --git a/src/AnimatedCircularProgress.js b/src/AnimatedCircularProgress.js
index 09876e3..d57de9b 100644
--- a/src/AnimatedCircularProgress.js
+++ b/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;
-
+
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 ;
+ return ;
}
}