maplibre-react-native icon indicating copy to clipboard operation
maplibre-react-native copied to clipboard

Support for standard style JSON keys

Open niranjan-talkinglands opened this issue 4 weeks ago • 5 comments

Issue: MapLibre React Native does not support standard style JSON keys (e.g., fill-color)

When using MapLibre style JSON in MapLibre React Native, style properties defined in the standard MapLibre/Mapbox Style Spec are not applied.

For example:

"paint": {
  "fill-color": "#FF0000"
}

does not work in React Native, because the app expects:

fillColor: "#FF0000"

This means the mobile SDK requires camelCase (fillColor) instead of the official style JSON kebab-case (fill-color). This breaks compatibility with existing MapLibre style JSON used on web and servers, and forces manual transformation of style properties before rendering layers.

Expected behavior: React Native should accept standard MapLibre style JSON keys or provide a built-in conversion layer so styles can be reused across Web and RN without modification.

Actual behavior: Layers render without styles unless JSON keys are rewritten from fill-colorfillColor, fill-opacityfillOpacity, etc.

Impact:

  • Cannot directly use standard MapLibre style JSON on mobile
  • Extra work to convert styles manually
  • Inconsistency between MapLibre Web and RN developer experience

Request: Add support for standard MapLibre style JSON properties in RN or provide an official utility to convert style definitions.

niranjan-talkinglands avatar Nov 10 '25 07:11 niranjan-talkinglands