From b769237bc56c127dbc1c56a38caa95b8f3446881 Mon Sep 17 00:00:00 2001 From: Jakhongir Khusanov Date: Mon, 4 Oct 2021 14:58:13 -0700 Subject: [PATCH] Add delay to animated circle --- README.md | 1 + index.d.ts | 8 ++++++++ src/AnimatedCircularProgress.js | 6 +++++- 3 files changed, 14 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index f898b15..a8f6d88 100644 --- a/README.md +++ b/README.md @@ -112,6 +112,7 @@ Name | Type | Default value | Descrip --------------------|------------------------|-------------------------|-------------- prefill | number (0-100) | 0 | Initial fill-value before animation starts duration | number | 500 | Duration of animation in ms +delay | number | 0 | Delay of animation in ms easing | function | Easing.out(Easing.ease) | Animation easing function onAnimationComplete | function | | Function that's invoked when the animation completes (both on mount and if called with `.animate()`) onFillChange | function | | Function that returns current progress on every change diff --git a/index.d.ts b/index.d.ts index 563c30d..1a397c1 100644 --- a/index.d.ts +++ b/index.d.ts @@ -141,6 +141,14 @@ declare module 'react-native-circular-progress' { */ duration?: number; + /** + * Delay of animation in ms + * + * @type {number} + * @default 0 + */ + delay?: number; + /** * * @type {Function} diff --git a/src/AnimatedCircularProgress.js b/src/AnimatedCircularProgress.js index 1331d31..ff2e73f 100644 --- a/src/AnimatedCircularProgress.js +++ b/src/AnimatedCircularProgress.js @@ -10,7 +10,7 @@ export default class AnimatedCircularProgress extends React.PureComponent { this.state = { fillAnimation: new Animated.Value(props.prefill), }; - if(props.onFillChange){ + if (props.onFillChange) { this.state.fillAnimation.addListener(({ value }) => props.onFillChange(value) ); @@ -41,12 +41,14 @@ export default class AnimatedCircularProgress extends React.PureComponent { const duration = dur || this.props.duration; const easing = ease || this.props.easing; const useNativeDriver = this.props.useNativeDriver; + const delay = this.props.delay; const anim = Animated.timing(this.state.fillAnimation, { useNativeDriver, toValue, easing, duration, + delay, }); anim.start(this.props.onAnimationComplete); @@ -86,6 +88,7 @@ AnimatedCircularProgress.propTypes = { easing: PropTypes.func, onAnimationComplete: PropTypes.func, useNativeDriver: PropTypes.bool, + delay: PropTypes.number, }; AnimatedCircularProgress.defaultProps = { @@ -93,4 +96,5 @@ AnimatedCircularProgress.defaultProps = { easing: Easing.out(Easing.ease), prefill: 0, useNativeDriver: false, + delay: 0, };