Skip to main content

Quick Start

Requirements​

  • React Native 0.78+ with the New Architecture enabled.
  • react-native-nitro-modules (required).
  • react-native-maps (required).

Install​

npm install react-native-better-clustering react-native-nitro-modules react-native-maps
cd ios && pod install

Expo requires a development build:

npx expo install react-native-better-clustering react-native-nitro-modules react-native-maps

See Platform Setup for react-native-maps plugin config.

Clustered map​

import MapView from 'react-native-better-clustering'
import { Marker } from 'react-native-maps'

const points = [
  { id: '1', latitude: 52.23, longitude: 21.01 },
  { id: '2', latitude: 52.24, longitude: 21.02 },
]

export function MapScreen() {
  return (
    <MapView
      style={{ flex: 1 }}
      initialRegion={{
        latitude: 52.0,
        longitude: 19.0,
        latitudeDelta: 8,
        longitudeDelta: 8,
      }}
      radius={50}
      minPoints={2}
      clusterColor="#0F52FF"
    >
      {points.map((point) => (
        <Marker
          key={point.id}
          coordinate={{
            latitude: point.latitude,
            longitude: point.longitude,
          }}
        />
      ))}
    </MapView>
  )
}

Migrating from react-native-map-clustering​

Change one import — props and <Marker> children stay the same:

- import MapView from 'react-native-map-clustering'
+ import MapView from 'react-native-better-clustering'

Custom map stack​

If you render your own react-native-maps MapView and only need cluster computation, use useClusterer from /hooks:

import { useMemo, useState } from 'react'
import MapView, { Marker } from 'react-native-maps'
import { useClusterer } from 'react-native-better-clustering/hooks'
import {
  coordsToGeoJSONFeature,
  isClusterFeature,
} from 'react-native-better-clustering/geojson'

See Hooks API.