diff --git a/README.md b/README.md index ac600e8..e370d3f 100644 --- a/README.md +++ b/README.md @@ -53,7 +53,10 @@ const customStyles = { stepIndicatorLabelUnFinishedColor: '#aaaaaa', labelColor: '#999999', labelSize: 13, - currentStepLabelColor: '#fe7013' + currentStepLabelColor: '#fe7013', + progressBarAnimationDuration: 200, + currentStepSizeAnimationDuration: 100, + currentStepBorderRadiusAnimationDuration: 100, } @@ -121,6 +124,9 @@ onPageChange(position){ | ```labelSize``` | Number | 13 | ```labelAlign``` | String | 'center' | ```labelFontFamily``` | String | +| ```progressBarAnimationDuration``` | Number | 200 +| ```currentStepSizeAnimationDuration``` | Number | 100 +| ```currentStepBorderRadiusAnimationDuration``` | Number | 100 ### Contributing diff --git a/src/index.tsx b/src/index.tsx index 222aeb6..021297c 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -49,6 +49,9 @@ interface DefaultStepIndicatorStyles { | undefined; currentStepLabelColor: string; labelFontFamily?: string; + progressBarAnimationDuration: number; + currentStepSizeAnimationDuration: number; + currentStepBorderRadiusAnimationDuration: number; } const defaultStyles: DefaultStepIndicatorStyles = { @@ -76,6 +79,9 @@ const defaultStyles: DefaultStepIndicatorStyles = { labelSize: 13, labelAlign: 'center', currentStepLabelColor: '#4aae4f', + progressBarAnimationDuration: 200, + currentStepSizeAnimationDuration: 100, + currentStepBorderRadiusAnimationDuration: 100, }; const StepIndicator = ({ @@ -121,7 +127,12 @@ const StepIndicator = ({ React.useEffect(effectCustomStyles, [customStylesFromProps]); const effectCurrentPosition = () => { - onCurrentPositionChanged(currentPosition); + onCurrentPositionChanged( + currentPosition, + customStyles.progressBarAnimationDuration, + customStyles.currentStepSizeAnimationDuration, + customStyles.currentStepBorderRadiusAnimationDuration + ); }; React.useEffect(effectCurrentPosition, [currentPosition, progressBarSize]); @@ -386,7 +397,12 @@ const StepIndicator = ({ } }; - const onCurrentPositionChanged = (position: number) => { + const onCurrentPositionChanged = ( + position: number, + progressBarAnimationDuration: number, + currentStepSizeAnimationDuration: number, + currentStepBorderRadiusAnimationDuration: number + ) => { if (position > stepCount - 1) { position = stepCount - 1; } @@ -397,18 +413,18 @@ const StepIndicator = ({ Animated.sequence([ Animated.timing(progressAnim, { toValue: isNaN(animateToPosition) ? 0 : animateToPosition, - duration: 200, + duration: progressBarAnimationDuration, useNativeDriver: false, }), Animated.parallel([ Animated.timing(sizeAnim, { toValue: customStyles.currentStepIndicatorSize, - duration: 100, + duration: currentStepSizeAnimationDuration, useNativeDriver: false, }), Animated.timing(borderRadiusAnim, { toValue: customStyles.currentStepIndicatorSize / 2, - duration: 100, + duration: currentStepBorderRadiusAnimationDuration, useNativeDriver: false, }), ]), diff --git a/src/types.ts b/src/types.ts index e7f7c06..8ed3ed1 100644 --- a/src/types.ts +++ b/src/types.ts @@ -237,6 +237,33 @@ export interface StepIndicatorStyles { * */ labelFontFamily?: string; + + /** + * Animation Duration for Progress Bar + * + * @default 200 + * @type {number} + * @memberof StepIndicatorStyles + */ + progressBarAnimationDuration?: number; + + /** + * Animation Duration for Current Step Size + * + * @default 100 + * @type {number} + * @memberof StepIndicatorStyles + */ + currentStepSizeAnimationDuration?: number; + + /** + * Animation Duration for Current Border Radius + * + * @default 100 + * @type {number} + * @memberof StepIndicatorStyles + */ + currentStepBorderRadiusAnimationDuration?: number; } export interface StepIndicatorProps {