Heatmap
GitHub-style activity grid with a wave-in animation.
<HeatmapChart />1 variant
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.
HeatmapChart.tsx
<HeatmapChart data={weeksByDay} rowLabels={["Mon", "", "Wed", "", "Fri", "", "Sun"]}/>Props
| Prop | Type | Default |
|---|---|---|
| data Rows × columns. | number[][] | — |
| rowLabels / colLabels Labels. | string[] | — |
| color Cell colour. | string | palette[0] |
Did you like the content?