import PullToRefreshLoader from 'components/PullToRefresh';
import Animated, { useSharedValue, useAnimatedScrollHandler, runOnJS } from 'react-native-reanimated';
import { useState } from 'react';

function MyApp() {
  const progress = useSharedValue(0);
  const [refreshing, setRefreshing] = useState(false);

  const handleRefresh = () => {
    setRefreshing(true);
    // Fetch data...
    setTimeout(() => setRefreshing(false), 2000);
  };

  const scrollHandler = useAnimatedScrollHandler({
    onScroll: (event) => {
      if (event.contentOffset.y < 0 && !refreshing) {
        progress.value = Math.min(Math.abs(event.contentOffset.y) / 80, 1);
        if (progress.value >= 1.1) runOnJS(handleRefresh)();
      }
    },
  });

  return (
    <View>
      <PullToRefreshLoader 
        progress={progress} 
        refreshing={refreshing}
        color="black"
      />
      <Animated.ScrollView onScroll={scrollHandler} scrollEventThrottle={16}>
        {/* Your content */}
      </Animated.ScrollView>
    </View>
  );
}