# @ovok/native/measurement

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

Measurement list components.

Import from `@ovok/native/measurement`.

## Components [#components]

### MeasurementList [#measurementlist]

```ts
const MeasurementList: MeasurementListComponent;
```

List of measurements; use `MeasurementList.Item` and `MeasurementList.DateRange` as building blocks.

## Type Aliases [#type-aliases]

### DateRangeProps [#daterangeprops]

```ts
type DateRangeProps = object;
```

Props for the date range navigator.

#### Properties [#properties]

##### disabledNext? [#disablednext]

```ts
disabledNext?: boolean;
```

Disables the next-range button.

##### disabledPrevious? [#disabledprevious]

```ts
disabledPrevious?: boolean;
```

Disables the previous-range button.

##### onDateChange? [#ondatechange]

```ts
onDateChange?: ({ startDate, endDate }) => void;
```

Called with the new start and end dates when the user moves to another range.

###### Parameters [#parameters]

| Parameter | Type |
| ------ | ------ |
| `{ startDate, endDate }` | `OnDateChangeProps` |

###### Returns [#returns]

`void`

##### startDate [#startdate]

```ts
startDate: string;
```

First day of the shown range, as an ISO date string.

##### style? [#style]

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

Style for the container.

##### testID? [#testid]

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

Test identifier for the container.

##### variant [#variant]

```ts
variant: "week" | "month" | "year";
```

Length of the range: a week, month or year.

***

### MeasurementListItemProps [#measurementlistitemprops]

```ts
type MeasurementListItemProps<T> = TouchableOpacityProps & object;
```

Props for `MeasurementListItem`; also accepts `TouchableOpacity` props.

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

| Type Parameter | Default type |
| ------ | ------ |
| <a id="type-parameter-t"></a> `T` | `unknown` |

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

| Name | Type | Description |
| ------ | ------ | ------ |
| `badge?` | `ReactNode` | Badge shown on the item. |
| `data` | `object` & `T` | The measurement to display, plus any extra fields of type `T`. |
| `style?` | `StyleProp`\<`ViewStyle`\> | Style for the item container. |
| `testID?` | `string` | Test identifier for the item. |