# @ovok/native/tab

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

Tab bar component, provider, context and hook.

Import from `@ovok/native/tab`.

## Components [#components]

### Tab() [#tab]

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

Row of tab items; `value` selects the active item.

#### Parameters [#parameters]

| Parameter | Type |
| ------ | ------ |
| `props` | `PropsWithChildren`\<[`TabProps`](#tabprops)\> |

#### Returns [#returns]

`Element`

***

### TabProvider() [#tabprovider]

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

Provides the selected tab value and change handler to tab items.

#### Parameters [#parameters-1]

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | `PropsWithChildren`\<[`TabContextType`](#tabcontexttype)\> |

#### Returns [#returns-1]

`Element`

## Hooks [#hooks]

### useTab() [#usetab]

```ts
function useTab(): TabContextType;
```

Returns the tab context; must be used within a `TabProvider`.

#### Returns [#returns-2]

[`TabContextType`](#tabcontexttype)

## Type Aliases [#type-aliases]

### TabContextType [#tabcontexttype]

```ts
type TabContextType = object;
```

Value of the tab context.

#### Properties [#properties]

##### onChange [#onchange]

```ts
onChange: (value) => void;
```

Selects the tab item with the given value.

###### Parameters [#parameters-2]

| Parameter | Type |
| ------ | ------ |
| `value` | `string` |

###### Returns [#returns-3]

`void`

##### value [#value]

```ts
value: string;
```

Value of the selected tab item.

***

### TabProps [#tabprops]

```ts
type TabProps = object;
```

Props for `Tab`.

#### Properties [#properties-1]

##### onChange [#onchange-1]

```ts
onChange: (value) => void;
```

Called with the value of the tab item the user selects.

###### Parameters [#parameters-3]

| Parameter | Type |
| ------ | ------ |
| `value` | `string` |

###### Returns [#returns-4]

`void`

##### style? [#style]

```ts
style?: StyleProp<ViewStyle>;
```

Style for the tab row.

##### testID? [#testid]

```ts
testID?: string;
```

Test identifier.

##### value [#value-1]

```ts
value: string;
```

Value of the selected tab item.

## Variables [#variables]

### TabContext [#tabcontext]

```ts
const TabContext: Context<TabContextType | null>;
```

Context holding the selected tab value and its setter.