Skip to content

React-native calendar heat-map, inspired by Github's contribution graph

Notifications You must be signed in to change notification settings

ayooby/react-native-calendar-heatmap

Repository files navigation

React-native Calendar Heatmap

React Native Calendar Heatmap

A calendar heatmap component built on SVG. The component expands to size of container and is super configurable.

npm version npm Platform - Android and iOS License: MIT styled with prettier

React Native Calendar Heatmap


React Native Calendar Heatmap

Installation

Add the dependency:

React Native:

npm i react-native-calendar-heatmap

Peer Dependencies

IMPORTANT! You need install them.
"react": ">= 16.x.x",
"react-native": ">= 0.55.x",
"lodash": ">= 4.17.10",
"react-native-svg": ">= 6.5.2"

Usage

Import the component:

import CalendarHeatmap from 'react-native-calendar-heatmap';

To show a basic heatmap of 100 days ending on April 1st:

<CalendarHeatmap
  endDate={new Date('2016-04-01')}
  numDays={100}
  values={[
    { date: '2016-01-01' },
    { date: '2016-01-22' },
    { date: '2016-01-30' },
    // ...and so on
  ]}
/>

Custom Colorized Usage

You can check the example for the advanced usage

<CalendarHeatmap
  endDate={new Date("2019-03-25")}
  numDays={100}
  colorArray={["#eee", "#D44B79", "#6B1928", "#9F3251", "#360000"]}
  values={[
    { date: '2016-01-01' },
    { date: '2016-01-22' },
    { date: '2016-01-30' },
    // ...and so on
  ]}
/>

Credits

It inspired by Github's commit calendar graph and React Calendar Heatmap.

License

React Native Calendar Heatmap Library is available under the MIT license. See the LICENSE file for more info.