[Bug]: Unable to display layers using ShapeSource with it's URL prop

[HarshaZeitview]

Mapbox Implementation

Mapbox

Mapbox Version

default

React Native Version

0.79.2

Platform

iOS

@rnmapbox/maps version

10.1.39

Standalone component to reproduce

import React from 'react';
import {
  MapView,
  ShapeSource,
  LineLayer,
  Camera,
} from '@rnmapbox/maps';

const aLine = {
  type: 'LineString',
  coordinates: [
    [-74.00597, 40.71427],
    [-74.00697, 40.71527],
  ],
};

class BugReportExample extends React.Component {
  render() {
    return (
      <MapView style={{flex: 1}}>
        <Camera centerCoordinate={[-74.00597, 40.71427]} zoomLevel={14} />
        <ShapeSource id="idStreetLayer" url={'file://localPath.geojson'}>
          <LineLayer id="idStreetLayer" />
        </ShapeSource>
      </MapView>
    );
  }
}

Observed behavior and steps to reproduce

Actually when using the ShapeSource with the url prop the layers are not visible, but if same geoJson copied from the url and provided it through shape prop then working fine.
So it should expect same behaviour from the url prop as well.

Expected behavior

Layers should be visible on the map with URL props as well.

Notes / preliminary analysis

No errors and logs are displayed in console.

Additional links and references

No response

[HarshaZeitview]

Hi @mfazekas regarding above bug,
on IOS when i navigate to the file location -> node_modules/@rnmapbox/maps/ios/RNMBX/RNMBXShapeSourceComponentView.mm

at bottom of the file we have updatedProps like below,

• (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &)oldProps
  {
  const auto &oldViewProps = static_cast<const RNMBXShapeSourceProps &>(*_props);
  const auto &newViewProps = static_cast<const RNMBXShapeSourceProps &>(*props);

  RNMBX_OPTIONAL_PROP_NSString(id)
  RNMBX_OPTIONAL_PROP_BOOL(existing)
  RNMBX_OPTIONAL_PROP_NSString(shape)
  RNMBX_OPTIONAL_PROP_NSNumber(cluster)
  RNMBX_OPTIONAL_PROP_NSNumber(clusterRadius)
  RNMBX_OPTIONAL_PROP_NSNumber(clusterMaxZoomLevel)
  RNMBX_OPTIONAL_PROP_NSDictionary(clusterProperties)
  RNMBX_OPTIONAL_PROP_NSNumber(maxZoomLevel)
  RNMBX_OPTIONAL_PROP_NSNumber(buffer)
  RNMBX_OPTIONAL_PROP_NSNumber(tolerance)
  RNMBX_OPTIONAL_PROP_NSNumber(lineMetrics)
  RNMBX_OPTIONAL_PROP_BOOL(hasPressListener)
  RNMBX_OPTIONAL_PROP_NSDictionary(hitbox)

  [super updateProps:props oldProps:oldProps];
  }

so on the above props, i have added url like below,
RNMBX_OPTIONAL_PROP_NSString(url)

The ShapeSource works fine when using the url prop. Could you please check if similar cases might have been missed? If so, kindly consider fixing them or creating a patch file to address any additional missed scenarios.

Thanks!

[mfazekas]

Pls create a Pr! Thanks for looking into it

[HarshaZeitview]

ohh okay thanks for it, then will check for Android too and will try to raise PR.
do you know same issue might have on Android too ?.

[HarshaZeitview]

hi @mfazekas raised pr could you please check on it.

[Rhym]

I also have this issue, would love to see the patch merged. For the moment I am using this patch package:

diff --git a/node_modules/@rnmapbox/maps/ios/RNMBX/RNMBXShapeSourceComponentView.mm b/node_modules/@rnmapbox/maps/ios/RNMBX/RNMBXShapeSourceComponentView.mm
index 8ae0caf..95c1586 100644
--- a/node_modules/@rnmapbox/maps/ios/RNMBX/RNMBXShapeSourceComponentView.mm
+++ b/node_modules/@rnmapbox/maps/ios/RNMBX/RNMBXShapeSourceComponentView.mm
@@ -97,6 +97,7 @@ - (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &
   RNMBX_OPTIONAL_PROP_NSString(id)
   RNMBX_OPTIONAL_PROP_BOOL(existing)
   RNMBX_OPTIONAL_PROP_NSString(shape)
+  RNMBX_OPTIONAL_PROP_NSString(url)
   RNMBX_OPTIONAL_PROP_NSNumber(cluster)
   RNMBX_OPTIONAL_PROP_NSNumber(clusterRadius)
   RNMBX_OPTIONAL_PROP_NSNumber(clusterMaxZoomLevel)

[ljukas]

Affected by this aswell, will use patch until resolved

[FrancoisVA]

Same issue, patch worked.
"react-native": "0.79.5"
"@rnmapbox/maps": "^10.1.40"