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

import React from "react";
import {RefreshControl, ScrollView, View} from "react-native";
import CalendarPage from "@/components/pages/calendar/CalendarPage";
import {colorMap} from "@/constants/colorMap";
import TabletCalendarPage from "@/components/pages/(tablet_pages)/calendar/TabletCalendarPage";
import * as Device from "expo-device";
import {DeviceType} from "expo-device";
import {useCalSync} from "@/hooks/useCalSync";

export default function Screen() {
    const isTablet = Device.deviceType === DeviceType.TABLET;
    const {
        resyncAllCalendars,
        isSyncing,
    } = useCalSync();

    const onRefresh = React.useCallback(async () => {
        try {
            await resyncAllCalendars();
        } catch (error) {
            console.error("Refresh failed:", error);
        }
    }, [resyncAllCalendars]);

    return (
        <View style={{ flex: 1 }}>
            <View style={{ flex: 1, zIndex: 0 }}>
                {Device.deviceType === DeviceType.TABLET ? (
                    <TabletCalendarPage />
                ) : (
                    <CalendarPage />
                )}
            </View>

            <ScrollView
                style={{
                    position: "absolute",
                    top: 0,
                    left: isTablet ? "15%" : 0,
                    height: isTablet ? "9%" : "4%",
                    width: isTablet ? "62%" : "100%",
                    zIndex: 50,
                    backgroundColor: "transparent",
                }}
                contentContainerStyle={{
                    flex: 1,
                    justifyContent: "center",
                    paddingRight: 200,
                }}
                refreshControl={
                    <RefreshControl
                        colors={[
                            colorMap.pink,
                            colorMap.green,
                            colorMap.orange,
                            colorMap.purple,
                            colorMap.teal,
                        ]}
                        tintColor={colorMap.pink}
                        progressBackgroundColor={"white"}
                        refreshing={refreshing || isSyncing}
                        onRefresh={onRefresh}
                        style={{
                            position: "absolute",
                            left: "50%", // Position at screen center
                            transform: [
                                // Offset by half its own width
                                { translateX: -20 }, // Assuming the refresh control is ~40px wide
                            ],
                        }}
                    />
                }
                bounces={true}
                showsVerticalScrollIndicator={false}
                pointerEvents={refreshing || isSyncing ? "auto" : "none"}
            />
        </View>
    );
}