Patch that preserves stroke width, stroke color, fill color, and marker color properties in geojson for react-native-maps

react-native-maps+0.27.1.patch

diff --git a/node_modules/react-native-maps/lib/components/Geojson.js b/node_modules/react-native-maps/lib/components/Geojson.js
index e72b56b..ddb69e2 100644
--- a/node_modules/react-native-maps/lib/components/Geojson.js
+++ b/node_modules/react-native-maps/lib/components/Geojson.js
@@ -93,17 +93,69 @@ const makeCoordinates = feature => {
   }
 };
 
+const doesOverlayContainProperty = (overlay, property) => {
+  // Geojson may have 0 for the opacity when intention is to not specify the
+  // opacity. Therefore, we evaluate the truthiness of the propery where 0
+  // would return false.
+  return (
+    overlay.feature &&
+    overlay.feature.properties &&
+    overlay.feature.properties[property]
+  );
+};
+
+const getRgbaFromHex = (hex, alpha = 1) => {
+  const [r, g, b] = hex.match(/\w\w/g).map(x => parseInt(x, 16));
+  return `rgba(${r},${g},${b},${alpha})`;
+};  
+
+const getColor = (props, overlay, colorType, overrideColorProp) => {
+  if (props.hasOwnProperty(overrideColorProp)) {
+    return props[overrideColorProp];
+  }
+  if (doesOverlayContainProperty(overlay, colorType)) {
+    let color = overlay.feature.properties[colorType];
+    const opacityProperty = colorType + "-opacity";
+    if (
+      doesOverlayContainProperty(overlay, opacityProperty) &&
+      color[0] === "#"
+    ) {
+      color = getRgbaFromHex(
+        color,
+        overlay.feature.properties[opacityProperty],
+      );
+    }
+    return color;
+  }
+  return null;
+};
+
+const getStrokeWidth = (props, overlay) => {
+  if (props.hasOwnProperty("strokeWidth")) {
+    return props["strokeWidth"];
+  }
+  if (doesOverlayContainProperty(overlay, "stroke-width")) {
+    return overlay.feature.properties["stroke-width"];
+  }
+  return null;
+}
+
 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 (
             <MapView.Marker
               key={index}
               coordinate={overlay.coordinates}
-              pinColor={props.color}
+              pinColor={markerColor}
             />
           );
         }
@@ -113,9 +165,9 @@ const Geojson = props => {
               key={index}
               coordinates={overlay.coordinates}
               holes={overlay.holes}
-              strokeColor={props.strokeColor}
-              fillColor={props.fillColor}
-              strokeWidth={props.strokeWidth}
+              strokeColor={strokeColor}
+              fillColor={fillColor}
+              strokeWidth={strokeWidth}
             />
           );
         }
@@ -124,8 +176,8 @@ const Geojson = props => {
             <MapView.Polyline
               key={index}
               coordinates={overlay.coordinates}
-              strokeColor={props.strokeColor}
-              strokeWidth={props.strokeWidth}
+              strokeColor={strokeColor}
+              strokeWidth={strokeWidth}
             />
           );
         }