@mappedin/react-native-sdk 5.0.0-beta.7 → 5.0.0-beta.8

package/README.md

@@ -43,6 +43,7 @@ const MiMapView = (props: TMapViewProps) => React.ReactElement;
 | onFirstMapLoaded              | Fires when map can first be interacted with                                   | () => void                                                                                       | No       |
 | onBlueDotStateChanged         | Fires when BlueDot state changes                                              | ({ stateChange: <a href="modules.html#tbluedotstatechange">`TBlueDotStateChange`</a> }) => void  | No       |
 | onBlueDotPositionUpdated      | Fires when BlueDot position changes                                           | ({ update: <a href="modules.html#tbluedotpositionupdate">`TBlueDotPositionUpdate`</a> }) => void | No       |
+| onCameraChanged               | Fires when Camera position, tilt, zoom or rotation changes                    | ({ change: <a href="modules.html#TCameraChange">`TCameraChange`</a> }) => void                   | No       |
 | onStateChanged                | Fires when SDK State changes                                                  | ({ state: <a href="enums/state.html">`STATE`</a> }) => void                                      | No       |
 
 ### Imperative API
@@ -336,33 +337,28 @@ Example:
 
 ```
 
-## Get Directions from One Location to Another and show path and connections on map
+## Get directions from one location to another and show path and connections on map
 
 ```tsx
 import { MiMapView } from '@mappedin/react-native-sdk';
 import type {
-  TBlueDotUpdate,
-  MapViewStore,
   MappedinLocation,
-  MappedinNode,
+  MapViewStore,
+  MappedinPolygon,
 } from '@mappedin/react-native-sdk';
 
-// Imperative API
-const mapView = React.useRef<MapViewStore>();
-const [destination, setDestination] = React.useRef<MappedinLocation>();
-const [departure, setDeparture] = React.useState<MappedinLocation>({});
-
 const App = () => {
+  const mapView = React.useRef<MapViewStore>(null);
+  const [destination, setDestination] = React.useState<MappedinLocation>(null);
+  const [departure, setDeparture] = React.useState<MappedinLocation>(null);
+
   return (
     <>
       <MiMapView
-        style={{ flex: 1 }}
+        style={{flex: 1}}
         ref={mapView}
         options={options}
-        onDataLoaded={() => {
-          mapView.current.BlueDot.enable();
-        }}
-        onPolygonClicked={({ polygon: MappedinPolygon }) => {
+        onPolygonClicked={({polygon: MappedinPolygon}) => {
           // first, let's set departure
           if (departure == null) {
             setDeparture(polygon.locations[0]);
@@ -379,25 +375,24 @@ const App = () => {
             // get Directions
             const directions = departure.directionsTo(destination);
             // draw path on map
-            await controller.current?.Journey.draw(directions);
+            await mapView.current?.Journey.draw(directions);
             // focus on the path
-            controller.current?.Camera.focusOn({ targets: {
+            mapView.current?.Camera.focusOn({
+              targets: {
                 nodes: directions.path,
-              }
+              },
             });
           } catch (e) {
             console.error(e);
           }
-        }}
-      ></Button>
+        }}></Button>
       <Button
         title="Reset"
         onPress={() => {
-          mapView.current.clearAllPaths();
+          mapView.current?.removeAllPaths();
           setDeparture(undefined);
           setDestination(undefined);
-        }}
-      ></Button>
+        }}></Button>
     </>
   );
 };