cally/app/(unauth)/household_page.tsx

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

export default function NewHouseholdScreen() {
  const router = useRouter();
  const { user, profileData } = useAuthContext();
  const [householdName, setHouseholdName] = useState("");
  const { mutateAsync: newHousehold } = useUpdateHouseholdName();

  const handleContinue = async () => {
    try {
        if(profileData?.familyId)
      newHousehold({familyId: profileData?.familyId, name: householdName}).then(() => router.push("/(unauth)/cal_sync"));
    } catch (error) {
      console.error("Error saving household name:", error);
    }
  };

  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" }}>
            Name your household
          </Text>
          <Text color={"#919191"} style={{ fontSize: 20 }}>
            Give your family group a unique name!
          </Text>
        </View>

        <View width={"100%"} flexG>
          <TextField
            value={householdName}
            onChangeText={setHouseholdName}
            placeholder="Enter household name"
            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",
  },
});