ACI Blog
Map marker clustering in React Native just got easier
March 28, 2022
Note – this article was contributed by Jiri Hoffmann (MS in Applied Computer science, 2022)
Maps play an integral part in many applications today. Whether we are looking for directions or searching for restaurants nearby, the most effective way to display such data is by using a map. For React Native applications using react-native-maps might seem like the obvious choice when it comes to maps. The library was originally created by Airbnb and actively maintained over many years. But, even while being the most popular within the community, it’s not perfect.
One of the missing features being brought up in GitHub issues over and over is the native implementation for marker clustering. Rendering 100+ markers on a map causes significant performance issues since React Native has to communicate updates between the native and JavaScript thread for each marker. A great solution to reduce the amount of rendered components is to cluster markers and hence decrease the amount of communication overhead. Ideally, this should be implemented natively, but the number of discrepancies between native APIs and other complications has not made it worth the time.
Read more on the issue of React Native Maps
Instead, some react-native-maps users opted for a workaround solution by using Supercluster from Mapbox. Supercluster is a clustering library based on a hierarchical greedy clustering algorithm that works by selecting a point, finding all points in a radius, and repeating until all points are a part of a cluster. This works great in a browser since the heavy computation can be offloaded to another thread. In React Native there is a single thread executing all JavaScript code and anything slowing the thread down will completely prevent users from any interactions with the app. It is a viable solution for a couple of hundred markers, but it definitely doesn’t scale to the thousands as it starts blocking the JS thread for several seconds. Additionally, these libraries are directly dependent on react-native-maps and have been abandoned for a while, making it more complicated to use the latest version of react-native-maps.
Libraries using the JacaScript Supercluster include this example of the React Native Map Clustering and also a second library also doing React Native Super Cluster.
In 2018 Facebook announced a re-architecture of React Native, and in 2021 we finally started seeing support for its new engine in official releases for React Native. A part of the new architecture is JSI (Javascript Interface), a layer that helps in communication. One of the benefits of using JSI is that it allows JavaScript to hold a reference to C++ Host Objects and invoke methods on them. This change inspired me to create a new clustering library. The goal was to create an as-close-as-possible replacement for Supercluster, but a much more performant version by using C++ instead of JavaScript.
The resulting library react-native-clusterer manages to initialize clusters up to 10 times faster and provides additional functionality to simplify setting up new projects, such as the useClusterer hook, which can take care of the entire setup with just one line of code. Additionally, it is not dependent on react-native-maps, making it easier to update either library at any time or use a completely different one.