react-native-map-clustering-example

App_react-native-maps.js

import React from "react";
import { StyleSheet, View } from "react-native";
import MapView, { Marker } from "react-native-maps";

const initialRegion = {
  latitude: 37.72825,
  longitude: -122.4324,
  latitudeDelta: 0.25,
  longitudeDelta: 0.15
};

export default function App() {
  return (
    <View style={styles.container}>
      <MapView style={styles.map} initialRegion={initialRegion}>
        <Marker coordinate={{ latitude: 37.78825, longitude: -122.4324 }} />
        <Marker coordinate={{ latitude: 37.78525, longitude: -122.4224 }} />
        <Marker coordinate={{ latitude: 37.7765, longitude: -122.4124 }} />
        <Marker coordinate={{ latitude: 37.7965, longitude: -122.4424 }} />
        <Marker coordinate={{ latitude: 37.8065, longitude: -122.4424 }} />
        <Marker coordinate={{ latitude: 37.7765, longitude: -122.4424 }} />
        <Marker coordinate={{ latitude: 37.7565, longitude: -122.4324 }} />
      </MapView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  map: {
    width: "100%",
    height: "100%"
  }
});