[Bug]: <Mapbox.Light> properties are ignored or cause errors (especially color and position array)
Nobody has claimed this yet.
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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