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

32 points

a year 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!

7 comments

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.