cally/components/pages/settings/user_settings_views/MyProfile.tsx

import { Text, TextField, View } from "react-native-ui-lib";
import React, { useState } from "react";
import { ImageBackground, StyleSheet } from "react-native";
import { ScrollView } from "react-native-gesture-handler";
import { useAuthContext } from "@/contexts/AuthContext";
import { useUpdateUserData } from "@/hooks/firebase/useUpdateUserData";

const MyProfile = () => {
  const { user, profileData } = useAuthContext();

  const [lastName, setLastName] = useState<string>(profileData?.lastName || "");
  const [firstName, setFirstName] = useState<string>(
    profileData?.firstName || ""
  );

  const { mutateAsync: updateUserData } = useUpdateUserData();
  return (
    <ScrollView style={{ paddingBottom: 100, flex: 1 }}>
      <View style={styles.card}>
        <Text style={styles.subTit}>Your Profile</Text>
        <View row spread paddingH-15 centerV marginV-15>
          <ImageBackground
            style={styles.pfp}
            source={require("../../../../assets/images/profile-picture.png")}
          />

          <Text style={styles.photoSet} color="#50be0c">
            Change Photo
          </Text>
          <Text style={styles.photoSet}>Remove Photo</Text>
        </View>
        <View paddingH-15>
          <Text text80 marginT-10 marginB-7 style={styles.label}>
            First name
          </Text>
          <TextField
            text70
            placeholder="First name"
            style={styles.txtBox}
            value={firstName}
            onChangeText={async (value) => {
              setFirstName(value);
              await updateUserData({ newUserData: { firstName: value } });
            }}
          />
          <Text text80 marginT-10 marginB-7 style={styles.label}>
            Last name
          </Text>
          <TextField
            text70
            placeholder="Last name"
            style={styles.txtBox}
            value={lastName}
            onChangeText={async (value) => {
              setLastName(value);
              await updateUserData({ newUserData: { lastName: value } });
            }}
          />
          <Text text80 marginT-10 marginB-7 style={styles.label}>
            Email address
          </Text>
          <TextField
            text70
            placeholder="Email address"
            value={user?.email?.toString()}
            style={styles.txtBox}
          />
        </View>
      </View>

      <View style={styles.card}>
        <Text style={styles.subTit}>Settings</Text>
        <Text text80 marginT-20 marginB-7 style={styles.label}>
          Time Zone
        </Text>
        <TextField text70 placeholder="Time Zone" style={styles.txtBox} />
      </View>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  card: {
    marginVertical: 15,
    backgroundColor: "white",
    width: "100%",
    borderRadius: 12,
    paddingHorizontal: 20,
    paddingVertical: 21,
  },
  pfp: {
    aspectRatio: 1,
    width: 65.54,
    backgroundColor: "green",
    borderRadius: 20,
  },
  txtBox: {
    backgroundColor: "#fafafa",
    borderRadius: 50,
    borderWidth: 2,
    borderColor: "#cecece",
    padding: 15,
    height: 45,
    fontFamily: "PlusJakartaSans_500Medium",
    fontSize: 13
  },
  subTit: {
    fontFamily: "Manrope_500Medium",
    fontSize: 15,
  },
  label: {
    fontFamily: "PlusJakartaSans_500Medium",
    fontSize: 12,
    color: "#a1a1a1"
  },
  photoSet:{
    fontFamily: "PlusJakartaSans_500Medium",
    fontSize: 13.07
  }
});

export default MyProfile;