https://github.com/cawfree/react-native-simpleheat
The awesome simpleheat.js, bound to React Native.
https://github.com/cawfree/react-native-simpleheat
heat heatmap map native react react-native simple simpleheat
Last synced: 4 months ago
JSON representation
The awesome simpleheat.js, bound to React Native.
- Host: GitHub
- URL: https://github.com/cawfree/react-native-simpleheat
- Owner: cawfree
- License: mit
- Created: 2019-09-16T20:23:14.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2022-04-29T00:43:16.000Z (about 4 years ago)
- Last Synced: 2025-09-29T01:50:31.335Z (9 months ago)
- Topics: heat, heatmap, map, native, react, react-native, simple, simpleheat
- Language: JavaScript
- Homepage:
- Size: 2.33 MB
- Stars: 6
- Watchers: 2
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-simpleheat
The awesome [simpleheat.js](https://github.com/mourner/simpleheat), bound to React Native.
## 🚀 Getting Started
Using [npm]():
```sh
npm install --save react-native-simpleheat
```
Using [yarn]():
```sh
yarn add react-native-simpleheat
```
## ✍️ Example
This library exports a single `Component`, the `Heatmap`, which is essentially a React Native `` component that is pointed at a dynamic webpage which renders a full-screen heatmap. The heatmap is rendered using [Vlad's](https://github.com/mourner) awesome [`simpleheat.js`](https://github.com/mourner/simpleheat), which is quick, pretty and has a permissive distribution license.
```javascript
import React from 'react';
import {
PanResponder,
View,
Text,
TouchableOpacity,
Alert,
} from 'react-native';
import WebView from 'react-native-webview';
import Heatmap from 'react-native-simpleheat';
export default class App extends React.Component {
state = {
// XXX: This is a simple example of taking multi-touch gestures from the PanResponder
// and using these to drop points on the heatmap.
panResponder: PanResponder
.create(
{
onStartShouldSetPanResponder: () => true,
onMoveShouldSetPanResponder: () => true,
onPanResponderMove: ({ nativeEvent }) => {
const { changedTouches } = nativeEvent;
const { heatmap } = this.refs;
this.setState(
{
data: [
...this.state.data,
...changedTouches
.map(
({ locationX, locationY }) => {
return [
locationX,
locationY,
10,
];
},
),
],
},
);
},
onPanResponderRelease: () => this.setState({
data: [],
}),
},
),
data: [],
gradient: undefined, // <-- Here you could use a custom gradient.
};
render() {
const {
panResponder,
data,
gradient,
} = this.state;
return (
WebView={WebView} // <-- Implementors must define the component!
data={data}
gradient={gradient}
alpha={0.5} // <-- Control transparency for overlays!
/>
);
}
}
```
## 🌎 Maps
If you specify a `region` prop to the ``, the points in your data prop will be treated as `latitude` and `longitude` coordinates. For example, the configuration below would render intensity over Liverpool, UK.
```javascript
import React from 'react';
import WebView from 'react-native-webview';
import Heatmap from 'react-native-simpleheat';
export default () => (
);
```
## 📌 Props
Prop | Type | Default | Required
--------------------- | -------- | ------------------------- | --------
WebView|func||Yes
pointerEvents|string|'box-only'|No
containerStyle|shape[object Object]|styles.containerStyle|No
max|number|10|No
gradient|shape[object Object]|{ /* see code */ }|No
onLoadEnd|func|e => null|No
data|array|[]|No
minOpacity|number|0.05|No
alpha|number|1.0|No
region|shape|null|No
## ✌️ License
[MIT](https://opensource.org/licenses/MIT)