# @ovok/native/patient

Canonical page: https://docs.ovok.com/native-sdk/reference/patient

Patient card, list, name, gender and birth-date components.

Import from `@ovok/native/patient`.

## Components [#components]

### PatientList [#patientlist]

```ts
const PatientList: ForwardRefExoticComponent<Omit<FlashListProps<Patient>, "renderItem"> & object & RefAttributes<FlashListRef<Patient>>>;
```

Scrollable list of patients; defaults to a `PatientCard` per row.

***

### PatientCard() [#patientcard]

```ts
function PatientCard(props): Element;
```

Pressable card for a patient; compose it with the `PatientCard.*` sub-components.

#### Parameters [#parameters]

| Parameter | Type |
| ------ | ------ |
| `props` | `TouchableOpacityProps` |

#### Returns [#returns]

`Element`

## Type Aliases [#type-aliases]

### PatientBirthDateTextProps [#patientbirthdatetextprops]

```ts
type PatientBirthDateTextProps = TextProps & object & (
  | {
  dateFormat?: string;
  variant: "date";
}
  | {
  dateFormat?: string;
  variant: "both";
}
  | {
  dateFormat?: undefined;
  variant: "age";
});
```

Props for the patient birth date text; also accepts `Text` props.

#### Type Declaration [#type-declaration]

| Name | Type | Description |
| ------ | ------ | ------ |
| `birthDate` | `string` | Birth date as an ISO date string. |

***

### PatientGenderProps [#patientgenderprops]

```ts
type PatientGenderProps = ViewProps & object;
```

Props for the patient gender label; also accepts `View` props.

#### Type Declaration [#type-declaration-1]

| Name | Type | Description |
| ------ | ------ | ------ |
| `gender?` | `"male"` \| `"female"` \| `"other"` | Patient gender. |
| `showIcon?` | `boolean` | Whether to show the gender icon. |
| `testID?` | `string` | Test identifier. |
| `textProps?` | `TextProps` | Props passed to the label text. |
| `variant?` | `"chip"` \| `"default"` | Visual style: a chip or plain text. |

***

### PatientListProps [#patientlistprops]

```ts
type PatientListProps<TData> = Omit<FlashListProps<TData>, "renderItem"> & object;
```

Props for `PatientList`; also accepts FlashList props except `renderItem`.

#### Type Parameters [#type-parameters]

| Type Parameter | Default type |
| ------ | ------ |
| <a id="type-parameter-tdata"></a> `TData` *extends* `Patient` | `Patient` |

#### Type Declaration [#type-declaration-2]

| Name | Type | Description |
| ------ | ------ | ------ |
| `data` | `TData`[] | Patients to list. |
| `onItemPress()?` | (`item`, `index`) => `void` | Called with the patient and its index when a row is pressed. |
| `renderItem?` | `ListRenderItem`\<`TData`\> | Custom row renderer; defaults to a `PatientCard` with name, gender and age. |

***

### PatientNameProps [#patientnameprops]

```ts
type PatientNameProps = TextProps & object;
```

Props for the patient name text; also accepts `Text` props.

#### Type Declaration [#type-declaration-3]

| Name | Type | Description |
| ------ | ------ | ------ |
| `format?` | `"firstLast"` \| `"lastFirst"` | Order of the parts: first name first or last name first. |
| `name?` | `HumanName`[] | FHIR names of the patient. |
| `testID?` | `string` | Test identifier. |