MeasurementList.DateRange

A smart date navigation component with left/right controls for filtering measurement data by time periods. Supports week, month, and year variants with automatic date formatting and navigation state management.

Basic Example

import { MeasurementList } from "@ovok/native";
import * as React from "react";

const BasicDateRange = () => (
  <MeasurementList.DateRange startDate="2024-01-15T08:30:00Z" variant="week" />
);

export default BasicDateRange;

Props

Name	Type	Required	Default	Description
startDate	string	✓	-	ISO date string for range start
variant	"week" | "month" | "year"	✓	-	Time period type for navigation
style	StyleProp<ViewStyle>	-	-	Custom container styles
disabledNext	boolean	-	false	Whether next navigation is disabled
disabledPrevious	boolean	-	false	Whether previous navigation is disabled
testID	string	-	-	Test identifier for component
onDateChange	({ startDate, endDate }) => void	-	-	Callback when date range changes

Component Behavior

Date Range Calculation

• Automatically calculates end date based on variant and start date
• Week: 7-day period from start date
• Month: Full calendar month from start date
• Year: Full calendar year from start date

Smart Date Formatting

• Adapts format based on date relationships
• Same year: Shows abbreviated format (e.g., "15 - 21 Jan")
• Different years: Shows full format (e.g., "15 Jan 2023 - 21 Jan 2024")
• Same month: Shows condensed format (e.g., "15 - 21")

Navigation Controls

• Left arrow: Navigate to previous time period
• Right arrow: Navigate to next time period
• Automatic disable state for navigation limits
• Touch feedback with proper hit targets

Auto-Update on Variant Change

• Recalculates date range when variant changes
• Maintains current start date when possible
• Triggers onDateChange callback with new range

Styling

Theme Colors Used

• theme.colors.surface - Container background color
• theme.colors.onSurface - Active icon color
• theme.colors.onSurfaceDisabled - Disabled icon color
• theme.spacing(2) - Gap between elements (8px default)
• theme.spacing(4) - Container padding (16px default)

Typography

• Date text: 16px, DMSans_400Regular font
• Center-aligned date display
• Responsive to theme typography settings