Heatmap Component - NPM Package

Overview

The rn-heatmap package provides a customizable activity heatmap similar to GitHub's contribution graph, built with react-native-svg.

Installation

npm install rn-heatmap

or with Yarn:

yarn add rn-heatmap

Peer Dependencies

Ensure you have react-native-svg installed:

npm install react-native-svg

Usage

Light Mode Component

import React from 'react';
import { View } from 'react-native';
import {Heatmap} from 'rn-heatmap';

const LightModeHeatmap = () => {
  return (
    <View>
      <Heatmap
        year={2024}
        activeDays={[
          {monthIndex: 0, dayIndex: 5, level: 2},
          {monthIndex: 2, dayIndex: 10, level: 3},
          {monthIndex: 5, dayIndex: 20, level: 1},
        ]}
        defaultCellColor="#808080"
        colorMap={{
          1: '#a3d9a5',
          2: '#57c84d',
          3: '#228b22',
        }}
        cellSize={12}
        dayGap={6}
        monthlyGap={30}
        textPadding={10}
        fontWeight="bold"
        getMonthAnnotation={monthIndex =>
          [
            'Jan',
            'Feb',
            'Mar',
            'Apr',
            'May',
            'Jun',
            'Jul',
            'Aug',
            'Sep',
            'Oct',
            'Nov',
            'Dec',
          ][monthIndex]
        }
        showMonthAnnotation={true}
        monthlyAnnotationFontSize={12}
        monthlyAnnotationColor="black"
        cellBorderRadius={4}
        paddingHorizontal={15}
        paddingVertical={5}
        bottomPadding={15}
        showCurrentFullYear={true}
        showScrollBar={true}
      />
    </View>
  );
};

export default LightModeHeatmap;

Dark Mode Component

import React from 'react';
import { View } from 'react-native';
import {Heatmap} from 'rn-heatmap';

const DarkModeHeatmap = () => {
  return (
    <View>
      <Heatmap
        year={2024}
        activeDays={[
          {monthIndex: 0, dayIndex: 5, level: 2},
          {monthIndex: 2, dayIndex: 10, level: 3},
          {monthIndex: 5, dayIndex: 20, level: 1},
        ]}
        defaultCellColor="#161b22"
        colorMap={{
          1: '#0e4429',
          2: '#006d32',
          3: '#26a641',
        }}
        cellSize={14}
        dayGap={8}
        monthlyGap={35}
        textPadding={12}
        fontWeight="bold"
        getMonthAnnotation={monthIndex =>
          [
            'Jan',
            'Feb',
            'Mar',
            'Apr',
            'May',
            'Jun',
            'Jul',
            'Aug',
            'Sep',
            'Oct',
            'Nov',
            'Dec',
          ][monthIndex]
        }
        showMonthAnnotation={true}
        monthlyAnnotationFontSize={12}
        monthlyAnnotationColor="white"
        cellBorderRadius={4}
        paddingHorizontal={15}
        paddingVertical={5}
        bottomPadding={15}
        showCurrentFullYear={true}
        showScrollBar={true}
      />
    </View>
  );
};

export default DarkModeHeatmap;

API Reference

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | year | number | Required | The year for which the heatmap is generated. | | activeDays | Array<Activity> | [] | List of active days with their month, day index, and activity level. | | defaultCellColor | string | #161b22 | The default background color for inactive days. | | colorMap | {[key: number]: string} | {1: '#0e4429', 2: '#006d32', 3: '#26a641'} | Color mapping for different activity levels. | | cellSize | number | 12 | The size of each cell representing a day. | | dayGap | number | 6 | The gap between each day's cell. | | monthlyGap | number | 30 | The gap between months. | | textPadding | number | 10 | Padding for month annotations. | | fontWeight | FontWeight | 'normal' | Font weight for month labels. | | getMonthAnnotation | (monthIndex: number) => string | getMonthFromMonthIndex | Function to get month labels. | | showMonthAnnotation | boolean | true | Whether to display month labels. | | monthlyAnnotationFontSize | number | 10 | Font size for month labels. | | monthlyAnnotationColor | string | 'white' | Color of month labels. | | cellBorderRadius | number | 2 | Border radius for day cells. | | paddingHorizontal | number | 10 | Horizontal padding for the component. | | paddingVertical | number | 0 | Vertical padding for the component. | | bottomPadding | number | 10 | Bottom padding for the heatmap. | | showCurrentFullYear | boolean | false | Whether to show the entire current year or only past days. | | showScrollBar | boolean | false | Whether to show the horizontal scrollbar. |

Activity Object Structure

Each Activity object in activeDays should have the following structure:

interface Activity {
  monthIndex: number; // 0-based index (0 = January, 11 = December)
  dayIndex: number;   // 0-based index (0 = first day of the month)
  level: 1 | 2 | 3;   // Activity level, corresponding to `colorMap`
}

Contributing

1. Fork the repository.
2. Clone the repo: git clone https://github.com/yourusername/rn-heatmap.git
3. Install dependencies: npm install
4. Run project by : npm run android or npm run ios etc
5. Make your changes.
6. Submit a pull request.

License

MIT License