Mapbox error Exception in onDidFinishLoadingStyle

[ErTurco]

trafficstars

Steps to Trigger Behavior

1. Execute attached code

Expected Behavior

Map should be visible on Android device without crash

Actual Behavior

The app returns error on Android device (works fine on iOS device)

Mapbox error Exception in onDidFinishLoadingStyle {"level": "error", "message": "Exception in onDidFinishLoadingStyle", "tag": "Mbgl-MapChangeReceiver"}

Screenshots (if applicable)

Screen taken on iOS device

Version(s) affected

• Platform: Android
• OS version: Android 14
• Device type: Samsung Galaxy A54 5G
• Emulator/ Simulator: No
• Development OS: MacOS Sonoma 14.5
• maplibre-react-native Version: 10.0.0-alpha.4
• React Native Version 0.74.2

Additional context

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

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 {
  render() {
    return (
      <View style={styles.page}>
        <MapLibreGL.MapView
          style={styles.map}>
            <MapLibreGL.Camera centerCoordinate={[-87.622088, 41.878781]} zoomLevel={10}/>
            <MapLibreGL.VectorSource
              tileUrlTemplates={[
                'https://tiles.mapillary.com/maps/vtp/mly1_public/2/{z}/{x}/{y}?access_token=<TOKEN>,
              ]}
              maxZoomLevel={12}>
                <MapLibreGL.LineLayer
                id="mapillary-lines"
                sourceLayerID="sequence"
                style={{
                  lineCap: 'round',
                  lineJoin: 'round',
                  lineOpacity: 0.6,
                  lineColor: 'rgb(53, 175, 109)',
                  lineWidth: 2.0,
                }} />
            </MapLibreGL.VectorSource>
        </MapLibreGL.MapView>
      </View>
    );
  }
}

[tyrauber]

@ErTurco, Thanks for the bug report. FYI: Might want to rotate that access_token.

[mohanedmoh]

@ErTurco there is still history version of the comment with the token on it, I think you need to remove the comment and add it again without the token

[ErTurco]

@ErTurco there is still history version of the comment with the token on it, I think you need to remove the comment and add it again without the token

I can't delete the comment

[mohanedmoh]

you may need to remove the issue and reopen it, or change your token from mapbox

[ErTurco]

I can't delete the issue, in the actions I don't have delete but just edit.

[ErTurco]

I remembered that I took the URL (with token) for the tiles from the public example: https://docs.mapbox.com/mapbox-gl-js/example/third-party/, a Mapbox public page.

[KiwiKilian]

This is fixed with the latest beta on Android emulator:

I've adopted your reproduction into the bug reproduction example with the publicly visible token from the docs:

import {
  Camera,
  LineLayer,
  MapView,
  VectorSource,
} from "@maplibre/maplibre-react-native";

import { sheet } from "../styles/sheet";

export default function BugReport() {
  return (
    <MapView style={sheet.matchParent}>
      <Camera centerCoordinate={[-87.622088, 41.878781]} zoomLevel={10} />
      <VectorSource
        id="test"
        tileUrlTemplates={[
          "https://tiles.mapillary.com/maps/vtp/mly1_public/2/{z}/{x}/{y}?access_token=MLY|4142433049200173|72206abe5035850d6743b23a49c41333",
        ]}
        maxZoomLevel={12}
      >
        <LineLayer
          id="mapillary-lines"
          sourceLayerID="sequence"
          style={{
            lineCap: "round",
            lineJoin: "round",
            lineOpacity: 0.6,
            lineColor: "rgb(53, 175, 109)",
            lineWidth: 2.0,
          }}
        />
      </VectorSource>
    </MapView>
  );
}

Happy to reopen if the problem still persist. If so, please provide another reproduction.