Skip to content

[Bug]: localizeLabels doesn't support most Mapbox languages (e.g. nl, pl, el) and has no effect on the Standard style #4326

Closed

Description

@linhvovan29546

Mapbox Version

11.23.1

React Native Version

0.84.1

Platform

iOS, Android

@rnmapbox/maps version

10.3.7 (main)

Standalone component to reproduce

import React from 'react';
import { MapView, Camera } from '@rnmapbox/maps';

const BugReportExample = () => (
  <MapView
    style={{ flex: 1 }}
    styleURL="mapbox://styles/mapbox/streets-v12" // also try "mapbox://styles/mapbox/standard"
    localizeLabels={{ locale: 'nl' }} // also try 'pl', 'el'
  >
    <Camera defaultSettings={{ centerCoordinate: [12.0, 50.5], zoomLevel: 3.6 }} />
  </MapView>
);

export default BugReportExample;

Observed behavior and steps to reproduce

  1. Render the component above with locale: 'nl' (or 'pl', 'el') on the Street style.
    • Labels stay in English (or in the previous language when switching at runtime).
    • iOS logs: RNMBXMapView.applyLocalizeLabels() MapError: Locale: nl (fixed nl) is currently not supported
    • Android logs: [maps-android\LocalizationPluginImpl]: Locale: nl is not supported.
  2. Switch to the Standard style (mapbox://styles/mapbox/standard) and use locale: 'es'.
    • Labels stay in English even for a "supported" language.
  3. (Android) Render with localizeLabels set, then remove the prop.
    • The app throws Dynamic value from Object is not a ReadableMap (RNMBXMapViewManager.kt:133).

Reproduced on the example app: iOS simulator (iOS 18.6) and Android emulator (API 35).

Image

Expected behavior

localizeLabels should work for every language listed in the Mapbox internationalization docs
(43 languages, including nl, pl and el), on both classic styles and the Standard style:
https://docs.mapbox.com/help/dive-deeper/maps-internationalization/

Removing the prop should reset labels to the default language without crashing.

Notes / preliminary analysis

localizeLabels uses the SDK's client-side helper (StyleManager.localizeLabels on iOS, the
maps-localization extension on Android). It rewrites ["get", "name_xx"] in symbol layers'
text-field, so:

  • it only supports the 13 languages that have name_* fields in Mapbox Streets v8
    (ar de en es fr it ja ko pt ru vi zh-Hans zh-Hant); the list is hard-coded in both SDKs;
  • it only sees top-level layers, so it does nothing on Standard, whose labels live in the
    basemap style import. On Android the helper even throws there:
    "Mapbox Standard style does not support client-side runtime localization. Consider using
    Mapbox internationalization capability instead" (see [Bug]: Android Crash when using the standard mapbox style #4095).

Mapbox's recommended way is the settings service: MapboxCommonSettings.language /
MapboxCommonSettings.worldview. Tiles are then requested already localized for any supported
language, on any style. This is already available in the SDK version we use (11.23.1).

Proposal: keep the localizeLabels prop API unchanged. Without layerIds, set the language
through the settings service. With layerIds, keep using the client-side helper as today.
Notes from prototyping:

  • the map engine reads this key from the persistent settings storage;
  • the setting is app-wide, so with several maps the last one set wins;
  • runtime switching works without reloading the style.

I have a working implementation tested on iOS and Android and can open a PR.

Additional links and references

No response

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    bug 🪲Something isn't working

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions