react-native-maps 0.29.1 → 0.30.0

package/lib/components/AnimatedRegion.js

@@ -8,37 +8,46 @@ 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) => {
+  return valueIn instanceof Animated.Value
+    ? valueIn
+    : 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 +104,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 +126,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

@@ -1,53 +1,244 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import Marker from './MapMarker';
 import Polyline from './MapPolyline';
 import Polygon from './MapPolygon';
+import { ColorPropType } from 'react-native';
 
-export const makeOverlays = features => {
+const propTypes = {
+  /**
+   * [Geojson](https://geojson.org/) description of object.
+   */
+  geojson: PropTypes.object.isRequired,
+
+  /**
+   * The stroke color to use for the path.
+   */
+  strokeColor: ColorPropType,
+
+  /**
+   * The fill color to use for the path.
+   */
+  fillColor: ColorPropType,
+
+  /**
+   * The stroke width to use for the path.
+   */
+  strokeWidth: PropTypes.number,
+
+  /**
+   * The offset (in points) at which to start drawing the dash pattern.
+   *
+   * Use this property to start drawing a dashed line partway through a segment or gap. For
+   * example, a phase value of 6 for the patter 5-2-3-2 would cause drawing to begin in the
+   * middle of the first gap.
+   *
+   * The default value of this property is 0.
+   *
+   * @platform ios
+   */
+  lineDashPhase: PropTypes.number,
+
+  /**
+   * Make the `Polygon` or `Polyline` tappable
+   *
+   */
+  tappable: PropTypes.boolean,
+
+  /**
+   * An array of numbers specifying the dash pattern to use for the path.
+   *
+   * The array contains one or more numbers that indicate the lengths (measured in points) of the
+   * line segments and gaps in the pattern. The values in the array alternate, starting with the
+   * first line segment length, followed by the first gap length, followed by the second line
+   * segment length, and so on.
+   *
+   * This property is set to `null` by default, which indicates no line dash pattern.
+   *
+   * @platform ios
+   */
+  lineDashPattern: PropTypes.arrayOf(PropTypes.number),
+
+  /**
+   * The line cap style to apply to the open ends of the path.
+   * The default style is `round`.
+   *
+   * @platform ios
+   */
+  lineCap: PropTypes.oneOf(['butt', 'round', 'square']),
+
+  /**
+   * The line join style to apply to corners of the path.
+   * The default style is `round`.
+   *
+   * @platform ios
+   */
+  lineJoin: PropTypes.oneOf(['miter', 'round', 'bevel']),
+
+  /**
+   * The limiting value that helps avoid spikes at junctions between connected line segments.
+   * The miter limit helps you avoid spikes in paths that use the `miter` `lineJoin` style. If
+   * the ratio of the miter length—that is, the diagonal length of the miter join—to the line
+   * thickness exceeds the miter limit, the joint is converted to a bevel join. The default
+   * miter limit is 10, which results in the conversion of miters whose angle at the joint
+   * is less than 11 degrees.
+   *
+   * @platform ios
+   */
+  miterLimit: PropTypes.number,
+
+  /**
+   * The order in which this tile overlay is drawn with respect to other overlays. An overlay
+   * with a larger z-index is drawn over overlays with smaller z-indices. The order of overlays
+   * with the same z-index is arbitrary. The default zIndex is 0.
+   *
+   * @platform android
+   */
+  zIndex: PropTypes.number,
+
+  /**
+   * Callback that is called when the user presses on the polygon
+   */
+  onPress: PropTypes.func,
+
+  /**
+   * Component to render in place of the default marker when the overlay type is a `point`
+   *
+   */
+  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 {
+    title,
+    image,
+    zIndex,
+    onPress,
+    lineCap,
+    lineJoin,
+    tappable,
+    miterLimit,
+    lineDashPhase,
+    lineDashPattern,
+    markerComponent,
+  } = props;
+  const overlays = makeOverlays(props.geojson.features);
+  return (
+    <React.Fragment>
+      {overlays.map((overlay, index) => {
+        const fillColor = getColor(props, overlay, 'fill', 'fillColor');
+        const strokeColor = getColor(props, overlay, 'stroke', 'strokeColor');
+        const markerColor = getColor(props, overlay, 'marker-color', 'color');
+        const strokeWidth = getStrokeWidth(props, overlay);
+        if (overlay.type === 'point') {
+          return (
+            <Marker
+              key={index}
+              coordinate={overlay.coordinates}
+              image={image}
+              title={title}
+              pinColor={markerColor}
+              zIndex={zIndex}
+              onPress={() => onPress && onPress(overlay)}
+            >
+              {markerComponent}
+            </Marker>
+          );
+        }
+        if (overlay.type === 'polygon') {
+          return (
+            <Polygon
+              key={index}
+              coordinates={overlay.coordinates}
+              holes={overlay.holes}
+              strokeColor={strokeColor}
+              fillColor={fillColor}
+              strokeWidth={strokeWidth}
+              tappable={tappable}
+              onPress={() => onPress && onPress(overlay)}
+              zIndex={zIndex}
+            />
+          );
+        }
+        if (overlay.type === 'polyline') {
+          return (
+            <Polyline
+              key={index}
+              coordinates={overlay.coordinates}
+              strokeColor={strokeColor}
+              strokeWidth={strokeWidth}
+              lineDashPhase={lineDashPhase}
+              lineDashPattern={lineDashPattern}
+              lineCap={lineCap}
+              lineJoin={lineJoin}
+              miterLimit={miterLimit}
+              zIndex={zIndex}
+              tappable={tappable}
+              onPress={() => onPress && onPress(overlay)}
+            />
+          );
+        }
+      })}
+    </React.Fragment>
+  );
+};
+
+Geojson.propTypes = propTypes;
+
+export default Geojson;
+
+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);
 };
