Merge pull request #312 from Real-Dev-Squad/I236-add-animtaions-to-go…

…als-on-swipe Add rotation animation when card is being removed
Real-Dev-Squad · Oct 25, 2023 · 9185355 · 9185355
2 parents d0d484b + 332c08e
commit 9185355
Showing 1 changed file with 34 additions and 7 deletions.
diff --git a/src/components/ToDoComponent/Card.tsx b/src/components/ToDoComponent/Card.tsx
@@ -1,7 +1,8 @@
-import { Image, Text, View, TouchableOpacity } from 'react-native';
+import { Image, Text, View, TouchableOpacity, Dimensions } from 'react-native';
 import React, { useState, useEffect, memo } from 'react';
 import Animated, {
   Easing,
+  interpolate,
   runOnJS,
   useAnimatedGestureHandler,
   useAnimatedStyle,
@@ -49,6 +50,11 @@ const Card = ({
     timerRef = setTimeout(() => deleteCardFunction(), 4000);
   };
 
+  const { width: SCREEN_WIDTH } = Dimensions.get('screen');
+  const SCREEN_WIDTH_30 = SCREEN_WIDTH / 3;
+  const ROTATION_DEG = 60;
+  const CARD_MOVEMENT_THRESHOLD = SCREEN_WIDTH / 2;
+
   useEffect(() => {
     // Clear the interval when the component unmounts
     return () => clearTimeout(timerRef);
@@ -62,28 +68,42 @@ const Card = ({
 
   const panGesture = useAnimatedGestureHandler({
     onActive: (event) => {
-      if (translateY.value < 150) {
+      if (translateY.value < CARD_MOVEMENT_THRESHOLD) {
         translateY.value = event.translationY;
       }
-      if (translateX.value < 150) {
+      if (translateX.value < CARD_MOVEMENT_THRESHOLD) {
         translateX.value = event.translationX;
       }
-      if (translateY.value < -150) {
+      if (translateY.value < -CARD_MOVEMENT_THRESHOLD) {
         translateY.value = event.translationY;
       }
-      if (translateX.value < -150) {
+      if (translateX.value < -CARD_MOVEMENT_THRESHOLD) {
         translateX.value = event.translationX;
       }
     },
     onEnd: () => {
       translateY.value = withTiming(0, { easing: Easing.linear });
       translateX.value = withTiming(0, { easing: Easing.linear });
 
-      if (translateY.value > 100) {
+      if (
+        translateX.value > SCREEN_WIDTH_30 ||
+        translateX.value < -SCREEN_WIDTH_30
+      ) {
+        translateX.value = withTiming(
+          translateX.value > 0 ? SCREEN_WIDTH : -SCREEN_WIDTH,
+          { easing: Easing.linear },
+          (finished) => {
+            if (finished) {
+              return runOnJS(removeCard)(item.id);
+            }
+          },
+        );
+      }
+
+      if (translateY.value < -100 || translateY.value > 100) {
         // item.id required but after removing this the function is not getting called
         return runOnJS(changecard)(item.id);
       }
-      runOnJS(changecard)(item.id);
     },
   });
 
@@ -95,6 +115,13 @@ const Card = ({
       {
         translateX: translateX.value,
       },
+      {
+        rotate: `${interpolate(
+          translateX.value,
+          [-SCREEN_WIDTH, 0, SCREEN_WIDTH],
+          [-ROTATION_DEG, 0, ROTATION_DEG],
+        )} deg`,
+      },
     ],
   }));