rnmapbox · mfazekas · Mar 15, 2026
diff --git a/android/src/main/java/com/rnmapbox/rnmbx/components/styles/atmosphere/RNMBXAtmosphere.kt b/android/src/main/java/com/rnmapbox/rnmbx/components/styles/atmosphere/RNMBXAtmosphere.kt
@@ -4,8 +4,7 @@ import android.content.Context
 import com.facebook.react.bridge.ReadableMap
 import com.mapbox.maps.MapboxMap
 import com.mapbox.maps.extension.style.atmosphere.generated.Atmosphere
-import com.mapbox.maps.extension.style.terrain.generated.Terrain
-import com.mapbox.maps.extension.style.terrain.generated.removeTerrain
+import com.mapbox.maps.extension.style.atmosphere.generated.removeAtmosphere
 import com.rnmapbox.rnmbx.components.RemovalReason
 import com.rnmapbox.rnmbx.components.mapview.RNMBXMapView
 import com.rnmapbox.rnmbx.components.styles.RNMBXStyle
@@ -42,7 +41,8 @@ class RNMBXAtmosphere(context: Context?) : AbstractSourceConsumer(context) {
     }
 
     override fun removeFromMap(mapView: RNMBXMapView, reason: RemovalReason): Boolean {
-        mapView.savedStyle?.let { it.removeTerrain() }
+        mapView.savedStyle?.let { it.removeAtmosphere() }
+        mAtmosphere = null
         mMap = null
         return super.removeFromMap(mapView, reason)
     }
@@ -52,15 +52,14 @@ class RNMBXAtmosphere(context: Context?) : AbstractSourceConsumer(context) {
     }
 
     fun addStyles() {
-        mAtmosphere?.also {
-            RNMBXStyleFactory.setAtmosphereLayerStyle(
-                it, RNMBXStyle(
-                    context, mReactStyle!!,
-                    mMap!!
-                )
-            )
-        } ?: run {
+        val atmosphere = mAtmosphere ?: run {
             Logger.e("RNMBXAtmosphere", "mAtmosphere is null")
+            return
         }
+        val reactStyle = mReactStyle ?: return
+        val map = mMap ?: return
+        RNMBXStyleFactory.setAtmosphereLayerStyle(
+            atmosphere, RNMBXStyle(context, reactStyle, map)
+        )
     }
 }
diff --git a/example/src/examples/BugReportExampleTS.tsx b/example/src/examples/BugReportExampleTS.tsx
@@ -1,88 +1,73 @@
-import { useState } from 'react';
-import {
-  Camera,
-  CircleLayer,
-  Images,
-  MapView,
-  ShapeSource,
-  SymbolLayer,
-} from '@rnmapbox/maps';
-import { FeatureCollection } from 'geojson';
-import { Button } from 'react-native';
+import { useMemo, useState } from 'react';
+import { Button, StyleSheet, Text, View } from 'react-native';
+import { Atmosphere, Camera, MapView } from '@rnmapbox/maps';
 
-const styles = {
-  mapView: { flex: 1 },
-  circleLayer: {
-    circleRadiusTransition: { duration: 5000, delay: 0 },
-    circleColor: '#ff0000',
-  },
-};
+const STYLE_DARK = 'mapbox://styles/mapbox/dark-v11';
+const STYLE_STANDARD = 'mapbox://styles/mapbox/standard';
 
