Dark map and features on Android platform

[ErTurco]

Steps to Trigger Behavior

1. Open the basic app attached
2. Refresh a lot of times

Expected Behavior

The map and the marker are visible without a "dark cover", like in iOS example.

Actual Behavior

In Android emulator (but I think also on physical device) there is a "dark cover" over the map and markers. Sometimes the marker is completely black (when I change the zoom value).

Screenshots (if applicable)

Version(s) affected

• Platform: Android
• OS version: Android API Level 33
• Device type: Pixel 7
• Emulator/ Simulator: Yes
• Development OS: Sonoma 14.4.1
• maplibre-react-native Version 10.0.0-alpha.4
• React Native Version 0.74.1

Code (App.tsx)

import React, {Component} from 'react';
import {StyleSheet, View} from 'react-native';
import MapLibreGL from '@maplibre/maplibre-react-native';

// Will be null for most users (only Mapbox authenticates this way).
// Required on Android. See Android installation notes.
MapLibreGL.setAccessToken(null);

const styles = StyleSheet.create({
  page: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  map: {
    flex: 1,
    alignSelf: 'stretch',
  },
});

export default class App extends Component {
  getFeatures = () => {
    return {
        type: 'FeatureCollection',
        features: [
          {"geometry": {"coordinates": [12.332746, 42.90333], "type": "Point"}, "properties": {"alt": "", "angle": 0, "className": "", "cursor": "inherit", "data": {}, "draggable": false, "html": "", "iconOffset": [-0, -20], "iconPosition": [0.5, 1], "iconSize": 1.0, "iconUrl": "https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678111-map-marker-60.png", "id": "Geometry_0_1715335114733", "interactive": true, "label": "", "multiplier": 0.2, "opacity": 1, "pointer-events": "visiblePainted", "sizeX": 40, "sizeY": 40, "textDesc": "", "zIndex": 1}, "type": "Feature"}
        ]
    }
  }

  render() {
    return (
      <View style={styles.page}>
        <MapLibreGL.MapView
          style={styles.map}>
            <MapLibreGL.Camera centerCoordinate={[12.337979838552297, 42.90816824005347]} zoomLevel={12}/>
            <MapLibreGL.Images images={{
                'https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678111-map-marker-60.png': { uri: 'https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678111-map-marker-60.png' }
            }}>
              <View></View>
            </MapLibreGL.Images>
            <MapLibreGL.ShapeSource
                    id="shape"
                    lineMetrics={true}
                    shape={this.getFeatures()}>
                <MapLibreGL.SymbolLayer
                    id="symbolPointLayer"
                    style={{
                      iconImage: ["get", "iconUrl"],
                      iconSize: ["get", "iconSize"],
                      iconAllowOverlap: true,
                      iconOffset: ["get", "iconOffset"],
                      iconRotate: ["get", "angle"],
                      iconOpacity: ["get", "opacity"],
                  }}
                    filter={['has', 'iconUrl']}
                />
            </MapLibreGL.ShapeSource>
        </MapLibreGL.MapView>
      </View>
    );
  }
}

[mohanedmoh]

I have faced this issue with specific simulator types, I read in some StackOverflow posts that it's related to the GPU of the emulator.

[KiwiKilian]

Closing as probably an emulator problem. If anyone else notices this, feel free to chime in!