react-native-maps-markercluster
Version:
React Native Map Clustering both for Android and iOS
25 lines • 1.37 kB
JavaScript
import React, { useCallback, useContext } from 'react';
import RNMapView from 'react-native-maps';
export const MapViewContext = React.createContext({});
export const useMapView = () => {
const context = useContext(MapViewContext);
if (!context) {
throw new Error('useMapView must be used within a MapViewContext.Provider');
}
return context;
};
export const MapView = (props) => {
const { region, initialRegion, onRegionChangeComplete, mapRef: mapRefReceiver, children, ...rest } = props;
const mapRef = React.useRef();
React.useEffect(() => {
mapRefReceiver === null || mapRefReceiver === void 0 ? void 0 : mapRefReceiver(mapRef.current);
}, [mapRef, mapRefReceiver]);
const [currentRegion, setCurrentRegion] = React.useState(region || initialRegion);
const handleOnRegionChangeComplete = useCallback((r, d) => {
setCurrentRegion(r);
onRegionChangeComplete === null || onRegionChangeComplete === void 0 ? void 0 : onRegionChangeComplete(r, d);
}, [onRegionChangeComplete]);
return (React.createElement(MapViewContext.Provider, { value: { region: currentRegion, mapRef } },
React.createElement(RNMapView, { ...rest, ref: mapRef, region: region, initialRegion: initialRegion, onRegionChangeComplete: handleOnRegionChangeComplete }, children)));
};
//# sourceMappingURL=MapView.js.map