React-native calendar heat-map, inspired by Github's contribution graph
Switch branches/tags
Nothing to show
Clone or download
Latest commit 0e23cdb Jun 17, 2018
Failed to load latest commit information.
__tests__ init project Aug 20, 2017
assets Update readme and fix dependencies Aug 20, 2017
dist update dist file Jun 17, 2018
src support latest react-native version Jun 17, 2018
.gitignore init project Aug 20, 2017
.npmignore init project Aug 20, 2017 Update Jun 17, 2018
package-lock.json update package lock Jun 17, 2018
package.json update package name Jun 17, 2018

React-native Calendar Heatmap

A calendar heatmap component built on SVG, inspired by github's commit calendar graph and React Calendar Heatmap, The component expands to size of container and is super configurable.

react-native-calendar-heatmap screenshot


Install the npm module:

npm install react-native-calendar-heatmap --save

Style color is not so fancy and you can change rectColor array to change color.


Import the component:

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

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

  endDate={new Date('2016-04-01')}
    { date: '2016-01-01' },
    { date: '2016-01-22' },
    { date: '2016-01-30' },
    // ...and so on

Configuring colors

Still under development, Help me!