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

import { View, Text, TextField } from "react-native-ui-lib";
import React, { useState } from "react";
import { StyleSheet } from "react-native";
import { ScrollView } from "react-native-gesture-handler";
import { useAuthContext } from "@/contexts/AuthContext";
import { useSettingsContext } from "@/contexts/SettingsContext";
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 (
    <View>
      <View style={styles.card}>
        <Text text70>Your Profile</Text>
        <View row spread paddingH-15 centerV marginV-15>
          <View style={styles.pfp}></View>
          <Text text80 color="#50be0c">
            Change Photo
          </Text>
          <Text text80>Remove Photo</Text>
        </View>
        <View paddingH-15>
          <Text text80 marginT-10 marginB-7 color="#a1a1a1">
            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 color="#a1a1a1">
            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 color="#a1a1a1">
            Email address
          </Text>
          <TextField
            text70
            placeholder="Email address"
            value={user?.email?.toString()}
            style={styles.txtBox}
          />
        </View>
      </View>

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

const styles = StyleSheet.create({
  card: {
    marginVertical: 15,
    backgroundColor: "white",
    width: "100%",
    borderRadius: 15,
    padding: 20,
  },
  pfp: {
    aspectRatio: 1,
    width: 60,
    backgroundColor: "green",
    borderRadius: 20,
  },
  txtBox: {
    backgroundColor: "#fafafa",
    borderRadius: 50,
    borderWidth: 2,
    borderColor: "#cecece",
    padding: 15,
    height: 45,
  },
});

export default MyProfile;