Add native driver support for Bar and smooth animation (#57)

* Add native driver support and smooth bar animation

* update readme

* revert changes on circles and only change bar

* add animationOptions prop

* update readme to include animationOptions

* remove whitespace

* fix typo

Bar.js

@@ -27,6 +27,11 @@ export default class ProgressBar extends Component {
     style: RNViewPropTypes.style,
     unfilledColor: PropTypes.string,
     width: PropTypes.number,
+    useNativeDriver: PropTypes.bool,
+    animationOptions: PropTypes.shape({
+      animationFunction: PropTypes.oneOf([Animated.decay, Animated.timing, Animated.spring]),
+      config: PropTypes.object.isRequired
+    })
   };
 
   static defaultProps = {
@@ -38,6 +43,11 @@ export default class ProgressBar extends Component {
     indeterminate: false,
     progress: 0,
     width: 150,
+    useNativeDriver: false,
+    animationOptions: {
+      animationFunction: Animated.spring,
+      config: { bounciness: 0 }
+    }
   };
 
   constructor(props) {
@@ -63,6 +73,7 @@ export default class ProgressBar extends Component {
       } else {
         Animated.spring(this.state.animationValue, {
           toValue: BAR_WIDTH_ZERO_POSITION,
+          useNativeDriver: props.useNativeDriver,
         }).start();
       }
     }
@@ -76,10 +87,12 @@ export default class ProgressBar extends Component {
       );
 
       if (props.animated) {
-        Animated.spring(this.state.progress, {
-          toValue: progress,
-          bounciness: 0,
-        }).start();
+        const { animationFunction, config } = this.props.animationOptions;
+        animationFunction(this.state.progress, {
+          ...config,
+          toValue: progress, 
+          useNativeDriver: props.useNativeDriver
+        }).start()          
       } else {
         this.state.progress.setValue(progress);
       }
@@ -93,6 +106,7 @@ export default class ProgressBar extends Component {
       duration: 1000,
       easing: Easing.linear,
       isInteraction: false,
+      useNativeDriver: this.props.useNativeDriver,
     }).start((endState) => {
       if (endState.finished) {
         this.animate();

README.md

@@ -59,6 +59,10 @@ All of the props under *Properties* in addition to the following:
 |**`width`**|Full width of the progress bar, set to `null` to use automatic flexbox sizing. |`150`|
 |**`height`**|Height of the progress bar. |`6`|
 |**`borderRadius`**|Rounding of corners, set to `0` to disable. |`4`|
+|**`useNativeDriver`**|Use native driver for the animations. |`false`|
+|**`animationOptions`**|Object with the following options||
+|**`animationOptions.animationFunction`**|Sets the animation function to animate the progress. Can be one of: Animated.decay, Animated.timing, Animated.spring|`Animated.spring`|
+|**`animationOptions.config`**|Sets the config that is passed into the `animationFunction`|`{ bounciness: 0 }`|
 
 ### `Progress.Circle`