cally/components/pages/calendar/CalendarViewSwitch.tsx

import {Text, TouchableOpacity, View} from "react-native-ui-lib";
import React, {useState, useCallback} from "react";
import {StyleSheet} from "react-native";
import {useAtom} from "jotai";
import {isFamilyViewAtom} from "@/components/pages/calendar/atoms";

const CalendarViewSwitch = () => {
    const [isFamilyView, setIsFamilyView] = useAtom(isFamilyViewAtom);
    const [localState, setLocalState] = useState(isFamilyView);

    const handleViewChange = useCallback((newValue: boolean) => {
        setLocalState(newValue);
        setTimeout(() => {
            setIsFamilyView(newValue);
        }, 150);
    }, [setIsFamilyView]);

    return (
        <View
            row
            spread
            style={{
                position: "absolute",
                bottom: 20,
                left: 20,
                borderRadius: 30,
                backgroundColor: "white",
                alignItems: "center",
                justifyContent: "center",
                shadowColor: "#000",
                shadowOffset: {width: 0, height: 2},
                shadowOpacity: 0.25,
                shadowRadius: 3.84,
                elevation: 6,
            }}
            centerV
        >
            <TouchableOpacity
                onPress={() => handleViewChange(true)}
            >
                <View
                    centerV
                    centerH
                    height={40}
                    paddingH-15
                    style={localState ? styles.switchBtnActive : styles.switchBtn}
                >
                    <Text
                        color={localState ? "white" : "#a1a1a1"}
                        style={styles.switchTxt}
                    >
                        Family View
                    </Text>
                </View>
            </TouchableOpacity>

            <TouchableOpacity
                onPress={() => handleViewChange(false)}
            >
                <View
                    centerV
                    centerH
                    height={40}
                    paddingH-15
                    style={!localState ? styles.switchBtnActive : styles.switchBtn}
                >
                    <Text
                        color={!localState ? "white" : "#a1a1a1"}
                        style={styles.switchTxt}
                    >
                        My View
                    </Text>
                </View>
            </TouchableOpacity>
        </View>
    );
};

export default CalendarViewSwitch;

const styles = StyleSheet.create({
    switchBtnActive: {
        backgroundColor: "#a1a1a1",
        borderRadius: 50,
    },
    switchBtn: {
        backgroundColor: "white",
        borderRadius: 50,
    },
    switchTxt: {
        fontSize: 16,
        fontFamily: "Manrope_600SemiBold",
    },
});