https://github.com/prokawsar/react-native-daily-activity
Github style daily activity for React Native
https://github.com/prokawsar/react-native-daily-activity
react react-native
Last synced: 5 months ago
JSON representation
Github style daily activity for React Native
- Host: GitHub
- URL: https://github.com/prokawsar/react-native-daily-activity
- Owner: prokawsar
- Created: 2019-11-25T08:14:33.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-10-03T09:08:53.000Z (almost 4 years ago)
- Last Synced: 2025-11-03T20:20:23.118Z (8 months ago)
- Topics: react, react-native
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-native-daily-activity
- Size: 71.3 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Github style daily activity charts for React Native
Renders the native daily charts component on iOS and Android. Example:
```jsx
import React from 'react';
import { View } from 'react-native';
import DailyActivityChart from 'react-native-daily-activity';
export default function App()
const data = {
'2019/11/1': 3,
'2019/11/2': 3,
'2019/11/3': 4,
'2019/11/4': 5,
'2019/11/5': 13,
'2019/11/6': 8,
'2019/11/7': 12,
'2019/11/8': 8,
'2019/11/9': 11,
'2019/11/10': 13
}
render() {
return (
);
}
}
```
---
# How its look like
# Reference
## Props
### `data`
Object of data, that holds the one current month reports. Data structure given below.
```jsx
{
'2019/11/1': 3,
'2019/11/2': 3,
'2019/11/3': 4,
'2019/11/4': 5,
'2019/11/5': 13,
'2019/11/6': 8,
'2019/11/7': 12,
'2019/11/8': 8,
'2019/11/9': 11,
'2019/11/10': 13
}
```
| Type | Required |
| -------- | -------- |
| Object | Yes |
---
### `specificMonth`
Number of month data you are given. If you want to render specific any month rather than current.
At this situation, year will be current year if there is no any given value to `specificYear`.
Example:
```jsx
```
| Type | Required |
| -------- | -------- |
| Number | No |
---
### `specificYear`
Specific year of data you are given. If you want to render specific any year rather than current.
At this situation, month will be current month if there is no any given value to `specificMonth`.
Example:
```jsx
```
| Type | Required |
| -------- | -------- |
| Number | No |
---
### `color`
Specific color can be set. For setting color, it has to be a HEX color code and most darkest version of choosen color.
Example:
```jsx
```
| Type | Required |
| -------- | -------- |
| HEX color code | No |
---