Skip to content

feat: add Snow and Rain particle effect components#4179

Open
mfazekas wants to merge 8 commits intomainfrom
feat/snow-rain-particle-effects
Open

feat: add Snow and Rain particle effect components#4179
mfazekas wants to merge 8 commits intomainfrom
feat/snow-rain-particle-effects

Conversation

@mfazekas
Copy link
Copy Markdown
Contributor

@mfazekas mfazekas commented Mar 22, 2026

Summary

Implements <Snow /> and <Rain /> components that expose the experimental Mapbox Maps SDK v11.9+ precipitation particle effects to React Native. Follows the existing <Atmosphere /> pattern throughout.

  • Code generator: registers snow and rain as singleton style layers, generates SnowLayerStyleProps / RainLayerStyleProps TypeScript types and native style setters
  • iOS: RNMBXSnow / RNMBXRain Swift singleton layer implementations + Fabric component views
  • Android: RNMBXSnow / RNMBXRain Kotlin implementations + ViewManagers, registered in RNMBXPackage
  • TypeScript: Snow.tsx / Rain.tsx components exported from Mapbox.native.ts
  • Example: new SnowAndRain example (V11) + Snow/Rain toggle buttons integrated into TerrainSkyAtmosphere
  • SDK bump: Mapbox Maps iOS + Android 11.18.2 → 11.20.1
  • measure-light warning: Rain logs a warning when used on styles without 3D lights and missing explicit color/opacity/vignetteColor

Screenshots

iOS Android
Snow
Rain

iOS Rain workaround

The Mapbox SDK's MapContentReconciler resets programmatically-applied Rain after isStyleRootLoaded fires (which can happen after tile/sprite loading completes, well after the initial styleLoaded event). Since the style JSON has no rain key, the reconciler resets it to nil. RNMBXRain.addToMap schedules an async re-apply to survive this reset. Snow does not exhibit the same behaviour.

To investigate the exact trigger: add a symbolic breakpoint in Xcode on MapboxMaps.StyleManager.setStyleRainForProperties with "Automatically continue after evaluating" + a backtrace action — the callstack will pinpoint what fires it.

Test plan

  • yarn generate produces SnowLayerStyleProps / RainLayerStyleProps in src/utils/MapboxStyles.ts
  • iOS build succeeds (Xcode, after pod install)
  • Android build succeeds (./gradlew assembleDebug)
  • Open TerrainSkyAtmosphere example → tap Snow → snowfall visible
  • Tap Rain → rain visible and persists
  • Tap Clear → effect removed; tap Rain again → rain reappears
  • Open Snow & Rain (V11) example → same checks on a plain style

Implements <Snow /> and <Rain /> components backed by Mapbox Maps SDK
v11.9+ experimental precipitation APIs (@_spi(Experimental)).

- Add snow/rain to the code generator (generateCodeWithEjs.mjs, globals.mjs)
- Generate SnowLayerStyleProps / RainLayerStyleProps TypeScript types
- Add RNMBXSnow / RNMBXRain iOS singleton layer implementations
- Add RNMBXSnow / RNMBXRain Fabric component views (iOS)
- Add RNMBXSnow / RNMBXRain Android implementations + managers
- Register components in RNMBXPackage and package.json codegenConfig
- Export Snow and Rain from src/Mapbox.native.ts
- Add SnowAndRain example (V11) and integrate into TerrainSkyAtmosphere
- Bump Mapbox SDK iOS + Android to 11.20.1
- Work around MapContentReconciler reset of rain by async re-applying
  after initial style load completes
…ression errors

The default color and vignetteColor for Rain use measure-light(brightness)
expressions which fail with 'Brightness is unavailable in the current
evaluation context' in terrain/atmosphere map styles. Set explicit static
colors to bypass the failing expressions.
…ationReference

Fix Android build by using precipitations.generated package path for
Snow/Rain. Remove rasterElevationReference (not in SDK 11.20.1 despite
spec claiming 11.19.0). Add measure-light availability warning to Rain.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant