From 332c08e48da25fcf1fbfa844443d5a52f0b3b66e Mon Sep 17 00:00:00 2001
From: Prakash <om.pcprakash@gmail.com>
Date: Mon, 23 Oct 2023 21:27:54 +0530
Subject: [PATCH] Add rotation animation when card is being removed

---
 src/components/ToDoComponent/Card.tsx | 41 ++++++++++++++++++++++-----
 1 file changed, 34 insertions(+), 7 deletions(-)

diff --git a/src/components/ToDoComponent/Card.tsx b/src/components/ToDoComponent/Card.tsx
index 0a9609a2..e2ed899c 100644
--- 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,16 +68,16 @@ 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;
       }
     },
@@ -79,11 +85,25 @@ const Card = ({
       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`,
+      },
     ],
   }));