cally/app/(auth)/calendar/index.tsx

import React, { useState } from "react";
import { ScrollView, RefreshControl } from "react-native";
import { useSetAtom } from "jotai";
import CalendarPage from "@/components/pages/calendar/CalendarPage";
import { refreshTriggerAtom } from "@/components/pages/calendar/atoms";
import { colorMap } from "@/constants/colorMap";

export default function Screen() {
  const [refreshing, setRefreshing] = useState(false);
  const setRefreshTrigger = useSetAtom(refreshTriggerAtom);

  const onRefresh = React.useCallback(async () => {
    setRefreshing(true);

    const minimumDelay = new Promise((resolve) => setTimeout(resolve, 1000));

    try {
      setRefreshTrigger((prev) => !prev);

      await Promise.all([minimumDelay]);
    } catch (error) {
      console.error("Refresh failed:", error);
    } finally {
      setRefreshing(false);
    }
  }, [setRefreshTrigger]);

  return (
    <ScrollView
      style={{ flex: 1 }}
      contentContainerStyle={{ flex: 1 }}
      refreshControl={
        <RefreshControl
          colors={[
            colorMap.pink,
            colorMap.green,
            colorMap.orange,
            colorMap.purple,
            colorMap.teal,
          ]}
          tintColor={colorMap.pink}
          progressBackgroundColor={"white"}
          refreshing={refreshing}
          onRefresh={onRefresh}
        />
      }
      bounces={true}
      showsVerticalScrollIndicator={false}
    >
      <CalendarPage />
    </ScrollView>
  );
}