1. Vamos começar criando o serviço que vai fazer isso

    updateUserProfile: async (params: updateProfile) => {
      const token = await SecureStore.getItemAsync("onebitshop-token");
    
      const res = await api.put("/profile", params, {
        headers: {
          Authorization: `Bearer ${token}`,
        },
      });
    
      return res;
    },
    
  2. Agora podemos criar a tipagem de updateProfile

    interface updateProfile {
      name: string;
      email: string;
      phone: string;
    }
    
  3. A senha vai acabar ficando para depois, pois ela precisa de um serviço separado.

  4. Vamos agora para os fieldsAbled, pois usaremos isso aqui lá, e dentro do arquivo FieldsAbled nós iremos criar os fields aqui

    const [fields, setFields] = useState({
    	name: "",
      email: "",
      phone: "",
      currentPassword: "",
      newPassword: "",
      confirmNewPassword: "",
    });
    const [address, setAddress] = useState([]);
    
    <DropDownComponent
    	placeholder="Seus endereços"
      setSelected={setSelect}
      data={address}
      saveMethod="value"
    />
    
  5. Com os fields prontos, podemos passar para o nosso fieldsAbled o userInfo de dentro do form

    {!editable ? <FieldsDisabled /> : <FieldsAbled userInfo={userInfo} />}
    
    interface Props {
      userInfo: User;
    }
    
    const FieldsAbled = ({ userInfo }: Props) => {
    
  6. Agora, vamos pegar os endereços dele, para que a gente possa exibir para ele

    const handleSetInfos = async () => {
      const res = await addressService.getAddress();
    
      const value = res.data.map((address: Address) => {
        return { value: `${address.street} Nº${address.number}`, disabled: true };
      });
    
      setAddress(value);
      setFields({
        ...fields,
        name: userInfo.name,
        email: userInfo.email,
        phone: userInfo.phone,
      });
    };
    
    useEffect(() => {
      handleSetInfos();
    }, []);
    
  7. Dessa forma, nós já temos ao entrar o fieldsAbled as informações setadas e o endereço aparecendo, podemos ver pelo endereço. Agora, basta a gente puxar os fields para ficarem de value aqui

    return (
      <>
        <InputContainer>
          <Input
            value={fields.name}
            onChangeText={(val) => {
              setFields({
                ...fields,
                name: val,
              });
            }}
          />
        </InputContainer>
        <InputContainer>
          <Input
            value={fields.email}
            onChangeText={(val) => {
              setFields({
                ...fields,
                email: val,
              });
            }}
          />
        </InputContainer>
        <InputContainer>
          <Input
            value={fields.phone}
            onChangeText={(val) => {
              setFields({
                ...fields,
                phone: val,
              });
            }}
          />
        </InputContainer>
        <DropDownComponent
          placeholder="Seus endereços"
          setSelected={setSelect}
          data={address}
          saveMethod="value"
        />
        <InputContainer>
          <Input
            placeholder="Senha Antiga"
            placeholderTextColor="#C0C0C1"
            secureTextEntry
            onChangeText={(val) => {
              setFields({
                ...fields,
                currentPassword: val,
              });
            }}
          />
        </InputContainer>
        <InputContainer>
          <Input
            placeholder="Senha Nova"
            placeholderTextColor="#C0C0C1"
            secureTextEntry
            onChangeText={(val) => {
              setFields({
                ...fields,
                newPassword: val,
              });
            }}
          />
        </InputContainer>
        <InputContainer>
          <Input
            placeholder="Confirmar Senha"
            placeholderTextColor="#C0C0C1"
            secureTextEntry
            onChangeText={(val) => {
              setFields({
                ...fields,
                confirmNewPassword: val,
              });
            }}
          />
        </InputContainer>
      </>
    );
    
  8. Ao fazer isso, podemos ver todas as informações organizadas. Podemos agora criar o handleUpdate, para que a gente faça as alterações. E caso o email seja alterado, vamos dar logout, pois a pessoa vai precisar logar de novo para continuar

    const handleUpdateInfo = async () => {
      const res = await profileService.updateUserProfile(fields);
    
      if (res.status === 400) {
        Alert.alert("Esse email pertence a outra conta");
        return;
      }
    
    	if (fields.email !== userInfo.email) {
        logout();
      }
    
      Alert.alert("Informações atualizadas com sucesso!");
    };
    
  9. Agora, podemos testar e ver se está tudo certo