animatedCircularProgress.js

import React from 'react';
import { Animated } from 'react-native';
import CircularProgress from './CircularProgress';
const AnimatedProgress = Animated.createAnimatedComponent(CircularProgress);

class AnimatedCircularProgress extends React.Component {

	constructor() {
		super();
		this._animatedValue = new Animated.Value(0);
		this._animatedValue.addListener(({ value }) => this._value = value);
	}

	start(duration) {
		this.duration = duration;
		Animated.timing(this._animatedValue, {
			toValue: 360,
			duration: this.duration,
		}).start(() => this._animatedValue.setValue(0));
	}

	restartAnimation() {
		this._animatedValue.setValue(0);
		Animated.timing(this._animatedValue, {
			useNativeDriver: false, 
			toValue: 360,
			duration: this.duration,
		}).start(() => this._animatedValue.setValue(0));
	}

	stop() {
		this._animatedValue.stopAnimation();
	}

	continue() {
		Animated.timing(this._animatedValue, {
			toValue: 360,
			duration: this.duration,
		}).start(() => this._animatedValue.setValue(0));
	}

	render() {
		return (
			<AnimatedProgress 
				value={this._animatedValue}		
				{...this.props}
			/>
		)
	}
}

export default AnimatedCircularProgress;