# Clockface — Analog Clock Time Picker & Range Selector for React Native & Expo

> A time picker where a wheel of times and a live analog clock move as one: wind the wheel and the hands sweep. Single times or ranges with the booked arc on the face, unavailable slots skipped, a minute hand you can drag, a sun and moon by day and night. Skia, touch and mouse…

- Kind: Mobile component (Toasts & Alerts)
- Price: Free
- License: MIT License. Do anything with it, keeping the copyright notice.
- Developer: UpFork
- Tags: toast
- npm packages: @shopify/react-native-skia, expo-haptics, react-native-gesture-handler, react-native-reanimated, react-native-worklets
- Published: 2026-10-14
- Updated: 2026-10-14
- Page: https://upfork.dev/products/clockface-time-picker-react-native

## How to get it

It's a React Native component for Expo apps (Expo SDK 57), not a shadcn item: copy its folders into the app's root from its ZIP (Download source on its page) or through UpFork's MCP server (install_product), then install its packages with Expo:

```bash
npx expo install @shopify/react-native-skia expo-haptics react-native-gesture-handler react-native-reanimated react-native-worklets
```

It's free and in no plan: an AI assistant installs it through MCP with no account, and its ZIP downloads with a free UpFork account.

Step by step, with the App.tsx that shows it and Skia's web setup: https://upfork.dev/docs/mobile.

## About

Clockface is the time picker for meetings, alarms, reservations and reminders. A wheel of times and a live analog clock are one value: winding the wheel sweeps the hands, and dragging the hands turns the wheel.

- **Winding you can feel.** A drum of times you spin with a finger, a mouse drag or the mouse wheel; momentum, an exact landing, ticks as times pass. The hands sweep continuously and keep going forwards past midnight.
- **Ranges.** Start and End tabs, a booked arc on the face with a gradient that never seams, a handle at each end and the length in the middle ("1 h 30 min"). Ranges past midnight work.
- **Availability.** Earliest and latest times, booked slots struck through and skipped with a haptic bump, minimum and maximum lengths.
- **Drag the hand.** Grab the minute hand and turn it; crossing 12 moves the hour, and the wheel follows.
- **Day and night.** The face warms by day and deepens by evening, with a sun or a moon crossing a window at six.
- **Plain values.** `{ hours, minutes }`, 12 or 24 hours, steps of 1 to 30 minutes: no dates, no time zones to trip on. Adjustable for screen readers, keyboard on the web, reduced motion, light and dark.

Three complete demos: booking a call with a range and length chips, a bedside alarm with a big day-and-night clock, and a restaurant table with taken slots skipped.