Skip to main content

Profile Form

ProfileForm edits selected fields on the active Patient resource. The host app chooses which fields to show and supplies their current values. On submit, the default behavior patches only changed values through the active OvokClient.

Configure fields from profile data​

Show the form only after the signed-in profile has loaded. Pass the current values from that profile; ProfileForm does not fetch initial field values on its own.

import { ProfileForm } from "@ovok/native";
import * as Yup from "yup";
import { Alert } from "react-native";

const fields = [
  {
    name: "name[0].given",
    label: "First name",
    type: "text" as const,
    value: "Alex",
    validation: Yup.string().trim().required("Enter your first name"),
  },
  {
    name: "name[0].family",
    label: "Last name",
    type: "text" as const,
    value: "Morgan",
  },
  {
    name: "birthDate",
    label: "Date of birth",
    type: "date" as const,
    value: "1990-01-01",
  },
];

export function EditProfileScreen() {
  return (
    <ProfileForm
      fields={fields}
      onSuccess={() => Alert.alert("Profile saved", "Your changes are up to date.")}
    />
  );
}

Replace the example values with the loaded Patient values. name is a path on the Patient resource. Supported field types are text, date, and select; select fields also take options: { label, value }[]. Each field can include a Yup validation, disabled, and testID value.

Save behavior​

The default submit handler compares values with the provided initial values, creates patch operations for changed fields, updates the active Patient, and refetches the profile. It then calls onSuccess with the updated Patient.

Pass onSubmit(values, helpers) to own persistence. A custom submitter replaces the default patch; your handler must set form errors and refresh app data as needed. The custom and default submission modes are mutually exclusive.

The form reinitializes when its fields values change. If refreshed profile data arrives while a user is editing, this resets unsaved changes. Decide when to refresh or remount the form, and only expose fields your product and backend allow users to edit.