rnmapbox / rnmapbox/maps

[Bug]: <Mapbox.Light> properties are ignored or cause errors (especially color and position array)

Open
#4,091 3 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

bug 🪲
Dominant language
Kotlin
Stars
2.9k
Forks
947
Avg merge
6d 37m
Merged PRs (30d)
1

Description

Mapbox Implementation

Mapbox

Mapbox Version

11.15.2

React Native Version

0.82.1

React Native Architecture

New Architecture (Fabric/TurboModules)

Platform

iOS, Android

@rnmapbox/maps version

10.2.7

Standalone component to reproduce
import React from 'react';
import {
  MapView,
  Light,
  Camera,
} from '@rnmapbox/maps';

class BugReportExample extends React.Component {
  render() {
    return (
      <MapView style={{flex: 1}} styleURL="mapbox://styles/mapbox/standard">
        <Camera
          centerCoordinate={[-122.39704267804365, 37.79723788407266]}
          pitch={80}
          heading={152.2}
          zoomLevel={16.7}
          animationMode={'flyTo'}
          animationDuration={1500}
        />
        <Light
          style={{
            anchor: 'viewport', // or 'map',
            color: '#0000ff', // doesn't work
            intensity: 0.85, // doesn't work
            position: [171, 60, 20], // doesn't work
          }}
        />
      </MapView>
    );
  }
}
Observed behavior and steps to reproduce

Issue with the color property:
Setting the color property to a direct HEX string, such as color: #0000ff, fails to change the scene's lighting color to yellow.
IOS error: Mapbox [error] Unexpeted value for color: 4278190335, retuning red

Expected behavior

The color property should correctly accept a HEX/RGB/HSL string, as described in the documentation.

The intensity and position properties should take precedence over the built-in lighting settings within the styleURL. This is necessary to allow for dynamic creation of custom lighting effects (e.g., long sunset shadows) without having to manually modify and strip the base style of its default lighting layers in Mapbox Studio.

Notes / preliminary analysis

No response

Additional links and references

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Run the standalone BugReportExample on iOS and Android with @rnmapbox/maps 10.2.7, then trace the Light component's color, intensity, and position handling against the Mapbox styleURL lighting. Done means the documented color formats work and intensity and position override built-in style lighting on both platforms, with regression coverage if the project has a relevant test entry point.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, kotlin, react-native
Domain
mobile-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.