cally/app/(unauth)/birthday_page.tsx

import { SafeAreaView } from "react-native-safe-area-context";
import { Button, Text, View, DateTimePicker } from "react-native-ui-lib";
import React, { useState } from "react";
import { useRouter } from "expo-router";
import { Platform, StyleSheet } from "react-native";
import { useAuthContext } from "@/contexts/AuthContext";
import firestore from "@react-native-firebase/firestore";
import { useUpdateUserData } from "@/hooks/firebase/useUpdateUserData";

export default function BirthdayScreen() {
  const router = useRouter();
  const { user } = useAuthContext();
  const [date, setDate] = useState(new Date());
  const { mutateAsync: updateUserData } = useUpdateUserData();

  const onDateChange = (event: any, selectedDate?: Date) => {
    const currentDate = selectedDate || date;
    setDate(currentDate);
  };

  const handleContinue = async () => {
    try {
      updateUserData({
        newUserData: {
          birthday: date,
        },
      }).then(() => router.push("/(unauth)/cal_sync"));
    } catch (error) {
      console.error("Error saving birthday:", error);
    }
  };

  const getMaxDate = () => {
    const date = new Date();
    date.setFullYear(date.getFullYear() - 3); // Minimum age: 3 years
    return date;
  };

  const getMinDate = () => {
    const date = new Date();
    date.setFullYear(date.getFullYear() - 18); // Maximum age: 18 years
    return date;
  };

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View
        style={{
          flex: 1,
          padding: 21,
          paddingBottom: 45,
          paddingTop: "20%",
          alignItems: "center",
        }}
      >
        <View gap-13 width={"100%"} marginB-20>
          <Text style={{ fontSize: 40, fontFamily: "Manrope_600SemiBold" }}>
            When's your birthday?
          </Text>
          <Text color={"#919191"} style={{ fontSize: 20 }}>
            We'll use this to celebrate your special day!
          </Text>
        </View>

        <View width={"100%"} flexG>
          <DateTimePicker
            value={date}
            mode="date"
            minimumDate={getMinDate()}
            maximumDate={getMaxDate()}
            onChange={(date) => {
              if (date) {
                const validDate = new Date(date);
                if (!isNaN(validDate.getTime())) {
                  setDate(validDate);
                }
              }
            }}
            style={styles.textfield}
            textAlign="center"
          />
        </View>

        <View flexG />

        <View width={"100%"}>
          <Button
            label="Continue"
            onPress={handleContinue}
            style={{
              height: 50,
            }}
            backgroundColor="#fd1775"
            labelStyle={{
              fontFamily: "PlusJakartaSans_600SemiBold",
              fontSize: 16,
            }}
          />
        </View>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  textfield: {
    backgroundColor: "white",
    marginVertical: 100,
    padding: 30,
    height: 44,
    borderRadius: 50,
    fontFamily: "PlusJakartaSans_300Light",
    fontSize: 15,
    color: "#919191",
    alignContent: "center",
  },
});