diff --git a/Bar.js b/Bar.js index f9116fa..4321c42 100644 --- a/Bar.js +++ b/Bar.js @@ -28,10 +28,9 @@ export default class ProgressBar extends Component { 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 - }) + // eslint-disable-next-line react/forbid-prop-types + animationConfig: PropTypes.object.isRequired, + animationType: PropTypes.oneOf(['decay', 'timing', 'spring']), }; static defaultProps = { @@ -44,10 +43,8 @@ export default class ProgressBar extends Component { progress: 0, width: 150, useNativeDriver: false, - animationOptions: { - animationFunction: Animated.spring, - config: { bounciness: 0 } - } + animationConfig: { bounciness: 0 }, + animationType: 'spring', }; constructor(props) { @@ -87,12 +84,12 @@ export default class ProgressBar extends Component { ); if (props.animated) { - const { animationFunction, config } = this.props.animationOptions; - animationFunction(this.state.progress, { - ...config, - toValue: progress, - useNativeDriver: props.useNativeDriver - }).start() + const { animationType, animationConfig } = this.props; + Animated[animationType](this.state.progress, { + ...animationConfig, + toValue: progress, + useNativeDriver: props.useNativeDriver, + }).start(); } else { this.state.progress.setValue(progress); } diff --git a/README.md b/README.md index 19bfac2..ee932af 100644 --- a/README.md +++ b/README.md @@ -60,9 +60,8 @@ All of the props under *Properties* in addition to the following: |**`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 }`| +|**`animationConfig`**|Config that is passed into the `Animated` function|`{ bounciness: 0 }`| +|**`animationType`**|Animation type to animate the progress, one of: `decay`, `timing`, `spring`|`spring`| ### `Progress.Circle`