react-native-maps 0.29.0 → 0.29.4

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Change Log
 
+## 0.29.3 - (August 29, 2021)
+
+* Common: [#3920](https://github.com/react-native-maps/react-native-maps/pull/3920) GeoJSON onPress Crash Fix and Marker Customization Options
+* Common: [#3930](https://github.com/react-native-maps/react-native-maps/pull/3930) Updated peer deps to maintain compatibility with expo init
+
+## 0.29.2 - (July 5, 2021)
+
+* Android: **Revert** [#3797](https://github.com/react-native-maps/react-native-maps/pull/3797) Allow a previously dashed line to be made solid
+
+## 0.29.1 - (July 5, 2021)
+
+* Common: [#3855](https://github.com/react-native-maps/react-native-maps/pull/3855) Fix crashes related to getAddressFromCoordinates for android and iOS
+* Common: [#3871](https://github.com/react-native-maps/react-native-maps/pull/3871) Allow React 17 peer dependency
+
 ## 0.29.0 - (June 8, 2021)
 
 * Common: [#3779](https://github.com/react-native-maps/react-native-maps/pull/3779) Polyline tappable feature on GeoJson

package/README.md

@@ -118,7 +118,7 @@ import { Marker } from 'react-native-maps';
 ```
 
 ### Rendering a Marker with a custom image
-1. You need to generate an `png` image with various resolution (lets call them `custom_pin`) - for more infromation go to [Android](https://developer.android.com/studio/write/image-asset-studio#access), [iOS](https://developer.apple.com/library/archive/documentation/ToolsLanguages/Conceptual/Xcode_Overview/AddingImages.html)
+1. You need to generate an `png` image with various resolution (lets call them `custom_pin`) - for more information go to [Android](https://developer.android.com/studio/write/image-asset-studio#access), [iOS](https://developer.apple.com/library/archive/documentation/ToolsLanguages/Conceptual/Xcode_Overview/AddingImages.html)
 2. put all images in Android drawables and iOS assets dir 
 3. Now you can use the following code:
 ```jsx
@@ -236,7 +236,7 @@ See [OSM Wiki](https://wiki.openstreetmap.org/wiki/Category:Tile_downloading) fo
 
 ### Overlaying other components on the map
 
-Place components you that wish to overlay `MapView` underneath the `MapView` closing tag. Absolutely position these elements.
+Place components that you wish to overlay `MapView` underneath the `MapView` closing tag. Absolutely position these elements.
 
 ```jsx
 render() {
@@ -457,7 +457,7 @@ render() {
 Markers can also accept an `AnimatedRegion` value as a coordinate.
 
 ```jsx
-import Mapview, { AnimatedRegion, Marker } from 'react-native-maps';
+import Mapview, { AnimatedRegion, MarkerAnimated } from 'react-native-maps';
 
 getInitialState() {
   return {
@@ -491,44 +491,7 @@ componentWillReceiveProps(nextProps) {
 render() {
   return (
     <MapView initialRegion={...}>
-      <MapView.Marker.Animated
-        ref={marker => { this.marker = marker }}
-        coordinate={this.state.coordinate}
-      />
-    </MapView>
-  );
-}
-```
-
-If you need a smoother animation to move the marker on Android, you can modify the previous example:
-
-```jsx
-// ...
-
-componentWillReceiveProps(nextProps) {
-  const duration = 500
-
-  if (this.props.coordinate !== nextProps.coordinate) {
-    if (Platform.OS === 'android') {
-      if (this.marker) {
-        this.marker.animateMarkerToCoordinate(
-          nextProps.coordinate,
-          duration
-        );
-      }
-    } else {
-      this.state.coordinate.timing({
-        ...nextProps.coordinate,
-        duration
-      }).start();
-    }
-  }
-}
-
-render() {
-  return (
-    <MapView initialRegion={...}>
-      <Marker.Animated
+      <MarkerAnimated
         ref={marker => { this.marker = marker }}
         coordinate={this.state.coordinate}
       />

package/docs/geojson.md

@@ -15,6 +15,7 @@
 | `miterLimit` | `Number`     |  | 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. |
 | `zIndex` | `Number`     |  | Layer level of the z-index value |
 | `onPress` | `Function`     |  | returns the selected overlay value with the onPress functionality |
+| `markerComponent` | `React Node`     |  | Component to render in place of the default marker when the overlay type is a `point` 
 
 ## Example
 

package/docs/marker.md

@@ -7,7 +7,7 @@
 | `title` | `String` |  | 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.
 | `description` | `String` |  | The description 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.
 | `image` | `ImageSource`* |  | A custom image to be used as the marker's icon. Only local image resources are allowed to be used.
-| `icon` | `ImageSource`* |  | Marker icon to render (equivalent to `icon` property of GMSMarker Class). **Note:** Google maps only!
+| `icon` | `ImageSource`* |  | Marker icon to render (equivalent to `icon` property of GMSMarker Class). Only local image resources are allowed to be used. **Note:** Google maps only!
 | `pinColor` | `Color` |  | If no custom marker view or custom image is provided, the platform default pin will be used, which can be customized by this color. Ignored if a custom marker is being used.<br/><br/> For Android, the set of available colors is limited. Unsupported colors will fall back to red. See [#887](https://github.com/react-community/react-native-maps/issues/887) for more information.
 | `coordinate` | `LatLng` |  | The coordinate for the marker.
 | `centerOffset` | `Point` | (0, 0) | The offset (in points) at which to display the view.<br/><br/> By default, the center point of an annotation view is placed at the coordinate point of the associated annotation. You can use this property to reposition the annotation view as needed. This x and y offset values are measured in points. Positive offset values move the annotation view down and to the right, while negative values move it up and to the left.<br/><br/> For Google Maps, see the `anchor` prop.
@@ -72,7 +72,7 @@ type Point {
 
 ## Children Components
 
-Children components can be added within a Marker and rendered content will replace the marker symbol.  This is a way of creating custom markers and allowing use of native SVGs.
+Children components can be added within a Marker and rendered content will replace the marker symbol. This is a way of creating custom markers and allowing use of native SVGs.
 
 Example:
 ```

package/index.d.ts

@@ -265,6 +265,7 @@ declare module 'react-native-maps' {
     compassOffset?: { x: number; y: number };
     tintColor?: string;
 
+    onMapLoaded?: () => void;
     onMapReady?: () => void;
     onKmlReady?: (values: KmlMapEvent) => void;
     onRegionChange?: (region: Region, details?: { isGesture: boolean }) => void;
@@ -592,6 +593,9 @@ declare module 'react-native-maps' {
     lineCap?: 'butt' | 'round' | 'square';
     lineJoin?: 'miter' | 'round' | 'bevel';
     miterLimit?: number;
+    zIndex?: number;
+    onPress?: (event: MapEvent) => void;
+    markerComponent?: React.ReactNode
   }
 
   export class Geojson extends React.Component<GeojsonProps, any> {}

package/lib/android/src/main/java/com/airbnb/android/react/maps/AirMapModule.java

@@ -212,6 +212,10 @@ public class AirMapModule extends ReactContextBaseJavaModule {
         try {
           List<Address> list =
                   geocoder.getFromLocation(coordinate.getDouble("latitude"),coordinate.getDouble("longitude"),1);
+          if (list.isEmpty()) {
+            promise.reject("Can not get address location");
+            return;
+          }
           Address address = list.get(0);
 
           WritableMap addressJson = new WritableNativeMap();

package/lib/android/src/main/java/com/airbnb/android/react/maps/AirMapPolyline.java

@@ -100,7 +100,6 @@ public class AirMapPolyline extends AirMapFeature {
 
   private void applyPattern() {
     if(patternValues == null) {
-      polyline.setPattern(null);
       return;
     }
     this.pattern = new ArrayList<>(patternValues.size());

package/lib/components/Geojson.js

@@ -1,7 +1,171 @@
 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';
+
+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,
+
+  /**
+   * 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,
+};
+
+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 && props.onPress(overlay)}
+            >
+              {props.markerComponent}
+            </Marker>
+          );
+        }
+        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 && 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 && props.onPress(overlay)}
+            />
+          );
+        }
+      })}
+    </React.Fragment>
+  );
+};
+
+Geojson.propTypes = propTypes;
+
+export default Geojson;
 
 export const makeOverlays = features => {
   const points = features
@@ -141,64 +305,3 @@ const getStrokeWidth = (props, overlay) => {
   }
   return 0;
 };
-
-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/ios/AirMaps/AIRMapManager.m

@@ -575,7 +575,7 @@ RCT_EXPORT_METHOD(getAddressFromCoordinates:(nonnull NSNumber *)reactTag
         if (![view isKindOfClass:[AIRMap class]]) {
             reject(@"Invalid argument", [NSString stringWithFormat:@"Invalid view returned from registry, expecting AIRMap, got: %@", view], NULL);
         } else {
-            if (coordinate != nil ||
+            if (coordinate == nil ||
                 ![[coordinate allKeys] containsObject:@"latitude"] ||
                 ![[coordinate allKeys] containsObject:@"longitude"]) {
                 reject(@"Invalid argument", [NSString stringWithFormat:@"Invalid coordinate format"], NULL);
@@ -599,6 +599,8 @@ RCT_EXPORT_METHOD(getAddressFromCoordinates:(nonnull NSNumber *)reactTag
                             @"countryCode" : [NSString stringWithFormat:@"%@", placemark.ISOcountryCode],
                             @"country" : [NSString stringWithFormat:@"%@", placemark.country],
                         });
+                    } else {
+                        reject(@"Invalid argument", [NSString stringWithFormat:@"Can not get address location"], NULL);
                     }
             }];
         }

package/package.json

@@ -3,7 +3,7 @@
   "description": "React Native Mapview component for iOS + Android",
   "main": "index.js",
   "author": "Leland Richardson <leland.m.richardson@gmail.com>",
-  "version": "0.29.0",
+  "version": "0.29.4",
   "scripts": {
     "lint": "./node_modules/eslint/bin/eslint.js .",
     "ci": "npm run lint"
@@ -22,9 +22,9 @@
     "mapkit"
   ],
   "peerDependencies": {
-    "react": ">= 16.0 || < 17.0",
+    "react": ">= 16.0 || < 18.0",
     "react-native": ">= 0.51",
-    "react-native-web": "^0.11"
+    "react-native-web": ">= 0.11"
   },
   "devDependencies": {
     "@react-native-community/eslint-config": "0.0.5",

package/.github/ISSUE_TEMPLATE/question.md

@@ -1,18 +0,0 @@
----
-name: "\U0001F914 Questions and help"
-about: Use this if there is something not clear about the code or its docs.
-title: ''
-labels: question
-assignees: ''
-
----
-
-# Question
-
-<!--
-Before submitting it, please ensure that this was not already asked in another issue, or on StackOverflow. Ideally, you should always refer to StackOverflow first.
-
-This issue should serve for you to ask a question about the library to the maintainers and other fellow developers - remember that even if the issue gets closed, the conversation can move forward 🤗
-
-Also, ideally this issue should culminate in a PR to the documentation for this library so that future developers will have that doubt cleared.
--->