Skip to content

Commit

Permalink
Refactor animationOptions into two props
Browse files Browse the repository at this point in the history
  • Loading branch information
oblador committed Aug 22, 2017
1 parent b6ab3ad commit 0556a83
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 17 deletions.
25 changes: 11 additions & 14 deletions Bar.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand All @@ -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) {
Expand Down Expand Up @@ -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);
}
Expand Down
5 changes: 2 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`

Expand Down

0 comments on commit 0556a83

Please sign in to comment.