A desk calendar: lift a page to flip it over the rings, pull down to bring it back.
Also known as: desk calendar date picker, page-turn calendar.
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 |
|---|---|---|
| value Controlled date; its time of day is kept on every change. | Date | — |
| defaultValue Initial date when uncontrolled. | Date | today |
| onChange Called when a page turns over (next day) or back (previous day). | (date: Date) => void | — |
| minDate Earliest day; pulling back past it only nudges the page. | Date | — |
| maxDate Latest day; lifting past it only raises the page a little. | Date | — |
| locale Weekday and month names (Intl), English where Intl isn't available. | string | device |
| accent Month band and Sunday colour (try colors.danger for the classic red). | string | theme accent |
| maxWidth Widest the pad grows; it fills its container up to this. | number | 300 |
| haptics A tick as a page passes upright and a soft thud when it lands. | boolean | true |
| accessibilityLabel Name read by screen readers. | string | 'Date' |
| style Root container. | StyleProp<ViewStyle> | — |
Behaviour & accessibility
- Touch
- Drag up to lift today's page; past upright (or with a flick) it turns over to the next day, otherwise it settles back. Drag down to bring yesterday's page back over the rings. The point you grab stays under your finger. A hard flick turns up to six more pages. At minDate / maxDate the page only lifts or nudges a little.
- Motion
- Pages hinge on the rings in 3D on the native driver, darken as they turn away from the light and swap to their plain back exactly at upright. Every page keeps its own angle, so the page underneath is already in place when one turns. Reduce Motion swaps the turn for an instant change.
- Screen readers
- One adjustable element whose value is the full date; increment turns to the next day, decrement turns back, within the limits.
FAQ
- How do I make a flip calendar in React Native?
- Use ExpoKit's Flip Calendar: run
npx @expokit/cli@latest add flip-calendarin your Expo or React Native project and it copies a ready-made flip calendar into your app as plain TypeScript you can edit. It works on iOS, Android and web, and in Expo Go. - Does Flip Calendar work in Expo Go?
- Yes. Flip Calendar runs in Expo Go on iOS and Android with no development build — its packages (
expo-haptics) are all included in Expo Go. - How do I add Flip Calendar to my Expo app?
- Run
npx @expokit/cli@latest add flip-calendarin your project. The CLI copies the component's source into your app and installsexpo-haptics, so the code is yours to change. - Is Flip Calendar free?
- Yes. Flip Calendar is free: its full source is on this page and the CLI installs it without an account.
- Can I change how Flip Calendar 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.