React Native Heatmap

Not sure how to add a heatmap to your React Native app? We are here to help! At Wolox we are creating react native heatmaps in two simple steps (Yes, two steps!)

The question is, what do you need to complete this task?

• A React Native app
• A set of points and
• The powerful heatmap.js library (free for non-commercial use).

Don’t worry if you don’t have a working React Native app at the moment, feel free to use our sample heatmap app. (If you are wondering how we are doing this using a web package, please, continue reading)

Step 1: Mapping points to desired screen size

Our first objective is to map our set of points to a determined screen size. How are we going to accomplish this? First, we need to distinguish three points which indicate where to begin and to end the heatmap. Note how these points are displayed in the following image:

Once you’ve got that covered, choose your heatmap’s width and height. Lastly, you will need to apply some transformations to your set of points using all of these parameters in the processPoints function here.

Step 2: Rendering with heatmap.js

Now, with your mapped points, you’ll see how easy it is to render the heatmap. First, create a simple HTML file in which you will use your heatmap library as so:

Note: Remember to copy your heatmap.js.min to ‘android/app/src/main/assets’ on Android or linking it to Xcode bundle resources on iOS.

And, finally, create your heatmap component:

You may be wondering what script we are injecting to the WebView? As mentioned above, heatmap.js is a web package that is used in the WebView. That script then injects your processedPoints into the HTML view. This function should look like the code below:

Note: WebView’s injected script must be a string.

Done! With these two simple steps, you can now incorporate heatmaps in your React Native Projects! For more working examples, click here.

If you have any further questions or comments, please let me know in the space below. Additionally, if you found this post helpful, please, share by clicking the heart!