From 61c5042145eb17a61ebf16d4fd03f46a8e693cb6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=96mer=20Esmer?= <oesmer.oe@gmail.com>
Date: Sat, 14 Dec 2024 11:59:44 +0300
Subject: [PATCH] feat: add swipe animation spring configs

---
 README.md                |  8 +++++++
 src/Swiper.tsx           |  8 +++++++
 src/SwiperCard/index.tsx | 51 +++++++++++++++++++++++++++++++++-------
 src/index.ts             |  8 +++++++
 4 files changed, 67 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index 0a32946..d2d76ac 100644
--- a/README.md
+++ b/README.md
@@ -101,6 +101,10 @@ yarn add react-native-reanimated react-native-gesture-handler
 | :--------------------- | :----------- | :----------------------------------------------------------- |
 | swipeBackXSpringConfig | SpringConfig | Spring configuration for swipe back animation on the X-axis. |
 | swipeBackYSpringConfig | SpringConfig | Spring configuration for swipe back animation on the Y-axis. |
+| swipeRightSpringConfig | SpringConfig | Spring configuration for swipe right animation on the X-axis. |
+| swipeLeftSpringConfig  | SpringConfig | Spring configuration for swipe left animation on the X-axis.  |
+| swipeTopSpringConfig   | SpringConfig | Spring configuration for swipe top animation on the Y-axis. |
+| swipeBottomSpringConfig | SpringConfig | Spring configuration for swipe bottom animation on the Y-axis. |
 
 ### What is Spring Config?
 
@@ -400,6 +404,10 @@ type SwiperOptions<T> = {
    */
   swipeBackXSpringConfig?: SpringConfig;
   swipeBackYSpringConfig?: SpringConfig;
+  swipeRightSpringConfig?: SpringConfig;
+  swipeLeftSpringConfig?: SpringConfig;
+  swipeTopSpringConfig?: SpringConfig;
+  swipeBottomSpringConfig?: SpringConfig;
 };
 ```
 
diff --git a/src/Swiper.tsx b/src/Swiper.tsx
index 7ff6dca..bc163a6 100644
--- a/src/Swiper.tsx
+++ b/src/Swiper.tsx
@@ -54,6 +54,10 @@ const Swiper = <T,>(
     onSwipeEnd,
     swipeBackXSpringConfig = SWIPE_SPRING_CONFIG,
     swipeBackYSpringConfig = SWIPE_SPRING_CONFIG,
+    swipeRightSpringConfig = SWIPE_SPRING_CONFIG,
+    swipeLeftSpringConfig = SWIPE_SPRING_CONFIG,
+    swipeTopSpringConfig = SWIPE_SPRING_CONFIG,
+    swipeBottomSpringConfig = SWIPE_SPRING_CONFIG,
   }: SwiperOptions<T>,
   ref: ForwardedRef<SwiperCardRefType>
 ) => {
@@ -157,6 +161,10 @@ const Swiper = <T,>(
         onSwipeEnd={onSwipeEnd}
         swipeBackXSpringConfig={swipeBackXSpringConfig}
         swipeBackYSpringConfig={swipeBackYSpringConfig}
+        swipeRightSpringConfig={swipeRightSpringConfig}
+        swipeLeftSpringConfig={swipeLeftSpringConfig}
+        swipeTopSpringConfig={swipeTopSpringConfig}
+        swipeBottomSpringConfig={swipeBottomSpringConfig}
       >
         {renderCard(item, index)}
       </SwiperCard>
diff --git a/src/SwiperCard/index.tsx b/src/SwiperCard/index.tsx
index 188006c..a79cb50 100644
--- a/src/SwiperCard/index.tsx
+++ b/src/SwiperCard/index.tsx
@@ -60,6 +60,10 @@ const SwipeableCard = forwardRef<
       onSwipeEnd,
       swipeBackXSpringConfig,
       swipeBackYSpringConfig,
+      swipeRightSpringConfig,
+      swipeLeftSpringConfig,
+      swipeTopSpringConfig,
+      swipeBottomSpringConfig,
     },
     ref
   ) => {
@@ -74,27 +78,58 @@ const SwipeableCard = forwardRef<
 
     const swipeRight = useCallback(() => {
       onSwipeRight?.(index);
-      translateX.value = withSpring(maxCardTranslation);
+      translateX.value = withSpring(maxCardTranslation, swipeRightSpringConfig);
       activeIndex.value++;
-    }, [index, activeIndex, maxCardTranslation, onSwipeRight, translateX]);
+    }, [
+      index,
+      activeIndex,
+      maxCardTranslation,
+      onSwipeRight,
+      translateX,
+      swipeRightSpringConfig,
+    ]);
 
     const swipeLeft = useCallback(() => {
       onSwipeLeft?.(index);
-      translateX.value = withSpring(-maxCardTranslation);
+      translateX.value = withSpring(-maxCardTranslation, swipeLeftSpringConfig);
       activeIndex.value++;
-    }, [index, activeIndex, maxCardTranslation, onSwipeLeft, translateX]);
+    }, [
+      index,
+      activeIndex,
+      maxCardTranslation,
+      onSwipeLeft,
+      translateX,
+      swipeLeftSpringConfig,
+    ]);
 
     const swipeTop = useCallback(() => {
       onSwipeTop?.(index);
-      translateY.value = withSpring(-maxCardTranslationY);
+      translateY.value = withSpring(-maxCardTranslationY, swipeTopSpringConfig);
       activeIndex.value++;
-    }, [index, activeIndex, maxCardTranslationY, onSwipeTop, translateY]);
+    }, [
+      index,
+      activeIndex,
+      maxCardTranslationY,
+      onSwipeTop,
+      translateY,
+      swipeTopSpringConfig,
+    ]);
 
     const swipeBottom = useCallback(() => {
       onSwipeBottom?.(index);
-      translateY.value = withSpring(maxCardTranslationY);
+      translateY.value = withSpring(
+        maxCardTranslationY,
+        swipeBottomSpringConfig
+      );
       activeIndex.value++;
-    }, [index, activeIndex, maxCardTranslationY, onSwipeBottom, translateY]);
+    }, [
+      index,
+      activeIndex,
+      maxCardTranslationY,
+      onSwipeBottom,
+      translateY,
+      swipeBottomSpringConfig,
+    ]);
 
     const swipeBack = useCallback(() => {
       cancelAnimation(translateX);
diff --git a/src/index.ts b/src/index.ts
index 84d635c..b17574a 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -56,6 +56,10 @@ export type SwiperOptions<T> = {
   //* Swipe Animation Spring Configs (Animation Speed)
   swipeBackXSpringConfig?: SpringConfig;
   swipeBackYSpringConfig?: SpringConfig;
+  swipeRightSpringConfig?: SpringConfig;
+  swipeLeftSpringConfig?: SpringConfig;
+  swipeTopSpringConfig?: SpringConfig;
+  swipeBottomSpringConfig?: SpringConfig;
 };
 export type SwiperCardOptions = {
   index: number;
@@ -90,4 +94,8 @@ export type SwiperCardOptions = {
   OverlayLabelBottom?: () => JSX.Element;
   swipeBackXSpringConfig?: SpringConfig;
   swipeBackYSpringConfig?: SpringConfig;
+  swipeRightSpringConfig?: SpringConfig;
+  swipeLeftSpringConfig?: SpringConfig;
+  swipeTopSpringConfig?: SpringConfig;
+  swipeBottomSpringConfig?: SpringConfig;
 };