How to animate to region?

venits · May 22, 2020 · 3d6be0c · 3d6be0c
1 parent f1d61a7
commit 3d6be0c
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -76,6 +76,52 @@ export default App;
 | **renderCluster**                           | Function              | undefined                                    | Enables you to render custom cluster with custom styles and logic.                                                                                                                                                              |
 | **spiderLineColor**                         | String                | #FF0000                                      | Enables you to set color of spider line which joins spiral location with center location.                                                                                                                                       |
 
+## How to animate to region?
+
+Full example of how to use `animateToRegion()`.
+
+```js
+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
+        ref={mapRef}
+        initialRegion={INITIAL_REGION}
+        style={{ flex: 1 }}
+      />
+      <Button onPress={animateToRegion} title="Animate" />
+    </>
+  );
+};
+
+export default App;
+```
+
 #### This repo is proudly sponsored by:
 
 <a href="https://nativeforms.com" rel="nofollow" target="_blank">

diff --git a/example/package.json b/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.3.5",
+    "react-native-map-clustering": "^3.3.7",
     "react-native-maps": "^0.26.1",
     "react-native-web": "^0.11.7"
   },

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-map-clustering",
-  "version": "3.3.6",
+  "version": "3.3.7",
   "description": "React Native Map Clustering both for Android and iOS",
   "types": "index.d.ts",
   "main": "index.js",