react-native-maps 2.0.0-beta.4 → 2.0.0-beta.5

package/README.md

@@ -52,9 +52,30 @@ This MapView component is built so that features on the map (such as Markers, Po
 specified as children of the MapView itself. This provides an intuitive and react-like API for
 declaratively controlling features on the map.
 
+### Getting a component reference when using typescript
+
+Most components besides the `MapView` is dynamically exported from `react-native-maps`. This means that typescript isn't able to automatically infer the instance type for the compoenent, which is needed when adding a reference. To fix this, use the `InstanceType` utility type, e.g.:
+
+```tsx
+import React from 'react';
+import MapView, {Marker} from 'react-native-maps';
+
+export default function App() {
+  const markerRef = React.useRef<InstanceType<typeof Marker>>(null);
+  return (
+    <MapView style={{flex: 1}}>
+      <Marker
+        ref={markerRef}
+        coordinate={{latitude: 37.78825, longitude: -122.4324}}
+      />
+    </MapView>
+  );
+}
+```
+
 ### Rendering a Map with an initial region
 
-## MapView
+### MapView
 
 ```jsx
 <MapView
@@ -397,7 +418,10 @@ Poi are clickable, you can catch the event to get its information (usually to ge
 The MapView can accept an `AnimatedRegion` value as its `region` prop. This allows you to utilize the Animated API to control the map's center and zoom.
 
 ```jsx
-import MapView, { AnimatedRegion, Animated } from 'react-native-maps';
+import {Animated} from 'react-native'
+import MapView, { AnimatedRegion } from 'react-native-maps';
+
+const AnimatedMapView = Animated.createAnimatedComponent(MapView);
 
 getInitialState() {
   return {
@@ -416,7 +440,7 @@ onRegionChange(region) {
 
 render() {
   return (
-    <Animated
+    <AnimatedMapView
       region={this.state.region}
       onRegionChange={this.onRegionChange}
     />
@@ -429,7 +453,10 @@ render() {
 Markers can also accept an `AnimatedRegion` value as a coordinate.
 
 ```jsx
-import Mapview, { AnimatedRegion, MarkerAnimated } from 'react-native-maps';
+import {Animated} from 'react-native';
+import Mapview, { AnimatedRegion, Marker } from 'react-native-maps';
+
+const AnimatedMarker = Animated.createAnimatedComponent(Marker);
 
 getInitialState() {
   return {
@@ -464,7 +491,7 @@ componentWillReceiveProps(nextProps) {
 render() {
   return (
     <MapView initialRegion={...}>
-      <MarkerAnimated
+      <AnimatedMarker
         ref={marker => { this.marker = marker }}
         coordinate={this.state.coordinate}
       />

package/android/src/main/java/com/rnmaps/maps/MapMarker.java

@@ -74,7 +74,7 @@ public class MapMarker extends MapFeature {
   private float calloutAnchorY;
   private boolean calloutAnchorIsSet;
 
-  private boolean tracksViewChanges = true;
+  private boolean tracksViewChanges = false;
   private boolean tracksViewChangesActive = false;
 
   private boolean hasCustomMarkerView = false;

package/android/src/main/java/com/rnmaps/maps/MapMarkerManager.java

@@ -261,7 +261,7 @@ public class MapMarkerManager extends ViewGroupManager<MapMarker> {
     view.setOpacity(opacity);
   }
 
-  @ReactProp(name = "tracksViewChanges", defaultBoolean = true)
+  @ReactProp(name = "tracksViewChanges", defaultBoolean = false)
   public void setTracksViewChanges(MapMarker view, boolean tracksViewChanges) {
     view.setTracksViewChanges(tracksViewChanges);
   }

package/ios/AirGoogleMaps/AIRGoogleMapMarker.m

@@ -38,7 +38,7 @@ CGRect unionRect(CGRect a, CGRect b) {
   if ((self = [super init])) {
     _realMarker = [[AIRGMSMarker alloc] init];
     _realMarker.fakeMarker = self;
-    _realMarker.tracksViewChanges = true;
+    _realMarker.tracksViewChanges = false;
     _realMarker.tracksInfoWindowChanges = false;
   }
   return self;

package/lib/Geojson.d.ts

@@ -136,7 +136,7 @@ export type GeojsonProps = {
      * This is the default value for all point markers in your geojson data. It can be overriden
      * on a per point basis by adding a `trackViewChanges` property to the `properties` object on the point.
      *
-     * @default true
+     * @default false
      * @platform iOS: Google Maps only
      * @platform Android: Supported
      */

package/lib/MapMarker.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Animated, ViewProps, ImageURISource, ImageRequireSource } from 'react-native';
+import { ViewProps, ImageURISource, ImageRequireSource } from 'react-native';
 import { MapManagerCommand, NativeComponent, ProviderContext, UIManagerCommand } from './decorateMapComponent';
 import { MapMarkerNativeComponentType } from './MapMarkerNativeComponent';
 import { CalloutPressEvent, LatLng, MarkerDeselectEvent, MarkerDragEvent, MarkerDragStartEndEvent, MarkerPressEvent, MarkerSelectEvent, Point } from './sharedTypes';
@@ -246,7 +246,7 @@ export type MapMarkerProps = ViewProps & {
      * Sets whether this marker should track view changes.
      * It's recommended to turn it off whenever it's possible to improve custom marker performance.
      *
-     * @default true
+     * @default false
      * @platform iOS: Google Maps only
      * @platform Android: Supported
      */
@@ -273,7 +273,6 @@ export declare class MapMarker extends React.Component<MapMarkerProps> {
     getNativeComponent: () => NativeComponent<NativeProps>;
     getMapManagerCommand: (name: string) => MapManagerCommand;
     getUIManagerCommand: (name: string) => UIManagerCommand;
-    static Animated: Animated.AnimatedComponent<typeof MapMarker>;
     private marker;
     constructor(props: MapMarkerProps);
     /**

package/lib/MapMarker.js

@@ -32,7 +32,6 @@ class MapMarker extends React.Component {
     getNativeComponent;
     getMapManagerCommand;
     getUIManagerCommand;
-    static Animated;
     marker;
     constructor(props) {
         super(props);
@@ -106,7 +105,6 @@ const styles = react_native_1.StyleSheet.create({
         backgroundColor: 'transparent',
     },
 });
-MapMarker.Animated = react_native_1.Animated.createAnimatedComponent(MapMarker);
 exports.default = (0, decorateMapComponent_1.default)(MapMarker, 'Marker', {
     google: {
         ios: decorateMapComponent_1.SUPPORTED,

package/lib/MapOverlay.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Animated, ViewProps, ImageURISource, ImageRequireSource, NativeSyntheticEvent } from 'react-native';
+import { ViewProps, ImageURISource, ImageRequireSource, NativeSyntheticEvent } from 'react-native';
 import { MapManagerCommand, NativeComponent, ProviderContext, UIManagerCommand } from './decorateMapComponent';
 import { LatLng, Point } from './sharedTypes';
 import { Modify } from './sharedTypesInternal';
@@ -59,7 +59,6 @@ export declare class MapOverlay extends React.Component<MapOverlayProps> {
     getNativeComponent: () => NativeComponent<NativeProps>;
     getMapManagerCommand: (name: string) => MapManagerCommand;
     getUIManagerCommand: (name: string) => UIManagerCommand;
-    static Animated: Animated.AnimatedComponent<typeof MapOverlay>;
     render(): JSX.Element;
 }
 type Coordinate = [number, number];

package/lib/MapOverlay.js

@@ -31,7 +31,6 @@ class MapOverlay extends React.Component {
     getNativeComponent;
     getMapManagerCommand;
     getUIManagerCommand;
-    static Animated;
     render() {
         const { opacity = 1.0 } = this.props;
         let image;
@@ -54,7 +53,6 @@ const styles = react_native_1.StyleSheet.create({
         backgroundColor: 'transparent',
     },
 });
-MapOverlay.Animated = react_native_1.Animated.createAnimatedComponent(MapOverlay);
 exports.default = (0, decorateMapComponent_1.default)(MapOverlay, 'Overlay', {
     google: {
         ios: decorateMapComponent_1.SUPPORTED,

package/lib/MapView.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Animated as RNAnimated, Animated, NativeSyntheticEvent, ViewProps } from 'react-native';
+import { NativeSyntheticEvent, ViewProps } from 'react-native';
 import { CalloutPressEvent, ClickEvent, Frame, LatLng, MarkerDeselectEvent, MarkerDragEvent, MarkerDragStartEndEvent, MarkerPressEvent, MarkerSelectEvent, Point, Provider, Region } from './sharedTypes';
 import { Address, BoundingBox, Camera, ChangeEvent, Details, EdgePadding, FitToOptions, IndoorBuildingEvent, IndoorLevelActivatedEvent, KmlMapEvent, LongPressEvent, MapPressEvent, MapStyleElement, MapType, MapTypes, PanDragEvent, PoiClickEvent, SnapshotOptions, UserLocationChangeEvent } from './MapView.types';
 import { Modify } from './sharedTypesInternal';
@@ -570,7 +570,6 @@ type State = {
     isReady: boolean;
 };
 declare class MapView extends React.Component<MapViewProps, State> {
-    static Animated: Animated.AnimatedComponent<typeof MapView>;
     private map;
     constructor(props: MapViewProps);
     /**
@@ -582,9 +581,7 @@ declare class MapView extends React.Component<MapViewProps, State> {
     private _onChange;
     getCamera(): Promise<Camera>;
     setCamera(camera: Partial<Camera>): void;
-    animateCamera(camera: Partial<Camera>, opts?: {
-        duration?: number;
-    }): void;
+    animateCamera(camera: Partial<Camera>, duration?: number): void;
     animateToRegion(region: Region, duration?: number): void;
     fitToElements(options?: FitToOptions): void;
     fitToSuppliedMarkers(markers: string[], options?: FitToOptions): void;
@@ -668,6 +665,5 @@ declare class MapView extends React.Component<MapViewProps, State> {
     private _runCommand;
     render(): JSX.Element;
 }
-export declare const AnimatedMapView: RNAnimated.AnimatedComponent<typeof MapView>;
 export declare const enableLatestRenderer: () => any;
 export default MapView;

package/lib/MapView.js

@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.enableLatestRenderer = exports.AnimatedMapView = exports.MAP_TYPES = void 0;
+exports.enableLatestRenderer = exports.MAP_TYPES = void 0;
 const React = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const decorateMapComponent_1 = require("./decorateMapComponent");
@@ -39,7 +39,6 @@ exports.MAP_TYPES = {
 };
 const GOOGLE_MAPS_ONLY_TYPES = [exports.MAP_TYPES.TERRAIN, exports.MAP_TYPES.NONE];
 class MapView extends React.Component {
-    static Animated;
     map;
     constructor(props) {
         super(props);
@@ -93,9 +92,9 @@ class MapView extends React.Component {
             MapViewNativeComponent_1.Commands.setCamera(this.map.current, camera);
         }
     }
-    animateCamera(camera, opts) {
+    animateCamera(camera, duration = 500) {
         if (this.map.current) {
-            MapViewNativeComponent_1.Commands.animateCamera(this.map.current, camera, opts?.duration ? opts.duration : 500);
+            MapViewNativeComponent_1.Commands.animateCamera(this.map.current, camera, duration);
         }
     }
     animateToRegion(region, duration = 500) {
@@ -367,7 +366,6 @@ const getNativeMapComponent = (provider) => airMaps[provider || 'default'];
 const AIRMapLite = react_native_1.UIManager.getViewManagerConfig('AIRMapLite')
     ? (0, react_native_1.requireNativeComponent)('AIRMapLite')
     : () => null;
-exports.AnimatedMapView = react_native_1.Animated.createAnimatedComponent(MapView);
 const enableLatestRenderer = () => {
     if (react_native_1.Platform.OS !== 'android') {
         return;
@@ -375,5 +373,4 @@ const enableLatestRenderer = () => {
     return react_native_1.NativeModules.AirMapModule.enableLatestRenderer();
 };
 exports.enableLatestRenderer = enableLatestRenderer;
-MapView.Animated = exports.AnimatedMapView;
 exports.default = MapView;

package/lib/index.d.ts

@@ -1,38 +1,31 @@
-import MapView, { AnimatedMapView as Animated, MAP_TYPES, enableLatestRenderer, MapViewProps } from './MapView';
-import Marker from './MapMarker';
-export { MapMarker } from './MapMarker';
+export { default, enableLatestRenderer, MAP_TYPES } from './MapView';
+export type { MapViewProps } from './MapView';
+export { default as Marker } from './MapMarker';
 export type { MapMarkerProps } from './MapMarker';
-import Overlay from './MapOverlay';
-export { MapOverlay } from './MapOverlay';
+export { default as Overlay } from './MapOverlay';
 export type { MapOverlayProps } from './MapOverlay';
-export { default as Polyline, MapPolyline } from './MapPolyline';
+export { default as Polyline } from './MapPolyline';
 export type { MapPolylineProps } from './MapPolyline';
-export { default as Heatmap, MapHeatmap } from './MapHeatmap';
+export { default as Heatmap } from './MapHeatmap';
 export type { MapHeatmapProps } from './MapHeatmap';
-export { default as Polygon, MapPolygon } from './MapPolygon';
+export { default as Polygon } from './MapPolygon';
 export type { MapPolygonProps } from './MapPolygon';
-export { default as Circle, MapCircle } from './MapCircle';
+export { default as Circle } from './MapCircle';
 export type { MapCircleProps } from './MapCircle';
-export { default as UrlTile, MapUrlTile } from './MapUrlTile';
+export { default as UrlTile } from './MapUrlTile';
 export type { MapUrlTileProps } from './MapUrlTile';
-export { default as WMSTile, MapWMSTile } from './MapWMSTile';
+export { default as WMSTile } from './MapWMSTile';
 export type { MapWMSTileProps } from './MapWMSTile';
-export { default as LocalTile, MapLocalTile } from './MapLocalTile';
+export { default as LocalTile } from './MapLocalTile';
 export type { MapLocalTileProps } from './MapLocalTile';
-export { default as Callout, MapCallout } from './MapCallout';
+export { default as Callout } from './MapCallout';
 export type { MapCalloutProps } from './MapCallout';
-export { default as CalloutSubview, MapCalloutSubview, } from './MapCalloutSubview';
+export { default as CalloutSubview } from './MapCalloutSubview';
 export type { MapCalloutSubviewProps } from './MapCalloutSubview';
-export { default as AnimatedRegion } from './AnimatedRegion';
 export { default as Geojson } from './Geojson';
 export type { GeojsonProps } from './Geojson';
-export { Marker, Overlay };
-export type { MapViewProps };
-export { Animated, MAP_TYPES, enableLatestRenderer };
+export { default as AnimatedRegion } from './AnimatedRegion';
 export * from './ProviderConstants';
 export * from './MapView.types';
 export * from './MapPolygon.types';
 export * from './sharedTypes';
-export declare const MarkerAnimated: import("react-native").Animated.AnimatedComponent<typeof import("./MapMarker").MapMarker>;
-export declare const OverlayAnimated: import("react-native").Animated.AnimatedComponent<typeof import("./MapOverlay").MapOverlay>;
-export default MapView;

package/lib/index.js

@@ -10,18 +10,6 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
 }));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
@@ -29,54 +17,38 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.OverlayAnimated = exports.MarkerAnimated = exports.enableLatestRenderer = exports.MAP_TYPES = exports.Animated = exports.Overlay = exports.Marker = exports.Geojson = exports.AnimatedRegion = exports.MapCalloutSubview = exports.CalloutSubview = exports.MapCallout = exports.Callout = exports.MapLocalTile = exports.LocalTile = exports.MapWMSTile = exports.WMSTile = exports.MapUrlTile = exports.UrlTile = exports.MapCircle = exports.Circle = exports.MapPolygon = exports.Polygon = exports.MapHeatmap = exports.Heatmap = exports.MapPolyline = exports.Polyline = exports.MapOverlay = exports.MapMarker = void 0;
-const MapView_1 = __importStar(require("./MapView"));
-Object.defineProperty(exports, "Animated", { enumerable: true, get: function () { return MapView_1.AnimatedMapView; } });
-Object.defineProperty(exports, "MAP_TYPES", { enumerable: true, get: function () { return MapView_1.MAP_TYPES; } });
+exports.AnimatedRegion = exports.Geojson = exports.CalloutSubview = exports.Callout = exports.LocalTile = exports.WMSTile = exports.UrlTile = exports.Circle = exports.Polygon = exports.Heatmap = exports.Polyline = exports.Overlay = exports.Marker = exports.MAP_TYPES = exports.enableLatestRenderer = exports.default = void 0;
+var MapView_1 = require("./MapView");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(MapView_1).default; } });
 Object.defineProperty(exports, "enableLatestRenderer", { enumerable: true, get: function () { return MapView_1.enableLatestRenderer; } });
-const MapMarker_1 = __importDefault(require("./MapMarker"));
-exports.Marker = MapMarker_1.default;
-var MapMarker_2 = require("./MapMarker");
-Object.defineProperty(exports, "MapMarker", { enumerable: true, get: function () { return MapMarker_2.MapMarker; } });
-const MapOverlay_1 = __importDefault(require("./MapOverlay"));
-exports.Overlay = MapOverlay_1.default;
-var MapOverlay_2 = require("./MapOverlay");
-Object.defineProperty(exports, "MapOverlay", { enumerable: true, get: function () { return MapOverlay_2.MapOverlay; } });
+Object.defineProperty(exports, "MAP_TYPES", { enumerable: true, get: function () { return MapView_1.MAP_TYPES; } });
+var MapMarker_1 = require("./MapMarker");
+Object.defineProperty(exports, "Marker", { enumerable: true, get: function () { return __importDefault(MapMarker_1).default; } });
+var MapOverlay_1 = require("./MapOverlay");
+Object.defineProperty(exports, "Overlay", { enumerable: true, get: function () { return __importDefault(MapOverlay_1).default; } });
 var MapPolyline_1 = require("./MapPolyline");
 Object.defineProperty(exports, "Polyline", { enumerable: true, get: function () { return __importDefault(MapPolyline_1).default; } });
-Object.defineProperty(exports, "MapPolyline", { enumerable: true, get: function () { return MapPolyline_1.MapPolyline; } });
 var MapHeatmap_1 = require("./MapHeatmap");
 Object.defineProperty(exports, "Heatmap", { enumerable: true, get: function () { return __importDefault(MapHeatmap_1).default; } });
-Object.defineProperty(exports, "MapHeatmap", { enumerable: true, get: function () { return MapHeatmap_1.MapHeatmap; } });
 var MapPolygon_1 = require("./MapPolygon");
 Object.defineProperty(exports, "Polygon", { enumerable: true, get: function () { return __importDefault(MapPolygon_1).default; } });
-Object.defineProperty(exports, "MapPolygon", { enumerable: true, get: function () { return MapPolygon_1.MapPolygon; } });
 var MapCircle_1 = require("./MapCircle");
 Object.defineProperty(exports, "Circle", { enumerable: true, get: function () { return __importDefault(MapCircle_1).default; } });
-Object.defineProperty(exports, "MapCircle", { enumerable: true, get: function () { return MapCircle_1.MapCircle; } });
 var MapUrlTile_1 = require("./MapUrlTile");
 Object.defineProperty(exports, "UrlTile", { enumerable: true, get: function () { return __importDefault(MapUrlTile_1).default; } });
-Object.defineProperty(exports, "MapUrlTile", { enumerable: true, get: function () { return MapUrlTile_1.MapUrlTile; } });
 var MapWMSTile_1 = require("./MapWMSTile");
 Object.defineProperty(exports, "WMSTile", { enumerable: true, get: function () { return __importDefault(MapWMSTile_1).default; } });
-Object.defineProperty(exports, "MapWMSTile", { enumerable: true, get: function () { return MapWMSTile_1.MapWMSTile; } });
 var MapLocalTile_1 = require("./MapLocalTile");
 Object.defineProperty(exports, "LocalTile", { enumerable: true, get: function () { return __importDefault(MapLocalTile_1).default; } });
-Object.defineProperty(exports, "MapLocalTile", { enumerable: true, get: function () { return MapLocalTile_1.MapLocalTile; } });
 var MapCallout_1 = require("./MapCallout");
 Object.defineProperty(exports, "Callout", { enumerable: true, get: function () { return __importDefault(MapCallout_1).default; } });
-Object.defineProperty(exports, "MapCallout", { enumerable: true, get: function () { return MapCallout_1.MapCallout; } });
 var MapCalloutSubview_1 = require("./MapCalloutSubview");
 Object.defineProperty(exports, "CalloutSubview", { enumerable: true, get: function () { return __importDefault(MapCalloutSubview_1).default; } });
-Object.defineProperty(exports, "MapCalloutSubview", { enumerable: true, get: function () { return MapCalloutSubview_1.MapCalloutSubview; } });
-var AnimatedRegion_1 = require("./AnimatedRegion");
-Object.defineProperty(exports, "AnimatedRegion", { enumerable: true, get: function () { return __importDefault(AnimatedRegion_1).default; } });
 var Geojson_1 = require("./Geojson");
 Object.defineProperty(exports, "Geojson", { enumerable: true, get: function () { return __importDefault(Geojson_1).default; } });
+var AnimatedRegion_1 = require("./AnimatedRegion");
+Object.defineProperty(exports, "AnimatedRegion", { enumerable: true, get: function () { return __importDefault(AnimatedRegion_1).default; } });
 __exportStar(require("./ProviderConstants"), exports);
 __exportStar(require("./MapView.types"), exports);
 __exportStar(require("./MapPolygon.types"), exports);
 __exportStar(require("./sharedTypes"), exports);
-exports.MarkerAnimated = MapMarker_1.default.Animated;
-exports.OverlayAnimated = MapOverlay_1.default.Animated;
-exports.default = MapView_1.default;

package/package.json

@@ -5,7 +5,7 @@
   "main": "lib/index.js",
   "author": "Leland Richardson <leland.m.richardson@gmail.com>",
   "homepage": "https://github.com/react-native-maps/react-native-maps#readme",
-  "version": "2.0.0-beta.4",
+  "version": "2.0.0-beta.5",
   "license": "MIT",
   "scripts": {
     "lint": "eslint . --max-warnings 0",