Drag a tick ruler and the big time or date rolls piece by piece with a motion blur.
Also known as: scrub time picker, ruler date picker, drag to pick a time.
Installation
One command copies the source into your app — you own the code and can change anything.
Usage
useKit(). Wrap your app in <KitProvider accent="#6366f1" radius={14}> to re-skin every component at once.Like this? There's a lot more in Pro Pro
15 full screens & app templates built from the same kit — install them the same way.
Props
| Prop | Type | Default |
|---|---|---|
| mode One tick per `step` minutes, or one tick per day with the 1st of each month marked. | 'time' | 'date' | 'time' |
| value Controlled value: a 24-hour time, or a Date in date mode (its time of day is kept). | { hours, minutes } | Date | — |
| defaultValue Initial value when uncontrolled. | { hours, minutes } | Date | 09:00 · today |
| onChange Called on every tick the ruler passes, while you drag. | (value) => void | — |
| label Small line above the value, e.g. 'Reminder time:'. | string | — |
| step Time: minutes per tick (1–60). | number | 5 |
| hour12 Time: 12-hour clock with a rolling am / pm; false for 00–23. | boolean | true |
| minDate / maxDate Date: earliest / latest pickable day; the ruler resists past them. | Date | — |
| showYear Date: 'auto' shows the year only when it isn't this year. | 'auto' | 'always' | 'never' | 'auto' |
| locale Date: weekday and month names (Intl), English where Intl isn't available. | string | device |
| size Time at 40 / 52 / 64pt, date at 34 / 44 / 54pt. | 'sm' | 'md' | 'lg' | 'md' |
| accent Centre needle colour. | string | theme accent |
| haptics A light tap on every step, a firmer one on each whole hour (time) or new month (date). | boolean | true |
| sound A soft tick on every step, generated in code (no audio file); it plays alongside other audio. | boolean | true |
| accessibilityLabel Name read by screen readers. | string | label |
| style Root container. | StyleProp<ViewStyle> | — |
| textStyle The big value text (colour, weight, font family). | StyleProp<TextStyle> | — |
Behaviour & accessibility
- Touch
- Drag sideways anywhere on the picker to scrub; fling to coast. It snaps to the nearest step when it stops. A touch during a fling catches it. In date mode, past minDate / maxDate the ruler follows at a fraction of your finger and springs back. Every step taps (firmer on the hour or a new month) and ticks softly.
- Motion
- Ticks (and month markers) slide, swell and fade on the native driver from one endless pool. Each piece that changes rolls up (later) or down (earlier) with ghosted copies for a motion blur. Reduce Motion swaps the roll for an instant change.
- Screen readers
- One adjustable element whose value is the spoken time or full date; increment / decrement move one step, within the limits.
FAQ
- How do I make a scrub time picker in React Native?
- Use ExpoKit's Ruler Time Picker: run
npx @expokit/cli@latest add ruler-time-pickerin your Expo or React Native project and it copies a ready-made scrub time picker into your app as plain TypeScript you can edit. It works on iOS, Android and web, and in Expo Go. - Does Ruler Time Picker work in Expo Go?
- Yes. Ruler Time Picker runs in Expo Go on iOS and Android with no development build — its packages (
expo-haptics,expo-audio,expo-file-system) are all included in Expo Go. - How do I add Ruler Time Picker to my Expo app?
- Run
npx @expokit/cli@latest add ruler-time-pickerin your project. The CLI copies the component's source into your app and installsexpo-haptics,expo-audio,expo-file-system, so the code is yours to change. - Is Ruler Time Picker free?
- Yes. Ruler Time Picker is free: its full source is on this page and the CLI installs it without an account.
- Can I change how Ruler Time Picker looks?
- Yes. It takes its colours, radius and light / dark mode from
useKit(), so wrapping your app in<KitProvider accent radius>re-skins it with every other ExpoKit component. The code lives in your project, so you can also edit anything directly.