From c0c983395e3f37b8e24ca7eeb0de4c949ffe7fa9 Mon Sep 17 00:00:00 2001
From: Markus Lindqvist <markus.lindqvist@reaktor.com>
Date: Tue, 21 Nov 2017 14:30:49 +0200
Subject: [PATCH] Fix bug #45, linear animation is not actually linear

---
 expoexample/progresschart/ProgressChart.js | 7 +++++--
 src/AnimatedCircularProgress.js            | 3 ++-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/expoexample/progresschart/ProgressChart.js b/expoexample/progresschart/ProgressChart.js
index 7d92906..f40eb6a 100644
--- a/expoexample/progresschart/ProgressChart.js
+++ b/expoexample/progresschart/ProgressChart.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { AppRegistry, StyleSheet, Text, View, PanResponder } from 'react-native';
+import { AppRegistry, Button, StyleSheet, Text, View, PanResponder } from 'react-native';
 import { AnimatedCircularProgress } from 'react-native-circular-progress';
 
 const MAX_POINTS = 500;
@@ -27,11 +27,13 @@ export default class ProgressChart extends React.Component {
       },
 
       onPanResponderMove: (evt, gestureState) => {
+        this.refs.circularProgress.performLinearAnimation(0, 0);
         // For each 2 pixels add or subtract 1 point
         this.setState({ pointsDelta: Math.round(-gestureState.dy / 2) });
       },
       onPanResponderTerminationRequest: (evt, gestureState) => true,
       onPanResponderRelease: (evt, gestureState) => {
+        this.refs.circularProgress.performLinearAnimation(100, 2000);
         let points = this.state.points + this.state.pointsDelta;
         console.log(Math.min(points, MAX_POINTS));
         this.setState({
@@ -77,8 +79,9 @@ export default class ProgressChart extends React.Component {
         <AnimatedCircularProgress
           size={100}
           width={25}
-          fill={fill}
+          fill={0}
           tintColor="#00e0ff"
+          ref="circularProgress"
           backgroundColor="#3d5875" />
 
         <Text style={[styles.pointsDelta, this.state.isMoving && styles.pointsDeltaActive]}>
diff --git a/src/AnimatedCircularProgress.js b/src/AnimatedCircularProgress.js
index a65e21b..aef6619 100644
--- a/src/AnimatedCircularProgress.js
+++ b/src/AnimatedCircularProgress.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { View, ViewPropTypes, Animated } from 'react-native';
+import { Animated, Easing, View, ViewPropTypes } from 'react-native';
 import CircularProgress from './CircularProgress';
 const AnimatedProgress = Animated.createAnimatedComponent(CircularProgress);
 
@@ -41,6 +41,7 @@ export default class AnimatedCircularProgress extends React.Component {
 
     Animated.timing(this.state.chartFillAnimation, {
       toValue: toValue,
+      easing: Easing.linear,
       duration: duration
     }).start(onLinearAnimationComplete);
   }