images props for MapboxGL.ShapeSource not reactive to state change

[seeya]

Hi, I am trying to load dynamically images of profile pictures for pins to be displayed on the map. The issue I am facing is when I update the state, the property images passed into the component MapboxGL.ShapeSource does not re-render the map to show the updated images. I can confirm that the loading of images is working as if I hardcode the values for images={ id: {uri: imageLink}}, it works. It seems like I can only preload all images at the start, and not whenever a state gets updated. Not sure if this is the current implementation of the library.

My current implementation is something like this.

// Generate the Feature object
    const markers = MapStore.nearby_users.map(user => {
      return {
        type: "Feature",
        geometry: {
          type: "Point",
          coordinates: [user.location.lng, user.location.lat]
        },
        id: user.id,
        properties: {
          icon: user.id,
          name: user.name
        }
      };
    });
    this.setState({ markers });

// Initialize the map with the ShapSource and SymbolLayer
<MapboxGL.MapView...>
          <MapboxGL.ShapeSource
            id="profilePins"
            shape={{
              type: "FeatureCollection",
              features: this.state.markers
            }}
            images={MapStore.profile_pin} // basically a object in the format { iconName: {uri: imageLink} }
            cluster
            clusterMaxZoomLevel={14}
            clusterRadius={50}
          >
            <MapboxGL.SymbolLayer id="singlePoint" style={layerStyles.icon} />
          </MapboxGL.ShapeSource>

// The dynamic style which will get the property icon from the Feature object
const layerStyles = MapboxGL.StyleSheet.create({
  icon: {
    iconImage: "{icon}",
    iconAllowOverlap: true,
    iconIgnorePlacement: true,
    iconSize: 1
  }
});

[seeya]

With reference to this issue #1204, I managed to get it to work in a hacky way but updating the key of MapboxGL.ShapeSource once an update is done. Not the best fix, but at least it works for now.

[arnaudambro]

@seeya can you share your working code ? with mine, even an update of the key prop of ShapeSource does not update my markers...