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

import {Text, TextField, View} 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 {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 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>
        </ScrollView>
    );
};

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;