[Bug]: Issues with Images Component Not Updating and Mapbox.Image Failing to Load Local Images

[xiaoosnggao]

Mapbox Implementation

Mapbox

Mapbox Version

11.6.0

React Native Version

0.74.5

Platform

iOS

@rnmapbox/maps version

10.1.31

Standalone component to reproduce

import React from 'react';
import { Image as RNImage, View } from 'react-native';
import Mapbox, { Images, MapView, ShapeSource, SymbolLayer } from '@rnmapbox/maps';

const backgroundLayer = require('@/assets/images/backgroundLayer.png');

const Footprint = () => {
  const mapImages = [
    {
      height: 100,
      id: '38ef4500-295e-47ec-93a2-d1af3cdb45a7',
      index: 0,
      name: 'example0',
      source: {
        uri: 'file:///var/mobile/Containers/Data/Application/66607413-1834-41D9-A83E-F32FE7CFF65B/Documents/images/e2057b0d-f11b-4fcb-b302-8e3420b0693f.jpg',
      },
      width: 100,
    },
    // other images...
  ];

  const mapFeature = {
    type: 'FeatureCollection',
    features: [
      {
        type: 'Feature',
        id: '38ef4500-295e-47ec-93a2-d1af3cdb45a7',
        geometry: { type: 'Point', coordinates: [116.290679478166, 40.1460506823713] },
        properties: { icon: 'example0' },
      },
      // other features...
    ],
  };

  if (mapImages.length < 1) return null;

  return (
    <MapView style={{ flex: 1 }}>
      <Mapbox.UserLocation>
        <Mapbox.Camera
          defaultSettings={{
            zoomLevel: 14,
          }}
          followUserLocation
          followUserMode={Mapbox.UserTrackingMode.Follow}
        />
      </Mapbox.UserLocation>

      <View style={{ height: 0 }}>
        <Images>
          {mapImages.map((item) => (
            <Mapbox.Image key={item.id} name={item.name}>
              <View style={{ width: 100, height: 120 }}>
                <RNImage
                  source={backgroundLayer}
                  style={{ width: 100, height: 120 }}
                />
                <RNImage
                  source={{ uri: item.source.uri }}
                  style={{
                    position: 'absolute',
                    top: 5,
                    left: 15,
                    width: 70,
                    height: 70,
                  }}
                />
              </View>
            </Mapbox.Image>
          ))}
        </Images>
      </View>

      <ShapeSource id="shape-source-id-0" shape={mapFeature}>
        <SymbolLayer id="symbol-id" style={{ iconImage: 'example0' }} />
      </ShapeSource>
    </MapView>
  );
};

export default Footprint;

Observed behavior and steps to reproduce

I am encountering two issues while using @rnmapbox/maps:

1.	Images Component Not Updating:

When the mapImages array changes, the Images component doesn’t update to reflect the new images. It appears to not trigger a re-render even when the data changes.

2.	Mapbox.Image Failing to Load Local Images:

When using RNImage under Mapbox.Image, local image files stored in paths like:

file:///var/mobile/Containers/Data/Application/66607413-1834-41D9-A83E-F32FE7CFF65B/Documents/images/1383b5d6-2315-4d12-93d0-6e47afb5c811.png

are not loading correctly.

Expected behavior

No response

Notes / preliminary analysis

1.	Update the mapImages array with different image data.
2.	Observe that the Images component does not re-render with the new data.
3.	Load local images using Mapbox.Image with file URIs from the app’s documents directory.

Additional links and references

No response

[xiaoosnggao]

I think I have found a solution. I can call Image's refresh function to update it when RNImge's onLoad