Show HN: I rewrote an outdated React Native map clustering library

github.com

27 points by hadat 11 hours ago

Hey Hacker News,

I'm a long-time lurker and wanted to share a project I just finished building.

Like many React Native developers, I needed to add marker clustering to a map in my app. The most popular library for this, react-native-maps-clustering, was fantastic in its day but has become outdated and no longer works with modern versions of Expo, React Native, and their dependencies.

After hitting a wall of compatibility issues, I decided to take on the challenge of rewriting it from the ground up, focusing on a modern toolchain and a better developer experience.

The journey was a lot more challenging than I anticipated. It turned into a deep dive into solving dependency hell with different versions of @types/react, wrestling with build tool configurations for pnpm, bob, and ESLint, and ensuring everything was strictly typed with TypeScript. It felt like a classic case of yak shaving, but I was determined to create a solution that "just works" for developers today.

The result is RN Super Cluster, a performant, fully-typed, and easy-to-use clustering library for react-native-maps.

What it does: It provides a <ClusteredMapView /> component that you can use as a drop-in replacement for the standard <MapView />. Any <Marker /> components you place inside will be automatically clustered.

Key Features:

    Modern & Maintained: Built with a modern toolchain and designed to be actively maintained.

    Fully-Typed: Written entirely in TypeScript to prevent common errors and improve autocompletion.

    High-Performance: Uses supercluster under the hood for extremely fast geospatial clustering.

    Spiderfier: At the maximum zoom level, overlapping markers automatically "spiderfy" (spread out on a spiral) so they can be individually tapped.

    Customizable: You can provide your own custom components for rendering clusters, and callbacks for handling press events.
This was a passion project born out of necessity, and I hope it can save other React Native developers the headaches I went through.

I would love to get your feedback, and contributions are more than welcome!

GitHub: https://github.com/suwi-lanji/rn-maps-clustering NPM: https://www.npmjs.com/package/rn-maps-clustering

Thanks for checking it out!

DanielHB 9 hours ago

I actually did a project doing clustering like that around 2018 using react native, we quickly realized we had to drop down to native for the maps. It was a huge pain in the ass because of the vastly different implementations of google/apple maps and dealing with bridging between native and react parts of the code.

Your project would have solved about 2-3 months of work and ongoing maintenance of 2 devs we had back then. The project is not around anymore but I will keep it in mind if I ever do something similar again.

  • hadat 8 hours ago

    Thank you very much for considering using it

belchiorb 10 hours ago

Looks nice! As a suggestion, it would be easier to understand what this is about by adding a small video/GIF of the library in action.

Took me some time to understand what it was about.

  • hadat 8 hours ago

    Will do so, thank you