Se creó la página para editar el perfil del usuario

import { View, Text, StyleSheet } from "react-native";

import { useEditProfile } from "../../hooks/useEditProfile";

import { Controller } from "react-hook-form";

import { useAuth } from "../../contexts/auth_context";

import { CustomTextInput } from "../../components/text_input/text_input";

import Checkbox from "expo-checkbox";

import { useState } from "react";

import { ChangePasswordForm } from "../../components/change_password_form/change_password_form";

import { TouchableOpacity } from "@gorhom/bottom-sheet";

import { LIGTHT_THEME } from "../../constants/theme";

import { CircleAvatar } from "../../components/circle_avatar/circle_avatar";

import { MaterialIcons } from "@expo/vector-icons";

import { ScrollView } from "react-native-gesture-handler";

//TODO: delete this line and import the correct CircleAvatar component

const avatarSource = require("../../../assets/avatar.png");

export const EditProfilePage = () => {

  const { user } = useAuth();

  const { onSubmit, control, pickProfileImage, profileImage } =

    useEditProfile();

  const { name, lastName } = user!;

  return (

    <ScrollView

      contentContainerStyle={{

        alignItems: "center",

        gap: 20,

        padding: 20,

        backgroundColor: LIGTHT_THEME.color.white,

      }}

    >

      <TouchableOpacity onPress={pickProfileImage}>

        <CircleAvatar

          source={profileImage ? { uri: profileImage } : avatarSource}

          size={100}

        />

        <MaterialIcons

          name="add-photo-alternate"

          size={40}

          color={LIGTHT_THEME.color.primary}

          style={{

            position: "absolute",

            bottom: -10,

            right: -10,

          }}

        />

      </TouchableOpacity>

      <View style={{ height: 30 }} />

      <Controller

        control={control}

        name="name"

        render={({

          field: { onChange, onBlur, value },

          formState: { errors },

        }) => (

          <CustomTextInput

            onChangeText={onChange}

            onBlur={onBlur}

            value={value}

            label="Name"

            errors={errors.name?.message}

          />

        )}

        rules={{ required: "Name is required" }}

        defaultValue={name}

      />

      <Controller

        control={control}

        name="lastName"

        render={({

          field: { onChange, onBlur, value },

          formState: { errors },

        }) => (

          <CustomTextInput

            onChangeText={onChange}

            onBlur={onBlur}

            value={value}

            label="Last name"

            errors={errors.lastName?.message}

          />

        )}

        rules={{ required: "Last name is required" }}

        defaultValue={lastName}

      />

      <TouchableOpacity onPress={onSubmit} style={styles.saveBtn}>

        <Text style={styles.saveBtnText}>Save</Text>

      </TouchableOpacity>

    </ScrollView>

  );

};

const styles = StyleSheet.create({

  saveBtn: {

    backgroundColor: LIGTHT_THEME.color.primary,

    height: 40,

    width: 100,

    padding: 10,

    borderRadius: 20,

    alignItems: "center",

  },

  saveBtnText: {

    color: "white",

    fontWeight: "bold",

  },

});