react-native-map-clustering

To programmatically animate the map to a new region, use a useRef hook to capture the MapView instance and call .animateToRegion(region, duration).

import React, { useRef } from "react";
import { Button } from "react-native";
import MapView from "react-native-map-clustering";
import { Marker } from "react-native-maps";

const INITIAL_REGION = {
  latitude: 52.5,
  longitude: 19.2,
  latitudeDelta: 8.5,
  longitudeDelta: 8.5,
};

const App = () => {
  const mapRef = useRef();

  const animateToRegion = () => {
    let region = {
      latitude: 42.5,
      longitude: 15.2,
      latitudeDelta: 7.5,
      longitudeDelta: 7.5,
    };

    mapRef.current.animateToRegion(region, 2000);
  };

  return (
    <>
      <MapView
        mapRef={mapRef}
        initialRegion={INITIAL_REGION}
        style={{ flex: 1 }}
      />
      <Button onPress={animateToRegion} title="Animate" />
    </>
  );
};

export default App;

To use clustering, import MapView from react-native-map-clustering instead of react-native-maps. You can then nest standard Marker components from react-native-maps inside it. The library will automatically handle the clustering logic for the markers provided.

import React from "react";
import MapView from "react-native-map-clustering";
import { Marker } from "react-native-maps";

const INITIAL_REGION = {
  latitude: 52.5,
  longitude: 19.2,
  latitudeDelta: 8.5,
  longitudeDelta: 8.5,
};

const App = () => (
  <MapView initialRegion={INITIAL_REGION} style={{ flex: 1 }}>
    <Marker coordinate={{ latitude: 52.4, longitude: 18.7 }} />
    <Marker coordinate={{ latitude: 52.1, longitude: 18.4 }} />
    <Marker coordinate={{ latitude: 52.6, longitude: 18.3 }} />
    <Marker coordinate={{ latitude: 51.6, longitude: 18.0 }} />
    <Marker coordinate={{ latitude: 53.1, longitude: 18.8 }} />
    <Marker coordinate={{ latitude: 52.9, longitude: 19.4 }} />
    <Marker coordinate={{ latitude: 52.2, longitude: 21 }} />
    <Marker coordinate={{ latitude: 52.4, longitude: 21 }} />
    <Marker coordinate={{ latitude: 51.8, longitude: 20 }} />
  </MapView>
);

export default App;

The MapView component accepts several props to customize clustering behavior, appearance, and SuperCluster settings.

Appearance

• clusterColor (String): Background color of cluster. Default: #00B386.
• clusterTextColor (String): Color of text in cluster. Default: #FFFFFF.
• clusterFontFamily (String): Font family of text in cluster.
• renderCluster (Function): Custom function to render a cluster with custom styles and logic.
• spiderLineColor (String): Color of the spider line in spiral view. Default: #FF0000.

Clustering Behavior & Events

• clusteringEnabled (Bool): Enable/disable clustering. Default: true.
• spiralEnabled (Bool): Enable/disable spiral view. Default: true.
• onClusterPress(cluster, markers) (Function): Callback when a cluster is clicked. Returns cluster info and its markers. Default: () => {}.
• preserveClusterPressBehavior (Bool): If true, clicking a cluster will not trigger a zoom. Default: false.
• onRegionChangeComplete(region, details, markers) (Function): Called when the map region changes. Returns current region, details, and markers data.
• onMarkersChange(markers) (Function): Called when markers change. Returns markers data.

SuperCluster Configuration

These props map directly to SuperCluster options:

• radius (Number): SuperCluster radius. Default: window.width * 6%.
• extent (Number): SuperCluster extent. Default: 512.
• minZoom (Number): SuperCluster minZoom. Default: 1.
• maxZoom (Number): SuperCluster maxZoom. Default: 20.
• minPoints (Number): SuperCluster minPoints. Default: 2.

Performance & Animation

• tracksViewChanges (Bool): Whether cluster markers should track view changes. Default: false (recommended for performance).
• animationEnabled (Bool): Animate imploding/exploding of clusters. iOS only. Default: true.
• layoutAnimationConf (LayoutAnimationConfig): Custom Layout animation configuration for iOS. Default: LayoutAnimation.Presets.spring.

Layout & References

• width / height (Number): Map dimensions. Defaults to window width/height.
• edgePadding (Object): Padding for fitToCoordinates used in onClusterPress. Default: { top: 50, left: 50, bottom: 50, right: 50 }.
• superClusterRef (MutableRefObject): Reference to the underlying supercluster library instance.