archive-gh-me/react-native-circular-progress
1
0
Fork 0
mirror of https://github.com/bartgryszko/react-native-circular-progress.git synced 2026-01-25 16:25:58 +00:00
Code Issues Projects Releases Wiki Activity

listener added for fill animation

Browse Source
This commit is contained in:
yigithanyucedag 2020-08-27 10:29:48 +03:00
parent 3f625a529f
commit b405cc4a74
1 changed files with 20 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/AnimatedCircularProgress.js
View File

@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Animated, Easing } from 'react-native';
import CircularProgress from './CircularProgress';
import React from "react";
import PropTypes from "prop-types";
import { Animated, Easing } from "react-native";
import CircularProgress from "./CircularProgress";
const AnimatedProgress = Animated.createAnimatedComponent(CircularProgress);
export default class AnimatedCircularProgress extends React.PureComponent {
@ -10,6 +10,10 @@ export default class AnimatedCircularProgress extends React.PureComponent {
this.state = {
fillAnimation: new Animated.Value(props.prefill),
};
this.state.fillAnimation.addListener(({ value }) =>
props.onFillChange(value)
);
}
componentDidMount() {
@ -36,7 +40,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,
@ -50,21 +54,27 @@ export default class AnimatedCircularProgress extends React.PureComponent {
animateColor() {
if (!this.props.tintColorSecondary) {
return this.props.tintColor
return this.props.tintColor;
}
const tintAnimation = this.state.fillAnimation.interpolate({
inputRange: [0, 100],
outputRange: [this.props.tintColor, this.props.tintColorSecondary]
})
outputRange: [this.props.tintColor, this.props.tintColorSecondary],
});
return tintAnimation
return tintAnimation;
}
render() {
const { fill, prefill, ...other } = this.props;
return <AnimatedProgress {...other} fill={this.state.fillAnimation} tintColor={this.animateColor()} />;
return (
<AnimatedProgress
{...other}
fill={this.state.fillAnimation}
tintColor={this.animateColor()}
/>
);
}
}