react-native-maps 0.29.4 → 0.31.0-beta.1

package/lib/components/AnimatedRegion.js

@@ -8,37 +8,49 @@ if (__DEV__) {
     );
   }
 }
-// const __Animated = Object.getPrototypeOf(AnimatedWithChildren);
-// if (__Animated.name !== 'Animated') console.error('AnimatedRegion could not obtain Animated base class');
 
-var _uniqueId = 1;
+const configTypes = [
+  'latitude',
+  'longitude',
+  'latitudeDelta',
+  'longitudeDelta',
+];
+
+const defaultValues = {
+  // probably want to come up with better defaults
+  latitude: 0,
+  longitude: 0,
+  latitudeDelta: 0,
+  longitudeDelta: 0,
+};
+
+let _uniqueId = 1;
+
+const getAnimatedValue = (valueIn, fallback) => {
+  if (valueIn instanceof Animated.Value) {
+    return valueIn;
+  } else if (typeof valueIn === 'number') {
+    return new Animated.Value(valueIn);
+  }
+  return new Animated.Value(fallback);
+};
 
 export default class AnimatedMapRegion extends AnimatedWithChildren {
-  constructor(valueIn) {
+  constructor(valueIn = {}) {
     super();
-    var value = valueIn || {
-      // probably want to come up with better defaults
-      latitude: 0,
-      longitude: 0,
-      latitudeDelta: 0,
-      longitudeDelta: 0,
-    };
-    this.latitude =
-      value.latitude instanceof Animated.Value
-        ? value.latitude
-        : new Animated.Value(value.latitude);
-    this.longitude =
-      value.longitude instanceof Animated.Value
-        ? value.longitude
-        : new Animated.Value(value.longitude);
-    this.latitudeDelta =
-      value.latitudeDelta instanceof Animated.Value
-        ? value.latitudeDelta
-        : new Animated.Value(value.latitudeDelta);
-    this.longitudeDelta =
-      value.longitudeDelta instanceof Animated.Value
-        ? value.longitudeDelta
-        : new Animated.Value(value.longitudeDelta);
+    this.latitude = getAnimatedValue(valueIn.latitude, defaultValues.latitude);
+    this.longitude = getAnimatedValue(
+      valueIn.longitude,
+      defaultValues.longitude
+    );
+    this.latitudeDelta = getAnimatedValue(
+      valueIn.latitudeDelta,
+      defaultValues.latitudeDelta
+    );
+    this.longitudeDelta = getAnimatedValue(
+      valueIn.longitudeDelta,
+      defaultValues.longitudeDelta
+    );
     this._regionListeners = {};
   }
 
@@ -95,10 +107,8 @@ export default class AnimatedMapRegion extends AnimatedWithChildren {
   }
 
   addListener(callback) {
-    var id = String(_uniqueId++);
-    var jointCallback = (/*{value}*/) => {
-      callback(this.__getValue());
-    };
+    const id = String(_uniqueId++);
+    const jointCallback = () => /*{value}*/ callback(this.__getValue());
     this._regionListeners[id] = {
       latitude: this.latitude.addListener(jointCallback),
       longitude: this.longitude.addListener(jointCallback),
@@ -119,80 +129,36 @@ export default class AnimatedMapRegion extends AnimatedWithChildren {
   }
 
   spring(config) {
-    var animations = [];
-    config.hasOwnProperty('latitude') &&
-      animations.push(
-        Animated.spring(this.latitude, {
-          ...config,
-          toValue: config.latitude,
-        })
-      );
-
-    config.hasOwnProperty('longitude') &&
-      animations.push(
-        Animated.spring(this.longitude, {
-          ...config,
-          toValue: config.longitude,
-        })
-      );
-
-    config.hasOwnProperty('latitudeDelta') &&
-      animations.push(
-        Animated.spring(this.latitudeDelta, {
-          ...config,
-          toValue: config.latitudeDelta,
-        })
-      );
-
-    config.hasOwnProperty('longitudeDelta') &&
-      animations.push(
-        Animated.spring(this.longitudeDelta, {
-          ...config,
-          toValue: config.longitudeDelta,
-        })
-      );
-
+    const animations = [];
+    for (const type of configTypes) {
+      if (config.hasOwnProperty(type)) {
+        animations.push(
+          Animated.spring(this[type], {
+            ...config,
+            toValue: config[type],
+            // may help to eliminate some dev warnings and perf issues
+            useNativeDriver: !!config?.useNativeDriver,
+          })
+        );
+      }
+    }
     return Animated.parallel(animations);
   }
 
   timing(config) {
-    var animations = [];
-    config.hasOwnProperty('latitude') &&
-      animations.push(
-        Animated.timing(this.latitude, {
-          ...config,
-          toValue: config.latitude,
-          useNativeDriver: false,
-        })
-      );
-
-    config.hasOwnProperty('longitude') &&
-      animations.push(
-        Animated.timing(this.longitude, {
-          ...config,
-          toValue: config.longitude,
-          useNativeDriver: false,
-        })
-      );
-
-    config.hasOwnProperty('latitudeDelta') &&
-      animations.push(
-        Animated.timing(this.latitudeDelta, {
-          ...config,
-          toValue: config.latitudeDelta,
-          useNativeDriver: false,
-        })
-      );
-
-    config.hasOwnProperty('longitudeDelta') &&
-      animations.push(
-        Animated.timing(this.longitudeDelta, {
-          ...config,
-          toValue: config.longitudeDelta,
-          useNativeDriver: false,
-        })
-      );
-
+    const animations = [];
+    for (const type of configTypes) {
+      if (config.hasOwnProperty(type)) {
+        animations.push(
+          Animated.timing(this[type], {
+            ...config,
+            toValue: config[type],
+            // may help to eliminate some dev warnings and perf issues
+            useNativeDriver: !!config?.useNativeDriver,
+          })
+        );
+      }
+    }
     return Animated.parallel(animations);
   }
 }

package/lib/components/Geojson.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import Marker from './MapMarker';
 import Polyline from './MapPolyline';
 import Polygon from './MapPolygon';
-import { ColorPropType } from 'react-native';
+import { ColorPropType } from 'deprecated-react-native-prop-types';
 
 const propTypes = {
   /**
@@ -39,6 +39,12 @@ const propTypes = {
    */
   lineDashPhase: PropTypes.number,
 
+  /**
+   * Make the `Polygon` or `Polyline` tappable
+   *
+   */
+  tappable: PropTypes.bool,
+
   /**
    * An array of numbers specifying the dash pattern to use for the path.
    *
@@ -100,9 +106,29 @@ const propTypes = {
    *
    */
   markerComponent: PropTypes.node,
+
+  /**
+   * The title of the marker. This is only used if the <Marker /> component has no children that
+   * are a `<Callout />`, in which case the default callout behavior will be used, which
+   * will show both the `title` and the `description`, if provided.
+   */
+  title: PropTypes.string,
 };
 
-const Geojson = props => {
+const Geojson = (props) => {
+  const {
+    title,
+    image,
+    zIndex,
+    onPress,
+    lineCap,
+    lineJoin,
+    tappable,
+    miterLimit,
+    lineDashPhase,
+    lineDashPattern,
+    markerComponent,
+  } = props;
   const overlays = makeOverlays(props.geojson.features);
   return (
     <React.Fragment>
@@ -116,12 +142,13 @@ const Geojson = props => {
             <Marker
               key={index}
               coordinate={overlay.coordinates}
-              image={props.image}
+              image={image}
+              title={title}
               pinColor={markerColor}
-              zIndex={props.zIndex}
-              onPress={() => props.onPress && props.onPress(overlay)}
+              zIndex={zIndex}
+              onPress={() => onPress && onPress(overlay)}
             >
-              {props.markerComponent}
+              {markerComponent}
             </Marker>
           );
         }
@@ -134,9 +161,9 @@ const Geojson = props => {
               strokeColor={strokeColor}
               fillColor={fillColor}
               strokeWidth={strokeWidth}
-              tappable={props.tappable}
-              onPress={() => props.onPress && props.onPress(overlay)}
-              zIndex={props.zIndex}
+              tappable={tappable}
+              onPress={() => onPress && onPress(overlay)}
+              zIndex={zIndex}
             />
           );
         }
@@ -147,14 +174,14 @@ const Geojson = props => {
               coordinates={overlay.coordinates}
               strokeColor={strokeColor}
               strokeWidth={strokeWidth}
-              lineDashPhase={props.lineDashPhase}
-              lineDashPattern={props.lineDashPattern}
-              lineCap={props.lineCap}
-              lineJoin={props.lineJoin}
-              miterLimit={props.miterLimit}
-              zIndex={props.zIndex}
-              tappable={props.tappable}
-              onPress={() => props.onPress && props.onPress(overlay)}
+              lineDashPhase={lineDashPhase}
+              lineDashPattern={lineDashPattern}
+              lineCap={lineCap}
+              lineJoin={lineJoin}
+              miterLimit={miterLimit}
+              zIndex={zIndex}
+              tappable={tappable}
+              onPress={() => onPress && onPress(overlay)}
             />
           );
         }
@@ -167,51 +194,51 @@ Geojson.propTypes = propTypes;
 
 export default Geojson;
 
-export const makeOverlays = features => {
+export const makeOverlays = (features) => {
   const points = features
     .filter(
-      f =>
+      (f) =>
         f.geometry &&
         (f.geometry.type === 'Point' || f.geometry.type === 'MultiPoint')
     )
-    .map(feature =>
-      makeCoordinates(feature).map(coordinates =>
+    .map((feature) =>
+      makeCoordinates(feature).map((coordinates) =>
         makeOverlay(coordinates, feature)
       )
     )
     .reduce(flatten, [])
-    .map(overlay => ({ ...overlay, type: 'point' }));
+    .map((overlay) => ({ ...overlay, type: 'point' }));
 
   const lines = features
     .filter(
-      f =>
+      (f) =>
         f.geometry &&
         (f.geometry.type === 'LineString' ||
           f.geometry.type === 'MultiLineString')
     )
-    .map(feature =>
-      makeCoordinates(feature).map(coordinates =>
+    .map((feature) =>
+      makeCoordinates(feature).map((coordinates) =>
         makeOverlay(coordinates, feature)
       )
     )
     .reduce(flatten, [])
-    .map(overlay => ({ ...overlay, type: 'polyline' }));
+    .map((overlay) => ({ ...overlay, type: 'polyline' }));
 
   const multipolygons = features
-    .filter(f => f.geometry && f.geometry.type === 'MultiPolygon')
-    .map(feature =>
-      makeCoordinates(feature).map(coordinates =>
+    .filter((f) => f.geometry && f.geometry.type === 'MultiPolygon')
+    .map((feature) =>
+      makeCoordinates(feature).map((coordinates) =>
         makeOverlay(coordinates, feature)
       )
     )
     .reduce(flatten, []);
 
   const polygons = features
-    .filter(f => f.geometry && f.geometry.type === 'Polygon')
-    .map(feature => makeOverlay(makeCoordinates(feature), feature))
+    .filter((f) => f.geometry && f.geometry.type === 'Polygon')
+    .map((feature) => makeOverlay(makeCoordinates(feature), feature))
     .reduce(flatten, [])
     .concat(multipolygons)
-    .map(overlay => ({ ...overlay, type: 'polygon' }));
+    .map((overlay) => ({ ...overlay, type: 'polygon' }));
 
   return points.concat(lines).concat(polygons);
 };
@@ -236,11 +263,11 @@ const makeOverlay = (coordinates, feature) => {
   return overlay;
 };
 
-const makePoint = c => ({ latitude: c[1], longitude: c[0] });
+const makePoint = (c) => ({ latitude: c[1], longitude: c[0] });
 
-const makeLine = l => l.map(makePoint);
+const makeLine = (l) => l.map(makePoint);
 
-const makeCoordinates = feature => {
+const makeCoordinates = (feature) => {
   const g = feature.geometry;
   if (g.type === 'Point') {
     return [makePoint(g.coordinates)];
@@ -253,7 +280,7 @@ const makeCoordinates = feature => {
   } else if (g.type === 'Polygon') {
     return g.coordinates.map(makeLine);
   } else if (g.type === 'MultiPolygon') {
-    return g.coordinates.map(p => p.map(makeLine));
+    return g.coordinates.map((p) => p.map(makeLine));
   } else {
     return [];
   }
@@ -271,7 +298,7 @@ const doesOverlayContainProperty = (overlay, property) => {
 };
 
 const getRgbaFromHex = (hex, alpha = 1) => {
-  const [r, g, b] = hex.match(/\w\w/g).map(x => parseInt(x, 16));
+  const [r, g, b] = hex.match(/\w\w/g).map((x) => parseInt(x, 16));
   return `rgba(${r},${g},${b},${alpha})`;
 };
 
@@ -293,15 +320,15 @@ const getColor = (props, overlay, colorType, overrideColorProp) => {
     }
     return color;
   }
-  return null;
+  return;
 };
 
 const getStrokeWidth = (props, overlay) => {
   if (props.hasOwnProperty('strokeWidth')) {
-    return props['strokeWidth'];
+    return props.strokeWidth;
   }
   if (doesOverlayContainProperty(overlay, 'stroke-width')) {
     return overlay.feature.properties['stroke-width'];
   }
-  return 0;
+  return;
 };

package/lib/components/MapCallout.js

@@ -1,16 +1,14 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { StyleSheet, ViewPropTypes, View } from 'react-native';
+import { StyleSheet } from 'react-native';
+import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 import decorateMapComponent, {
   SUPPORTED,
   USES_DEFAULT_IMPLEMENTATION,
 } from './decorateMapComponent';
 
-// if ViewPropTypes is not defined fall back to View.propType (to support RN < 0.44)
-const viewPropTypes = ViewPropTypes || View.propTypes;
-
 const propTypes = {
-  ...viewPropTypes,
+  ...ViewPropTypes,
   tooltip: PropTypes.bool,
   onPress: PropTypes.func,
   alphaHitTest: PropTypes.bool,

package/lib/components/MapCalloutSubview.js

@@ -1,16 +1,14 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { StyleSheet, ViewPropTypes, View } from 'react-native';
+import { StyleSheet } from 'react-native';
+import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 import decorateMapComponent, {
   SUPPORTED,
   NOT_SUPPORTED,
 } from './decorateMapComponent';
 
-// if ViewPropTypes is not defined fall back to View.propType (to support RN < 0.44)
-const viewPropTypes = ViewPropTypes || View.propTypes;
-
 const propTypes = {
-  ...viewPropTypes,
+  ...ViewPropTypes,
   onPress: PropTypes.func,
 };
 

package/lib/components/MapCircle.js

@@ -1,16 +1,16 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { ColorPropType, ViewPropTypes, View } from 'react-native';
+import {
+  ColorPropType,
+  ViewPropTypes,
+} from 'deprecated-react-native-prop-types';
 import decorateMapComponent, {
   USES_DEFAULT_IMPLEMENTATION,
   SUPPORTED,
 } from './decorateMapComponent';
 
-// if ViewPropTypes is not defined fall back to View.propType (to support RN < 0.44)
-const viewPropTypes = ViewPropTypes || View.propTypes;
-
 const propTypes = {
-  ...viewPropTypes,
+  ...ViewPropTypes,
 
   /**
    * The coordinate of the center of the circle
@@ -128,7 +128,7 @@ class MapCircle extends React.Component {
     return (
       <AIRMapCircle
         {...this.props}
-        ref={ref => {
+        ref={(ref) => {
           this.circle = ref;
         }}
       />

package/lib/components/MapHeatmap.js

@@ -1,16 +1,14 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { ViewPropTypes, View, processColor } from 'react-native';
+import { processColor } from 'react-native';
+import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 import decorateMapComponent, {
   SUPPORTED,
   USES_DEFAULT_IMPLEMENTATION,
 } from './decorateMapComponent';
 
-// if ViewPropTypes is not defined fall back to View.propType (to support RN < 0.44)
-const viewPropTypes = ViewPropTypes || View.propTypes;
-
 const propTypes = {
-  ...viewPropTypes,
+  ...ViewPropTypes,
 
   /**
    * Array of heatmap entries to apply towards density.
@@ -73,13 +71,13 @@ class MapHeatmap extends React.Component {
     let gradient;
     if (this.props.gradient) {
       gradient = Object.assign({}, this.props.gradient);
-      gradient.colors = gradient.colors.map(c => processColor(c));
+      gradient.colors = gradient.colors.map((c) => processColor(c));
     }
     return (
       <AIRMapHeatmap
         {...this.props}
         gradient={gradient}
-        ref={ref => {
+        ref={(ref) => {
           this.heatmap = ref;
         }}
       />

package/lib/components/MapLocalTile.js

@@ -1,18 +1,14 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-
-import { ViewPropTypes, View } from 'react-native';
+import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 
 import decorateMapComponent, {
   USES_DEFAULT_IMPLEMENTATION,
   SUPPORTED,
 } from './decorateMapComponent';
 
-// if ViewPropTypes is not defined fall back to View.propType (to support RN < 0.44)
-const viewPropTypes = ViewPropTypes || View.propTypes;
-
 const propTypes = {
-  ...viewPropTypes,
+  ...ViewPropTypes,
 
   /**
    * The path template of the local tile source.

package/lib/components/MapMarker.js

@@ -1,16 +1,17 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import {
-  ColorPropType,
   StyleSheet,
   Platform,
   NativeModules,
   Animated,
   Image,
   findNodeHandle,
-  ViewPropTypes,
-  View,
 } from 'react-native';
+import {
+  ColorPropType,
+  ViewPropTypes,
+} from 'deprecated-react-native-prop-types';
 
 import decorateMapComponent, {
   SUPPORTED,
@@ -24,11 +25,8 @@ const viewConfig = {
   },
 };
 
-// if ViewPropTypes is not defined fall back to View.propType (to support RN < 0.44)
-const viewPropTypes = ViewPropTypes || View.propTypes;
-
 const propTypes = {
-  ...viewPropTypes,
+  ...ViewPropTypes,
 
   // TODO(lmr): get rid of these?
   identifier: PropTypes.string,
@@ -189,6 +187,8 @@ const propTypes = {
 
   draggable: PropTypes.bool,
 
+  tappable: PropTypes.bool,
+
   /**
    * Sets whether this marker should track view changes true.
    */
@@ -333,14 +333,14 @@ class MapMarker extends React.Component {
 
     return (
       <AIRMapMarker
-        ref={ref => {
+        ref={(ref) => {
           this.marker = ref;
         }}
         {...this.props}
         image={image}
         icon={icon}
         style={[styles.marker, this.props.style]}
-        onPress={event => {
+        onPress={(event) => {
           if (this.props.stopPropagation) {
             event.stopPropagation();
           }

package/lib/components/MapOverlay.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { View, StyleSheet, Image, Animated } from 'react-native';
+import { StyleSheet, Image, Animated } from 'react-native';
+import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 
 import decorateMapComponent, {
   SUPPORTED,
@@ -15,7 +16,7 @@ const viewConfig = {
 };
 
 const propTypes = {
-  ...View.propTypes,
+  ...ViewPropTypes,
   // A custom image to be used as overlay.
   image: PropTypes.any.isRequired,
   // Top left and bottom right coordinates for the overlay

package/lib/components/MapPolygon.js

@@ -1,17 +1,17 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { ColorPropType, ViewPropTypes, View } from 'react-native';
+import {
+  ColorPropType,
+  ViewPropTypes,
+} from 'deprecated-react-native-prop-types';
 import decorateMapComponent, {
   USES_DEFAULT_IMPLEMENTATION,
   SUPPORTED,
 } from './decorateMapComponent';
 import * as ProviderConstants from './ProviderConstants';
 
-// if ViewPropTypes is not defined fall back to View.propType (to support RN < 0.44)
-const viewPropTypes = ViewPropTypes || View.propTypes;
-
 const propTypes = {
-  ...viewPropTypes,
+  ...ViewPropTypes,
 
   /**
    * An array of coordinates to describe the polygon
@@ -175,7 +175,7 @@ class MapPolygon extends React.Component {
     return (
       <AIRMapPolygon
         {...this.props}
-        ref={ref => {
+        ref={(ref) => {
           this.polygon = ref;
         }}
         onLayout={