From 4654f97747a550a1319f81f8393ec215f9d11bce Mon Sep 17 00:00:00 2001
From: Navdeesh Ahuja <navdeeshahuja@gmail.com>
Date: Mon, 1 Nov 2021 23:46:01 +0530
Subject: [PATCH 1/3] Allow to configure Animation Duration

---
 src/index.tsx | 21 ++++++++++++++++-----
 src/types.ts  | 27 +++++++++++++++++++++++++++
 2 files changed, 43 insertions(+), 5 deletions(-)

diff --git a/src/index.tsx b/src/index.tsx
index 222aeb6..e27f2f3 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,7 @@ 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 +408,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 {

From 21116c835432ba82c96b3706a543d0de4a3e55c8 Mon Sep 17 00:00:00 2001
From: Navdeesh Ahuja <navdeeshahuja@gmail.com>
Date: Mon, 1 Nov 2021 23:50:50 +0530
Subject: [PATCH 2/3] Lint

---
 src/index.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/index.tsx b/src/index.tsx
index e27f2f3..021297c 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -397,7 +397,12 @@ const StepIndicator = ({
     }
   };
 
-  const onCurrentPositionChanged = (position: number, progressBarAnimationDuration: number, currentStepSizeAnimationDuration: number, currentStepBorderRadiusAnimationDuration: number) => {
+  const onCurrentPositionChanged = (
+    position: number,
+    progressBarAnimationDuration: number,
+    currentStepSizeAnimationDuration: number,
+    currentStepBorderRadiusAnimationDuration: number
+  ) => {
     if (position > stepCount - 1) {
       position = stepCount - 1;
     }

From 55189c8227dea4fedec67cd8a3b3270ffff9e31c Mon Sep 17 00:00:00 2001
From: Navdeesh Ahuja <navdeeshahuja@gmail.com>
Date: Tue, 2 Nov 2021 00:12:09 +0530
Subject: [PATCH 3/3] Modify README.md

---
 README.md | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

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