# @ovok/native/setting

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

Settings list components.

Import from `@ovok/native/setting`.

## Components [#components]

### ListHeader() [#listheader]

```ts
function ListHeader(__namedParameters): Element;
```

Section header row for a settings list.

#### Parameters [#parameters]

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `ListHeaderProps` |

#### Returns [#returns]

`Element`

***

### SettingList() [#settinglist]

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

Settings list with section headers, rounded row groups and custom rows.

#### Parameters [#parameters-1]

| Parameter | Type |
| ------ | ------ |
| `props` | [`SettingListProps`](#settinglistprops) |

#### Returns [#returns-1]

`Element`

***

### SettingListItem() [#settinglistitem]

```ts
function SettingListItem(item): Element;
```

Settings row with a title, optional left icon and a trailing arrow.

#### Parameters [#parameters-2]

| Parameter | Type |
| ------ | ------ |
| `item` | [`SettingListItemProps`](#settinglistitemprops) |

#### Returns [#returns-2]

`Element`

## Type Aliases [#type-aliases]

### CustomSettingListItem [#customsettinglistitem]

```ts
type CustomSettingListItem = object;
```

A settings list entry rendered by a custom component instead of the standard row.

#### Indexable [#indexable]

```ts
[key: string]: unknown
```

#### Properties [#properties]

##### borderBottomRadius? [#borderbottomradius]

```ts
borderBottomRadius?: boolean;
```

Whether the item should round its bottom corners; set by the list.

##### borderTopRadius? [#bordertopradius]

```ts
borderTopRadius?: boolean;
```

Whether the item should round its top corners; set by the list.

##### component [#component]

```ts
component: React.ComponentType<{
  borderBottomRadius?: boolean;
  borderTopRadius?: boolean;
}>;
```

Component that renders the entry.

##### custom [#custom]

```ts
custom: true;
```

Marks the entry as custom.

***

### SettingListItemProps [#settinglistitemprops]

```ts
type SettingListItemProps = ListItemProps & object;
```

Props for `SettingListItem`; also accepts React Native Paper `List.Item` props.

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

| Name | Type | Description |
| ------ | ------ | ------ |
| `borderBottomRadius?` | `boolean` | Whether to round the bottom corners. |
| `borderTopRadius?` | `boolean` | Whether to round the top corners. |
| `leftIcon?` | `React.ComponentProps`\<*typeof* `List.Icon`\>\[`"icon"`\] | Icon shown at the start of the row. |
| `onPress()?` | () => `void` | Called when the row is pressed. |
| `title` | `string` | Row title. |

***

### SettingListProps [#settinglistprops]

```ts
type SettingListProps = Omit<FlashListProps<
  | SettingListItemProps
  | CustomSettingListItem
| string>, "renderItem">;
```

Props for `SettingList`: FlashList props except `renderItem`; `data` mixes section header strings, setting rows and custom rows.