Fixing minor bug

Author: tomekvenits

example/package.json

@@ -12,7 +12,7 @@
     "react": "16.8.3",
     "react-dom": "16.8.3",
     "react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
-    "react-native-map-clustering": "^3.0.3",
+    "react-native-map-clustering": "^3.0.4",
     "react-native-maps": "^0.26.1",
     "react-native-web": "^0.11.7"
   },

lib/ClusteredMapView.js

@@ -31,6 +31,9 @@ const ClusteredMapView = ({
   const [markers, updateMarkers] = useState([]);
   const [otherChildren, updateChildren] = useState([]);
   const [superCluster, setSuperCluster] = useState(null);
+  const [currentRegion, updateRegion] = useState(
+    restProps.region || restProps.initialRegion
+  );
   const mapRef = createRef();
 
   const propsChildren = useMemo(() => React.Children.toArray(children), [
@@ -40,7 +43,6 @@ const ClusteredMapView = ({
   useEffect(() => {
     const rawData = [];
     const otherChildren = [];
-    const region = restProps.region || restProps.initialRegion;
 
     if (!clusteringEnabled) {
       updateChildren(propsChildren);
@@ -65,14 +67,14 @@ const ClusteredMapView = ({
 
     superCluster.load(rawData);
 
-    const bBox = calculateBBox(region);
-    const zoom = returnMapZoom(region, bBox, minZoom);
+    const bBox = calculateBBox(currentRegion);
+    const zoom = returnMapZoom(currentRegion, bBox, minZoom);
     const markers = superCluster.getClusters(bBox, zoom);
 
     updateMarkers(markers);
     updateChildren(otherChildren);
     setSuperCluster(superCluster);
-  }, [children]);
+  }, [children, restProps.region, restProps.initialRegion]);
 
   const _onRegionChangeComplete = region => {
     if (superCluster) {
@@ -86,6 +88,7 @@ const ClusteredMapView = ({
 
       updateMarkers(markers);
       onRegionChangeComplete(region, markers);
+      updateRegion(region);
     }
   };
 

lib/helpers.js

@@ -4,7 +4,10 @@ import { Dimensions } from "react-native";
 const { width, height } = Dimensions.get("window");
 
 export const isMarker = child =>
-  child.props && child.props.coordinate && child.props.cluster !== false;
+  child &&
+  child.props &&
+  child.props.coordinate &&
+  child.props.cluster !== false;
 
 export const calculateBBox = region => {
   let lngD;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-map-clustering",
-  "version": "3.0.3",
+  "version": "3.0.4",
   "description": "Map clustering both for Android and iOS",
   "main": "index.js",
   "scripts": {