text: import React from 'react';
  import PropTypes from 'prop-types';
  import {
    Animated,
    AppState,
    Easing,
    View,
    ViewPropTypes
  } from 'react-native';
  import CircularProgress from './CircularProgress';
  const AnimatedProgress = Animated.createAnimatedComponent(CircularProgress);
  
  export default class AnimatedCircularProgress extends React.PureComponent {
    constructor(props) {
      super(props);
      const fillAnimation = new Animated.Value(props.prefill);
      this.state = { fillAnimation };
      if (this.props.animatedValue) {
        fillAnimation.addListener((animatedValue) => {
          this.props.animatedValue(animatedValue.value);
        });
      }
    }
  
    componentDidMount() {
      this.animate();
    }
  
    componentDidUpdate(prevProps) {
      if (prevProps.fill !== this.props.fill) {
        this.animate();
      }
    }
  
    componentWillUnmount() {
      this.state.fillAnimation.removeAllListeners();
    }
  
    animate(toVal, dur, ease) {
      const toValue = toVal || this.props.fill;
      const duration = dur || this.props.duration;
      const easing = ease || this.props.easing;
  
      return Animated.timing(this.state.fillAnimation, {
        toValue,
        easing,
        duration,
      }).start(() => {
        if (this.props.onAnimationComplete) {
          this.props.onAnimationComplete();
        }
      });
    }
  
    render() {
      const { fill, prefill, ...other } = this.props;
  
      return (
        <AnimatedProgress
          {...other}
          fill={this.state.fillAnimation}
        />
      );
    }
  }
  
  AnimatedCircularProgress.propTypes = {
    ...CircularProgress.propTypes,
    prefill: PropTypes.number,
    duration: PropTypes.number,
    easing: PropTypes.func,
    onAnimationComplete: PropTypes.func,
  };
  
  AnimatedCircularProgress.defaultProps = {
    duration: 500,
    easing: Easing.out(Easing.ease),
    prefill: 0,
  };
  