feat: add swipe animation spring configs

Skipperlla · Dec 14, 2024 · 61c5042 · 61c5042
1 parent 8ba95c3
commit 61c5042
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;
 };