@@ -72,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)];
@@ -89,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 [];
   }
@@ -107,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})`;
 };
 
@@ -129,76 +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;
 };
-
-const Geojson = props => {
-  const overlays = makeOverlays(props.geojson.features);
-  return (
-    <React.Fragment>
-      {overlays.map((overlay, index) => {
-        const fillColor = getColor(props, overlay, 'fill', 'fillColor');
-        const strokeColor = getColor(props, overlay, 'stroke', 'strokeColor');
-        const markerColor = getColor(props, overlay, 'marker-color', 'color');
-        const strokeWidth = getStrokeWidth(props, overlay);
-        if (overlay.type === 'point') {
-          return (
-            <Marker
-              key={index}
-              coordinate={overlay.coordinates}
-              image={props.image}
-              pinColor={markerColor}
-              zIndex={props.zIndex}
-              onPress={() => props.onPress(overlay)}
-            />
-          );
-        }
-        if (overlay.type === 'polygon') {
-          return (
-            <Polygon
-              key={index}
-              coordinates={overlay.coordinates}
-              holes={overlay.holes}
-              strokeColor={strokeColor}
-              fillColor={fillColor}
-              strokeWidth={strokeWidth}
-              tappable={props.tappable}
-              onPress={() => props.onPress(overlay)}
-              zIndex={props.zIndex}
-            />
-          );
-        }
-        if (overlay.type === 'polyline') {
-          return (
-            <Polyline
-              key={index}
-              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(overlay)}
-            />
-          );
-        }
-      })}
-    </React.Fragment>
-  );
-};
-
-export default Geojson;

package/lib/components/MapCircle.js

@@ -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

@@ -73,13 +73,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/MapMarker.js

@@ -189,6 +189,8 @@ const propTypes = {
 
   draggable: PropTypes.bool,
 
+  tappable: PropTypes.bool,
+
   /**
    * Sets whether this marker should track view changes true.
    */
@@ -333,14 +335,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/MapPolygon.js

@@ -175,7 +175,7 @@ class MapPolygon extends React.Component {
     return (
       <AIRMapPolygon
         {...this.props}
-        ref={ref => {
+        ref={(ref) => {
           this.polygon = ref;
         }}
         onLayout={

package/lib/components/MapPolyline.js

@@ -147,7 +147,7 @@ class MapPolyline extends React.Component {
     return (
       <AIRMapPolyline
         {...this.props}
-        ref={ref => {
+        ref={(ref) => {
           this.polyline = ref;
         }}
       />