-const features: FeatureCollection = {
-  type: 'FeatureCollection',
-  features: [
-    {
-      type: 'Feature',
-      id: 'a-feature',
-      properties: {
-        icon: 'example',
-        text: 'example-icon-and-label',
-      },
-      geometry: {
-        type: 'Point',
-        coordinates: [-74.00597, 40.71427],
-      },
-    },
-    {
-      type: 'Feature',
-      id: 'b-feature',
-      properties: {
-        text: 'just-label',
-      },
-      geometry: {
-        type: 'Point',
-        coordinates: [-74.001097, 40.71527],
-      },
-    },
-    {
-      type: 'Feature',
-      id: 'c-feature',
-      properties: {
-        icon: 'example',
-      },
-      geometry: {
-        type: 'Point',
-        coordinates: [-74.00697, 40.72427],
-      },
-    },
-  ],
-};
+const styles = StyleSheet.create({
+  map: {
+    flex: 1,
+  },
+  controls: {
+    position: 'absolute',
+    top: 50,
+    left: 16,
+    right: 16,
+    gap: 8,
+    backgroundColor: 'rgba(0,0,0,0.35)',
+    borderRadius: 10,
+    padding: 10,
+  },
+  text: {
+    color: 'white',
+  },
+});
 
 const BugReportExample = () => {
-  const [radius, setRadius] = useState(20);
+  const [styleURL, setStyleURL] = useState(STYLE_DARK);
+  const [showAtmosphere, setShowAtmosphere] = useState(true);
+
+  const atmosphereStyle = useMemo(() => {
+    const isDark = styleURL === STYLE_DARK;
+    return {
+      color: isDark ? 'rgba(29,44,62,1)' : 'rgba(255,255,255,1)',
+      highColor: isDark ? 'rgba(11,11,25,1)' : 'rgba(255,255,255,1)',
+      spaceColor: isDark ? 'rgba(11,11,25,1)' : 'rgba(255,255,255,1)',
+      horizonBlend: 0.03,
+      starIntensity: isDark ? 0.6 : 0,
+    };
+  }, [styleURL]);
 
-  const circleLayerStyle = {
-    ...styles.circleLayer,
-    ...{ circleRadius: radius },
-  };
+  function flipStyle() {
+    setStyleURL((prev) => (prev === STYLE_DARK ? STYLE_STANDARD : STYLE_DARK));
+  }
+
+  function remountAtmosphere() {
+    setShowAtmosphere(false);
+    requestAnimationFrame(() => setShowAtmosphere(true));
+  }
 
   return (
-    <>
-      <Button title="Grow" onPress={() => setRadius(radius + 20)} />
-      <MapView style={styles.mapView}>
-        <Camera centerCoordinate={[-74.00597, 40.71427]} zoomLevel={14} />
-        <Images images={{ example: require('../assets/example.png') }} />
-        <ShapeSource id={'shape-source-id-0'} shape={features}>
-          <CircleLayer id={'circle-layer'} style={circleLayerStyle} />
-          <SymbolLayer
-            id="symbol-id"
-            style={{
-              iconImage: ['get', 'icon'],
-            }}
-          />
-        </ShapeSource>
+    <View style={styles.map}>
+      <MapView style={styles.map} styleURL={styleURL} surfaceView={false}>
+        <Camera
+          centerCoordinate={[8.856142, 45.60942]}
+          zoomLevel={13}
+          pitch={45}
+          heading={0}
+        />
+        {showAtmosphere ? <Atmosphere style={atmosphereStyle} /> : null}
       </MapView>
-    </>
+
+      <View style={styles.controls}>
+        <Text style={styles.text}>
+          Repro: tap quickly to trigger Atmosphere mount/style race
+        </Text>
+        <Button title="Toggle style (dark - standard)" onPress={flipStyle} />
+        <Button title="Remount Atmosphere" onPress={remountAtmosphere} />
+      </View>
+    </View>
   );
 };
 

diff --git a/example/src/examples/V10/QueryTerrainElevation.js b/example/src/examples/V10/QueryTerrainElevation.js
@@ -39,13 +39,21 @@ const styles = {
   }),
 };
 
