Heatmap.js

import React, { Component } from 'react';
import { Platform, View, WebView } from 'react-native';


import HeatmapUtils from '../../utils/HeatmapUtils';


export default class Heatmap extends Component {
  componentDidMount() {
    setTimeout(
      () => {
        // https://github.com/facebook/react-native/issues/953
        this.refs.heatmap.measure((ox, oy, width, height) => {
          const radius = Math.round(width * 0.05);
          const processedPoints = HeatmapUtils.processPoints(this.props.firstPoint,
                                                             this.props.secondPoint,
                                                             this.props.thirdPoint,
                                                             this.props.points,
                                                             width, height, radius);
          this.setState({ processedPoints, radius });
        });
      }
    );
  }


  render() {
    let webview = null;

    if (this.state.processedPoints) {
      const uri = Platform.OS === 'ios' ? 'heatmap.html' : 'file:///android_asset/heatmap.html';
      const maxValue = Math.max(...this.state.processedPoints.map((p) => p.value));
      const script = heatmapInputGenerator(this.state.processedPoints, this.state.radius, maxValue);
      webview = <WebView
        source={{ uri: uri }}
        scrollEnabled={false}
        injectedJavaScript={script}
        javaScriptEnabled
      />;
    }


    return (
      <View style={{ alignItems: 'center', flex: 1, justifyContent: 'center'}} >
        <View
          style={{ backgroundColor: 'white', height: 100, width: 300 }}
          ref='heatmap'
        >
          { webview }
        </View>
      </View>
    );
  }
}