[Bug]: Changing map style when using a raster layer causes error

Mapbox Implementation

Mapbox

Mapbox Version

10.17.0

React Native Version

0.74.1

Platform

iOS

@rnmapbox/maps version

10.1.24

Standalone component to reproduce

import React from "react";
import { StyleSheet, View, Button } from "react-native";

import Mapbox, {
  Camera,
  MapView,
  RasterLayer,
  RasterSource,
} from "@rnmapbox/maps";
import { useState } from "react";

const STYLE_1 = {
  styleName: "Style 1",
  mapStyle: "mapbox://styles/mapbox/streets-v12",
  wmsTileUrls: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
};
const STYLE_2 = {
  styleName: "Style 2",
  mapStyle: "mapbox://styles/mapbox/satellite-v9",
  wmsTileUrls: "https://a.tile.opentopomap.org/{z}/{x}/{y}.png",
};

export default function TabTwoScreen() {
  const [mapStyle, setMapStyle] = useState(STYLE_1);

  return (
    <>
      <MapView style={styles.mapView} styleURL={mapStyle.mapStyle}>
        <Camera
          defaultSettings={{
            centerCoordinate: [-87.622088, 41.878781],
            zoomLevel: 10,
          }}
        />
        <RasterSource
          id={mapStyle.styleName}
          tileSize={256}
          tileUrlTemplates={[mapStyle.wmsTileUrls]}
        >
          <RasterLayer
            id={`${mapStyle.styleName}-raster`}
            sourceID={mapStyle.styleName}
            layerIndex={1}
            style={{ visibility: "visible" }}
          />
        </RasterSource>
      </MapView>
      <View style={{ width: "100%", backgroundColor: "white" }}>
        <Button onPress={() => setMapStyle(STYLE_1)} title="Style1"></Button>
        <Button onPress={() => setMapStyle(STYLE_2)} title="Style2"></Button>
      </View>
    </>
  );
}

const styles = StyleSheet.create({
  mapView: { height: "80%", width: "100%" },
});

Observed behavior and steps to reproduce

Toggle between styles using Style1 / Style2 buttons. This will cause the following error to be written to the console:

Mapbox [error] RNMBXLayer.removeFromMap: removing layer failed for layer Style N-raster: Layer Style N-raster does not exist

Video

Expected behavior

No error should happen when switching styles

Notes / preliminary analysis

It's related to using a raster source (or possibly other source) when switching map styles. Possibly mapbox tries to remove the layer too late, causing the error.

Additional links and references

No response

Start with the standalone React Native reproduction and trace the RNMBXLayer.removeFromMap error while toggling Mapbox styles with a RasterSource and RasterLayer. Compare the layer-removal lifecycle during style changes; done means switching between Style 1 and Style 2 produces no removal error.