+const ATMOSPHERE_COLORS = [
+  { color: '#def', highColor: '#def', spaceColor: '#def', label: 'Blue' },
+  { color: 'rgb(186, 210, 235)', highColor: 'rgb(36, 92, 223)', spaceColor: 'rgb(11, 11, 25)', label: 'Night' },
+  { color: 'rgb(255, 200, 150)', highColor: 'rgb(200, 100, 50)', spaceColor: 'rgb(20, 10, 30)', label: 'Sunset' },
+];
+
 const QueryTerrainElevation = () => {
   let [animatedRoute, setAnimatedRoute] = useState(null);
   let [actPoint, setActPoint] = useState(null);
   let camera = useRef();
   let [altitude, setAltitude] = useState(null);
   let updateAltitudeInterval = useRef();
   let map = useRef();
+  let [showAtmosphere, setShowAtmosphere] = useState(true);
+  let [atmosphereColorIdx, setAtmosphereColorIdx] = useState(0);
   useEffect(() => {
     return () => {
       clearInterval(updateAltitudeInterval.current);
@@ -106,6 +114,14 @@ const QueryTerrainElevation = () => {
   return (
     <>
       <Button title="Start" onPress={() => startAnimation(animatedRoute)} />
+      <Button
+        title={showAtmosphere ? 'Remove Atmosphere' : 'Add Atmosphere'}
+        onPress={() => setShowAtmosphere((v) => !v)}
+      />
+      <Button
+        title={`Atmosphere Color: ${ATMOSPHERE_COLORS[atmosphereColorIdx].label}`}
+        onPress={() => setAtmosphereColorIdx((i) => (i + 1) % ATMOSPHERE_COLORS.length)}
+      />
       <MapView
         style={styles.mapView}
         styleURL={'mapbox://styles/mapbox/satellite-streets-v11'}
@@ -134,15 +150,17 @@ const QueryTerrainElevation = () => {
           />
 
           <Terrain style={{ exaggeration: 1.5 }} />
-          <Atmosphere
-            style={{
-              starIntensity: 1.0,
-              range: [-0.7, 2.0],
-              spaceColor: '#def',
-              color: '#def',
-              highColor: '#def',
-            }}
-          />
+          {showAtmosphere && (
+            <Atmosphere
+              style={{
+                starIntensity: 1.0,
+                range: [-0.7, 2.0],
+                spaceColor: ATMOSPHERE_COLORS[atmosphereColorIdx].spaceColor,
+                color: ATMOSPHERE_COLORS[atmosphereColorIdx].color,
+                highColor: ATMOSPHERE_COLORS[atmosphereColorIdx].highColor,
+              }}
+            />
+          )}
         </RasterDemSource>
 
         {animatedRoute && (

diff --git a/example/src/examples/V10/TerrainSkyAtmosphere.tsx b/example/src/examples/V10/TerrainSkyAtmosphere.tsx
@@ -1,4 +1,4 @@
-import { useRef } from 'react';
+import { useRef, useState } from 'react';
 import { Button } from 'react-native';
 import {
   MapView,
@@ -12,8 +12,34 @@
 
 Logger.setLogLevel('verbose');
 
+const ATMOSPHERE_COLORS = [
+  {
+    label: 'Day',
+    color: 'rgb(186, 210, 235)',
+    highColor: 'rgb(36, 92, 223)',
+    spaceColor: 'rgb(11, 11, 25)',
+    starIntensity: 0.6,
+  },
+  {
+    label: 'Sunset',
+    color: 'rgb(255, 200, 150)',
+    highColor: 'rgb(200, 100, 50)',
+    spaceColor: 'rgb(20, 10, 30)',
+    starIntensity: 0.8,
+  },
+  {
+    label: 'Blue',
+    color: '#def',
+    highColor: '#def',
+    spaceColor: '#def',
+    starIntensity: 1.0,
+  },
+];
+
 const TerrainSkyAtmosphere = () => {
   const cameraRef = useRef<Camera>(null);
+  const [showAtmosphere, setShowAtmosphere] = useState(true);
+  const [colorIdx, setColorIdx] = useState(0);
 
   return (
     <>
@@ -27,6 +53,14 @@
           })
         }
       />
+      <Button
+        title={showAtmosphere ? 'Remove Atmosphere' : 'Add Atmosphere'}
+        onPress={() => setShowAtmosphere((v) => !v)}
+      />
+      <Button
+        title={`Atmosphere Color: ${ATMOSPHERE_COLORS[colorIdx].label}`}
+        onPress={() => setColorIdx((i) => (i + 1) % ATMOSPHERE_COLORS.length)}
+      />
       <MapView
         style={{ flex: 1 }}
         styleURL={'mapbox://styles/mapbox-map-design/ckhqrf2tz0dt119ny6azh975y'}
@@ -48,15 +82,17 @@
           tileSize={514}
           maxZoomLevel={14}
         >
-          <Atmosphere
-            style={{
-              color: 'rgb(186, 210, 235)',
-              highColor: 'rgb(36, 92, 223)',
-              horizonBlend: 0.02,
-              spaceColor: 'rgb(11, 11, 25)',
-              starIntensity: 0.6,
-            }}
-          />
+          {showAtmosphere && (
+            <Atmosphere
+              style={{
+                color: ATMOSPHERE_COLORS[colorIdx].color,
+                highColor: ATMOSPHERE_COLORS[colorIdx].highColor,
+                horizonBlend: 0.02,
+                spaceColor: ATMOSPHERE_COLORS[colorIdx].spaceColor,
+                starIntensity: ATMOSPHERE_COLORS[colorIdx].starIntensity,
+              }}
+            />
+          )}
           <SkyLayer
             id="sky-layer"
             style={{