1  import React, { useRef, useEffect } from 'react';
 2  import { RefreshControl, Animated, RefreshControlProps } from 'react-native';
 3  import { useTheme } from '@/constants/ThemeContext';
 4  import { Colors } from '@/constants/Colors';
 5  import { useHapticFeedback } from '@/utils/haptics';
 6  
 7  interface SmoothRefreshControlProps extends RefreshControlProps {
 8    onRefresh: () => void;
 9    refreshing: boolean;
10  }
11  
12  export const SmoothRefreshControl: React.FC<SmoothRefreshControlProps> = ({
13    onRefresh,
14    refreshing,
15    ...props
16  }) => {
17    const { actualTheme } = useTheme();
18    const colors = Colors[actualTheme];
19    const haptics = useHapticFeedback();
20    const rotationAnim = useRef(new Animated.Value(0)).current;
21  
22    useEffect(() => {
23      if (refreshing) {
24        // Trigger haptic feedback when refresh starts
25        haptics.onSelection();
26  
27        // Start rotation animation
28        Animated.loop(
29          Animated.timing(rotationAnim, {
30            toValue: 1,
31            duration: 1000,
32            useNativeDriver: true,
33          })
34        ).start();
35      } else {
36        // Stop animation and reset
37        rotationAnim.stopAnimation();
38        rotationAnim.setValue(0);
39      }
40    }, [refreshing, rotationAnim, haptics]);
41  
42    const handleRefresh = () => {
43      haptics.onPress();
44      onRefresh();
45    };
46  
47    return (
48      <RefreshControl
49        refreshing={refreshing}
50        onRefresh={handleRefresh}
51        colors={[colors.primary]}
52        tintColor={colors.primary}
53        progressBackgroundColor={colors.card}
54        progressViewOffset={0}
55        {...props}
56      />
57    );
58  };