Calendar Heatmap
Workouts, habits, commits: a month grid or the last N weeks, coloured by intensity. Tap a day to see its value. Bars move and fade on the native UI thread, so they stay smooth on iOS and Android even while your app is busy.
<CalendarHeatmap />2 variantsNew in 2.0.1
Live — the real React Native component rendered with react-native-web. Tap, drag and scrub it.
Installation
terminal
npx expo install expo-charts react-native-svgUsage
Import the component and pass your data. Width defaults to the parent, so it adapts to phones, tablets and rotation.
CalendarHeatmap.tsx
<CalendarHeatmap data={[{ date: "2026-10-01", value: 3 }, { date: "2026-10-02", value: 1 }]} month="2026-10" startOnMonday/>Props
| Prop | Type | Default |
|---|---|---|
| data One entry per day (same day adds up). | { date: "YYYY-MM-DD" | Date, value }[] | — |
| mode Month grid, or GitHub-style weeks. | "month" | "weeks" | "month" |
| month / weeks / endDate What to show. | "YYYY-MM" | Date / number / date | latest / 16 / latest |
| color / colors / levels / max Intensity scale. | string / string[] / number / number | theme / — / 5 / largest |
| startOnMonday / showDayNumbers / showWeekdays Calendar details. | boolean | false / month / true |
| onSelect Tap a day. | (date, value) => void | — |
| formatValue / formatDate Bubble text. | (v) => string / (date) => string | compact / "Oct 3" |
| animate / emptyText / accessibilityLabel Motion, empty state, screen-reader label. | boolean / string / string | true / "No data" / generated |
Did you like the content?