cawfree/react-native-simpleheat


The awesome simpleheat.js, bound to React Native.

License: MIT

Language: JavaScript

Keywords: heat, heatmap, map, native, react, react-native, simple, simpleheat


react-native-simpleheat

The awesome simpleheat.js, bound to React Native.

react-native-simpleheat

🚀 Getting Started

Using npm:

npm install --save react-native-simpleheat

Using yarn:

yarn add react-native-simpleheat

✍️ Example

This library exports a single Component, the Heatmap, which is essentially a React Native <WebView/> component that is pointed at a dynamic webpage which renders a full-screen heatmap. The heatmap is rendered using Vlad's awesome simpleheat.js, which is quick, pretty and has a permissive distribution license.

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 (
      <View
        style={{
          backgroundColor: 'purple', // <-- HeatMap is transparent, so you can view what's underneath.
          flex: 1,
        }}
      >
        <Heatmap
          ref="heatmap"
          {...panResponder.panHandlers} // <-- extraProps are delegated to the containing <Animated.View/>
          WebView={WebView} // <-- Implementors must define the <WebView/> component!
          data={data}
          gradient={gradient}
          alpha={0.5} // <-- Control transparency for overlays!
        />
      </View>
    );
  }
}

🌎 Maps

If you specify a region prop to the <Heatmap/>, 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.

import React from 'react';
import WebView from 'react-native-webview';
import Heatmap from 'react-native-simpleheat';

export default () => (
  <Heatmap
    WebView={WebView}
    region={{
      latitude: -3.0118499,
      longitude: 53.4139281,
      latitudeDelta: 1,
      longitudeDelta: 1,
    }}
    data={[
      [
        53.4139281, // longitude
        -3.0118499, // latitude
        10, // intensity
      ],
    ]}
  />
);

📌 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

Project Statistics

Sourcerank 2
Repository Size 2.33 MB
Stars 1
Forks 0
Watchers 1
Open issues 0
Dependencies 23
Contributors 1
Tags 0
Created
Last updated
Last pushed

Top Contributors See all

Alexander Thomas

Packages Referencing this Repo

react-native-simpleheat
The awesome simpleheat.js, bound in React Native.
Latest release 0.0.4 - Updated - 1 stars

Something wrong with this page? Make a suggestion

Last synced: 2019-09-19 10:46:09 UTC

Login to resync this repository