React-native Calendar Heatmap

Note: This a fork of another component with support for count attribute in the data object.

Installation

Add the dependency:

React Native:

npm i react-native-calendar-heatmap-count

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-count';

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', count: 3 },
    { date: '2016-01-22', count: 8 },
    { date: '2016-01-30', count: 1 },
    // ...and so on
  ]}
/>

Data format

Data needs to be an array of objects. Each object can be one of the two formats:

Format 1

[
  { date: '2016-01-01', count: 3 },
  { date: '2016-01-22', count: 5 },
  { date: '2016-01-30', count: 1 },
]

Here, count attribute is used as is.

Format 2

[
  { date: '2016-01-01' },
  { date: '2016-01-01' },
  { date: '2016-01-01' },
  { date: '2016-01-22' },
  { date: '2016-01-22' },
  { date: '2016-01-22' },
  { date: '2016-01-22' },
  { date: '2016-01-22' },
  { date: '2016-01-30' },
]

Here, data is aggregated at date level internally.

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.