make it possible to change image for existing image ID on Android

[Buthrakaur]

make it possible to change image for existing image ID on Android - port of the same fix in rnmapbox rnmapbox/maps#3431

[tyrauber]

Hey @Buthrakaur, thanks for this! Code looks good. Would it be possible to add an example or test?

[Buthrakaur]

Hello @tyrauber , thanks for quick reaction. You can see example in the original PR here: rnmapbox/maps#3431 - I believe it should be good enough as it was accepted by @mfazekas

[Buthrakaur]

Hello @tyrauber , any update, please?

[tyrauber]

@KiwiKilian, thoughts? Looks pretty straightforward.

[KiwiKilian]

@Buthrakaur could you please provide a minimal example? It's not necessary to be committed, you can just add it as a comment here so we can copy-paste it and see what bug it should fix. You should start from this example and only add the code necessary so we can reproduce the issue and validate your fix.

[Buthrakaur]

Hello @KiwiKilian , here is it:

import { Images, MapView, ShapeSource, SymbolLayer } from '@maplibre/maplibre-react-native';
import React, { useEffect, useMemo, useState } from 'react';

export function IconUrlChanging() {
  const [currentTime, setCurrentTime] = useState(new Date());

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCurrentTime(new Date());
    }, 1000);

    return () => clearInterval(intervalId);
  }, []);

  const featuresCollection: GeoJSON.FeatureCollection = useMemo(() => {
    const features: GeoJSON.Feature[] = [];

    for (let i = 1; i <= 10; i++) {
      features.push({
        type: 'Feature',
        id: i,
        properties: {
          icon: 'icon1',
          title: `POI ${i}`,
        },
        geometry: {
          type: 'Point',
          coordinates: [14.4282 + i * 0.02, 50.0806125],
        },
      });
    }

    return { type: 'FeatureCollection', features };
  }, []);

  const images = useMemo(
    () => ({
      icon1: currentTime.getSeconds() % 2 === 0 ? 'https://placehold.co/32/orange/white/png' : 'https://placehold.co/32/blue/white/png',
    }),
    [currentTime]
  );

  return (
    <MapView style={{ flex: 1 }}>
      <Images images={images} />
      <ShapeSource id="ss-1" shape={featuresCollection}>
        <SymbolLayer id="sl-1" style={{ iconImage: ['get', 'icon'], iconSize: 1 / 2 }} />
      </ShapeSource>
    </MapView>
  );
}

[KiwiKilian]

Thanks! Will try to have a look soon!