MeTracker/components/Card.tsx at main · Efe-Cal/MeTracker · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
import { StyleProp, ViewStyle, Animated } from 'react-native';
import { ThemedView } from './ThemedView';
import { useContext, useRef } from 'react';
import { ThemeContext } from '@/theme/ThemeContext';
import { PanGestureHandler, HandlerStateChangeEvent, PanGestureHandlerEventPayload } from 'react-native-gesture-handler';

interface CardProps {
  children: React.ReactNode;
  style?: StyleProp<ViewStyle>;
  onSwipe?: (direction: 'left' | 'right') => void;
}

export function Card({ children, style, onSwipe }: CardProps) {
  const { theme } = useContext(ThemeContext);
  const panRef = useRef(null);

  // Add Animated.Value for horizontal translation
  const translateX = useRef(new Animated.Value(0)).current;

  // Animated event for gesture
  const handlePan = Animated.event(
    [{ nativeEvent: { translationX: translateX } }],
    { useNativeDriver: true }
  );

  const handleGestureEvent = (event: HandlerStateChangeEvent<PanGestureHandlerEventPayload>) => {
    if (event.nativeEvent.state === 5) { // 5 === State.END
      const { translationX } = event.nativeEvent;
      if (onSwipe && Math.abs(translationX) > 40) {
        // Animate card out
        Animated.timing(translateX, {
          toValue: translationX > 0 ? 500 : -500,
          duration: 200,
          useNativeDriver: true,
        }).start(() => {
          translateX.setValue(0);
          onSwipe(translationX > 0 ? 'right' : 'left');
        });
      } else {
        // Animate card back to center
        Animated.spring(translateX, {
          toValue: 0,
          useNativeDriver: true,
        }).start();
      }
    }
  };

  if (onSwipe) {
    return (
      <PanGestureHandler
        ref={panRef}
        onGestureEvent={handlePan}
        onHandlerStateChange={handleGestureEvent}
        activeOffsetX={[-20, 20]}
      >
        <Animated.View style={{ transform: [{ translateX }] }}>
          <ThemedView
            style={[
              {
                backgroundColor: theme === 'dark' ? '#27272a' : 'white',
                borderRadius: 10,
                padding: 10,
                shadowColor: theme === 'dark' ? '#000' : 'black',
                shadowOffset: { width: 0, height: 2 },
                shadowOpacity: 0.1,
                shadowRadius: 10,
                elevation: 5,
                flexDirection: "row",
                justifyContent: "space-between",
                alignItems: "center",
                margin: 5,
                display: "flex"
              },
              style
            ]}
          >
            {children}
          </ThemedView>
        </Animated.View>
      </PanGestureHandler>
    );
  }

  return (
    <ThemedView
      style={[
        {
          backgroundColor: theme === 'dark' ? '#27272a' : 'white',
          borderRadius: 10,
          padding: 10,
          shadowColor: theme === 'dark' ? '#000' : 'black',
          shadowOffset: { width: 0, height: 2 },
          shadowOpacity: 0.1,
          shadowRadius: 10,
          elevation: 5,
          flexDirection: "row",
          justifyContent: "space-between",
          alignItems: "center",
          margin: 5,
          display: "flex"
        },
        style
      ]}
    >
      {children}
    </ThemedView>
  );
}