@rnmapbox/maps 10.3.0-beta.1 → 10.3.0

package/android/src/main/java/com/rnmapbox/rnmbx/components/annotation/RNMBXMarkerViewContent.kt

@@ -1,13 +1,24 @@
 package com.rnmapbox.rnmbx.components.annotation
 
 import android.content.Context
+import android.view.MotionEvent
 import android.view.View.MeasureSpec
 import android.view.ViewGroup
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.uimanager.UIManagerHelper
 import com.facebook.react.views.view.ReactViewGroup
+import com.rnmapbox.rnmbx.components.camera.BaseEvent
 
 class RNMBXMarkerViewContent(context: Context): ReactViewGroup(context) {
     var inAdd: Boolean = false
 
+    // Track last reported translation to avoid feedback loop:
+    // Mapbox sets setTranslationX(512) → we fire event → JS sets transform:[{translateX:512}]
+    // → Fabric calls setTranslationX(512) again → same value → no re-fire.
+    private var lastReportedTx = Float.NaN
+    private var lastReportedTy = Float.NaN
+
     init {
         allowRenderingOutside()
     }
@@ -17,6 +28,50 @@ class RNMBXMarkerViewContent(context: Context): ReactViewGroup(context) {
         configureParentClipping()
     }
 
+    override fun dispatchTouchEvent(ev: MotionEvent): Boolean {
+        // On ACTION_DOWN, tell the parent MapView not to intercept subsequent MOVE/UP
+        // events for pan/zoom recognition — that would send CANCEL to child Pressables
+        // and suppress onPress. Android resets the disallow flag on each new DOWN, so
+        // calling this once per gesture is sufficient. See maplibre-react-native#1289.
+        if (ev.actionMasked == MotionEvent.ACTION_DOWN) {
+            parent?.requestDisallowInterceptTouchEvent(true)
+        }
+        return super.dispatchTouchEvent(ev)
+    }
+
+    override fun setTranslationX(translationX: Float) {
+        super.setTranslationX(translationX)
+        maybeFireAnnotationPositionEvent()
+    }
+
+    override fun setTranslationY(translationY: Float) {
+        super.setTranslationY(translationY)
+        maybeFireAnnotationPositionEvent()
+    }
+
+    private fun maybeFireAnnotationPositionEvent() {
+        val tx = translationX
+        val ty = translationY
+        // Dedup: skip if value unchanged (prevents feedback loop when Fabric
+        // re-applies the same transform prop back to setTranslationX/Y).
+        if (tx == lastReportedTx && ty == lastReportedTy) return
+        lastReportedTx = tx
+        lastReportedTy = ty
+
+        val reactContext = context as? ReactContext ?: return
+        val dispatcher = UIManagerHelper.getEventDispatcherForReactTag(reactContext, id) ?: return
+        // Use getSurfaceId(view) — more reliable for Fabric than getSurfaceId(context)
+        val surfaceId = UIManagerHelper.getSurfaceId(this)
+        dispatcher.dispatchEvent(
+            BaseEvent(surfaceId, id, "topAnnotationPosition",
+                Arguments.createMap().apply {
+                    putDouble("x", tx.toDouble())
+                    putDouble("y", ty.toDouble())
+                },
+                canCoalesce = true)
+        )
+    }
+
     private fun configureParentClipping() {
         val parent = parent
         if (parent is android.view.ViewGroup) {

package/android/src/main/java/com/rnmapbox/rnmbx/components/annotation/RNMBXMarkerViewContentManager.kt

@@ -2,13 +2,14 @@ package com.rnmapbox.rnmbx.components.annotation
 
 import com.facebook.react.bridge.ReactApplicationContext
 import com.facebook.react.uimanager.ThemedReactContext
-import com.facebook.react.uimanager.ViewGroupManager
 import com.facebook.react.viewmanagers.RNMBXMarkerViewContentManagerInterface
+import com.rnmapbox.rnmbx.components.AbstractEventEmitter
 
 
 class RNMBXMarkerViewContentManager(reactApplicationContext: ReactApplicationContext) :
-    ViewGroupManager<RNMBXMarkerViewContent>(),
+    AbstractEventEmitter<RNMBXMarkerViewContent>(reactApplicationContext),
     RNMBXMarkerViewContentManagerInterface<RNMBXMarkerView> {
+
     override fun getName(): String {
         return REACT_CLASS
     }
@@ -17,6 +18,10 @@ class RNMBXMarkerViewContentManager(reactApplicationContext: ReactApplicationCon
         return RNMBXMarkerViewContent(context)
     }
 
+    override fun customEvents(): Map<String, String> {
+        return mapOf("topAnnotationPosition" to "onAnnotationPosition")
+    }
+
     companion object {
         const val REACT_CLASS = "RNMBXMarkerViewContent"
     }

package/android/src/main/java/com/rnmapbox/rnmbx/components/annotation/RNMBXMarkerViewManager.kt

@@ -96,8 +96,6 @@ class RNMBXMarkerViewManager(reactApplicationContext: ReactApplicationContext) :
                         }
                     }
                 }
-
-
             })
         }
     }

package/android/src/main/java/com/rnmapbox/rnmbx/components/annotation/RNMBXPointAnnotation.kt

@@ -36,7 +36,7 @@ class RNMBXPointAnnotation(private val mContext: Context, private val mManager:
     private val mTitle: String? = null
     private val mSnippet: String? = null
     private var mAnchor: Array<Float>? = null
-    private val mIsSelected = false
+    private var mIsSelected = false
     private var mDraggable = false
     private var mChildView: View? = null
     private var mChildBitmap: Bitmap? = null
@@ -187,7 +187,19 @@ class RNMBXPointAnnotation(private val mContext: Context, private val mManager:
         }
     }
 
+    fun setReactSelected(selected: Boolean) {
+        if (selected && !mIsSelected) {
+            pointAnnotations?.let {
+                it.deselectSelectedAnnotation()
+                it.selectAnnotation(this)
+            }
+        } else if (!selected && mIsSelected) {
+            pointAnnotations?.deselectAnnotation(this)
+        }
+    }
+
     fun doSelect(shouldSendEvent: Boolean) {
+        mIsSelected = true
         if (calloutView != null) {
             makeCallout()
         }
@@ -197,6 +209,7 @@ class RNMBXPointAnnotation(private val mContext: Context, private val mManager:
     }
 
     fun doDeselect() {
+        mIsSelected = false
         mManager.handleEvent(makeEvent(false))
         mCalloutSymbol?.let { mCalloutSymbol ->
             pointAnnotations?.delete(mCalloutSymbol)

package/android/src/main/java/com/rnmapbox/rnmbx/components/annotation/RNMBXPointAnnotationManager.kt

@@ -78,6 +78,17 @@ class RNMBXPointAnnotationManager(reactApplicationContext: ReactApplicationConte
         annotation.setAnchor(mapValue.getDouble("x").toFloat(), mapValue.getDouble("y").toFloat())
     }
 
+    override fun setSelected(
+        annotation: RNMBXPointAnnotation,
+        value: Dynamic
+    ) {
+        if (value.isNull) {
+            Logger.e("RNMBXPointAnnotationManager", "selected value is null")
+            return
+        }
+        annotation.setReactSelected(value.asBoolean())
+    }
+
     @ReactProp(name = "draggable")
     override fun setDraggable(annotation: RNMBXPointAnnotation, draggable: Dynamic) {
         annotation.setDraggable(draggable.asBoolean())

package/android/src/main/java/com/rnmapbox/rnmbx/components/location/RNMBXNativeUserLocationManager.kt

@@ -11,8 +11,11 @@ import com.google.gson.Gson
 import com.google.gson.stream.JsonWriter
 import com.mapbox.bindgen.Value
 import com.mapbox.maps.extension.style.expressions.generated.Expression
+import com.rnmapbox.rnmbx.components.location.RNMBXNativeUserLocationManager.Companion.TAG
 import com.rnmapbox.rnmbx.rncompat.dynamic.*
 import com.rnmapbox.rnmbx.utils.Logger
+import com.rnmapbox.rnmbx.utils.extensions.asBooleanOrNull
+import com.rnmapbox.rnmbx.utils.extensions.asStringOrNull
 import com.rnmapbox.rnmbx.utils.extensions.toJsonArray
 import java.io.StringWriter
 import javax.annotation.Nonnull
@@ -27,51 +30,50 @@ class RNMBXNativeUserLocationManager : ViewGroupManager<RNMBXNativeUserLocation>
 
     @ReactProp(name = "androidRenderMode")
     override fun setAndroidRenderMode(userLocation: RNMBXNativeUserLocation, mode: Dynamic) {
-        if (!mode.isNull) {
-            Logger.e("RNMBXNativeUserLocationManager", "androidRenderMode is deprecated, use puckBearing instead")
-        }
-        when (mode.asString()) {
-            "compass" -> userLocation.androidRenderMode = RenderMode.COMPASS
-            "gps" -> userLocation.androidRenderMode = RenderMode.GPS
-            "normal" -> userLocation.androidRenderMode = RenderMode.NORMAL
+        mode.asStringOrNull()?.let {
+            Logger.e(TAG, "androidRenderMode is deprecated, use puckBearing instead")
+
+            when (it) {
+                "compass" -> userLocation.androidRenderMode = RenderMode.COMPASS
+                "gps" -> userLocation.androidRenderMode = RenderMode.GPS
+                "normal" -> userLocation.androidRenderMode = RenderMode.NORMAL
+            }
         }
     }
 
     @ReactProp(name = "puckBearing")
     override fun setPuckBearing(view: RNMBXNativeUserLocation, value: Dynamic) {
-        when (value?.asString()) {
+        when (value.asStringOrNull()) {
             "heading" -> view.puckBearing = PuckBearing.HEADING
             "course" -> view.puckBearing = PuckBearing.COURSE
             null -> Unit
             else ->
-                Logger.e("RNMBXNativeUserLocationManager", "unexpected value for puckBearing: $value")
+                Logger.e(TAG, "unexpected value for puckBearing: $value")
         }
     }
 
     @ReactProp(name = "puckBearingEnabled")
     override fun setPuckBearingEnabled(view: RNMBXNativeUserLocation, value: Dynamic) {
-        if (!value.isNull) {
-            if (value.type == ReadableType.Boolean) {
-                view.puckBearingEnabled = value.asBoolean()
-            } else {
-                Logger.e("RNMBXNativeUserLocationManager", "unexpected value for puckBearingEnabled: $value")
-            }
+        value.asBooleanOrNull()?.let {
+            view.puckBearingEnabled = it
+        } ?: run {
+            Logger.e(TAG, "unexpected value for puckBearingEnabled: $value")
         }
     }
 
     @ReactProp(name = "topImage")
     override fun setTopImage(view: RNMBXNativeUserLocation, value: Dynamic?) {
-        view.topImage = value?.asString()
+        view.topImage = value?.asStringOrNull()
     }
 
     @ReactProp(name = "bearingImage")
     override fun setBearingImage(view: RNMBXNativeUserLocation, value: Dynamic?) {
-        view.bearingImage = value?.asString()
+        view.bearingImage = value?.asStringOrNull()
     }
 
     @ReactProp(name = "shadowImage")
     override fun setShadowImage(view: RNMBXNativeUserLocation, value: Dynamic?) {
-        view.shadowImage = value?.asString()
+        view.shadowImage = value?.asStringOrNull()
     }
 
     @ReactProp(name = "scale", defaultDouble = 1.0)
@@ -98,11 +100,10 @@ class RNMBXNativeUserLocationManager : ViewGroupManager<RNMBXNativeUserLocation>
 
     companion object {
         const val REACT_CLASS = "RNMBXNativeUserLocation"
+        const val TAG = "RNMBXNativeUserLocationManager"
     }
 }
 
-
-
 fun _convertToDoubleValueOrExpression(value: Dynamic?, name: String): Value? {
     if (value == null) {
         return null
@@ -111,7 +112,7 @@ fun _convertToDoubleValueOrExpression(value: Dynamic?, name: String): Value? {
         ReadableType.Array -> {
             val array = value.asArray()
             if (array == null) {
-                Logger.e("RNMBXNativeUserLocationManager", "_convertToDoubleValueOrExpression: array is null for $name")
+                Logger.e(TAG, "_convertToDoubleValueOrExpression: array is null for $name")
                 return null
             }
             Expression.fromRaw(Gson().toJson(array.toJsonArray()))
@@ -120,10 +121,10 @@ fun _convertToDoubleValueOrExpression(value: Dynamic?, name: String): Value? {
             Value.valueOf(value.asDouble())
         else -> {
             Logger.e(
-                "RNMBXNativeUserLocationmanager",
-                "_convertToExpressionString: cannot convert $name to a double or double exrpession. $value"
+                TAG,
+                "_convertToExpressionString: cannot convert $name to a double or double expression. $value"
             )
-            return null
+            null
         }
     }
 }

package/android/src/main/java/com/rnmapbox/rnmbx/components/mapview/NativeMapViewModule.kt

@@ -12,6 +12,7 @@ import com.rnmapbox.rnmbx.utils.ExpressionParser
 import com.rnmapbox.rnmbx.utils.ViewRefTag
 import com.rnmapbox.rnmbx.utils.ViewTagResolver
 import com.rnmapbox.rnmbx.utils.extensions.toCoordinate
+import com.rnmapbox.rnmbx.utils.extensions.toScreenBox
 import com.rnmapbox.rnmbx.utils.extensions.toScreenCoordinate
 import com.rnmapbox.rnmbx.utils.extensions.toValueHashMap
 
@@ -116,7 +117,7 @@ class NativeMapViewModule(context: ReactApplicationContext, val viewTagResolver:
             val layerIds = ConvertUtils.toStringList(withLayerIDs)
 
             it.queryRenderedFeaturesAtPoint(
-                ConvertUtils.toPointF(atPoint),
+                atPoint.toScreenCoordinate(),
                 ExpressionParser.from(withFilter),
                 if (layerIds.size == 0) null else layerIds,
                 createCommandResponse(promise)
@@ -135,7 +136,7 @@ class NativeMapViewModule(context: ReactApplicationContext, val viewTagResolver:
             val layerIds = ConvertUtils.toStringList(withLayerIDs)
 
             it.queryRenderedFeaturesInRect(
-                ConvertUtils.toRectF(withBBox),
+                if (withBBox.size() == 0) null else withBBox.toScreenBox(),
                 ExpressionParser.from(withFilter),
                 if (layerIds.size == 0) null else layerIds,
                 createCommandResponse(promise)

package/android/src/main/java/com/rnmapbox/rnmbx/components/mapview/RNMBXMapView.kt

@@ -2,11 +2,8 @@ package com.rnmapbox.rnmbx.components.mapview
 
 import android.content.Context
 import android.graphics.BitmapFactory
-import android.graphics.PointF
-import android.graphics.RectF
 import android.os.Handler
 import android.os.Looper
-import android.util.Log
 import android.view.Gravity
 import android.view.View
 import android.view.View.OnLayoutChangeListener
@@ -701,24 +698,26 @@ open class RNMBXMapView(private val mContext: Context, var mManager: RNMBXMapVie
                 return true
             }
         }
-        val screenPoint = mMap?.pixelForCoordinate(point)
+        val screenPointPx = mMap?.pixelForCoordinate(point)
         val touchableSources = allTouchableSources
         val hits = HashMap<String?, List<Feature?>?>()
-        if (screenPoint != null) {
-            handleTapInSources(LinkedList(touchableSources), screenPoint, hits, ArrayList(), object : HandleTap {
+        if (screenPointPx != null) {
+            handleTapInSources(LinkedList(touchableSources), screenPointPx, hits, ArrayList(), object : HandleTap {
                 override fun run(hitTouchableSources: List<RNMBXSource<*>?>?, hits: Map<String?, List<Feature?>?>) {
+                    /** Android Mapbox SDK returns screen coordinates in physical pixels, while JS expects density-independent pixels. */
+                    val screenPointDp = toDp(screenPointPx)
                     if (hits.size > 0) {
                         val source = getTouchableSourceWithHighestZIndex(hitTouchableSources as List<RNMBXSource<*>>?)
                         if (source != null && source.hasPressListener() && source.iD != null && source.iD in hits) {
                             source.onPress(RNMBXSource.OnPressEvent(
                                     hits[source.iD] as List<Feature>,
                                     GeoJSONUtils.toLatLng(point),
-                                    PointF(screenPoint.x.toFloat(), screenPoint.y.toFloat())
+                                    screenPointDp
                             ))
                             return
                         }
                     }
-                    val event = MapClickEvent(_this, LatLng(point), screenPoint)
+                    val event = MapClickEvent(_this, LatLng(point), screenPointDp)
                     mManager.handleEvent(event)
                 }
 
@@ -732,9 +731,10 @@ open class RNMBXMapView(private val mContext: Context, var mManager: RNMBXMapVie
         if (pointAnnotations.getAndClearAnnotationDragged()) {
             return true
         }
-        val screenPoint = mMap?.pixelForCoordinate(point)
-        if (screenPoint != null) {
-            val event = MapClickEvent(_this, LatLng(point), screenPoint, EventTypes.MAP_LONG_CLICK)
+        val screenPointPx = mMap?.pixelForCoordinate(point)
+        if (screenPointPx != null) {
+            val screenPointDp = toDp(screenPointPx)
+            val event = MapClickEvent(_this, LatLng(point), screenPointDp, EventTypes.MAP_LONG_CLICK)
             mManager.handleEvent(event)
         }
 
@@ -908,48 +908,61 @@ open class RNMBXMapView(private val mContext: Context, var mManager: RNMBXMapVie
         }
     }
 
-    private fun getDisplayDensity(): Float {
-        return mContext.resources.displayMetrics.density
+    private fun getDisplayDensity(): Double {
+        return mContext.resources.displayMetrics.density.toDouble()
     }
 
-    fun getCoordinateFromView(pixel: ScreenCoordinate, response: CommandResponse) {
-        val density: Float = getDisplayDensity()
-        val screenCoordinate = ScreenCoordinate(pixel.x * density, pixel.y * density)
+    /** Converts a point from physical pixels to density-independent pixels. */
+    private fun toDp(pointPx: ScreenCoordinate): ScreenCoordinate {
+        val density = getDisplayDensity()
+        return ScreenCoordinate(pointPx.x / density, pointPx.y / density)
+    }
+
+    /** Converts a point from density-independent pixels to physical pixels. */
+    private fun toPx(pointDp: ScreenCoordinate): ScreenCoordinate {
+        val density = getDisplayDensity()
+        return ScreenCoordinate(pointDp.x * density, pointDp.y * density)
+    }
+
+    /** Converts a bounding box from density-independent pixels to physical pixels. */
+    private fun toPx(boxDp: ScreenBox): ScreenBox {
+        val density = getDisplayDensity()
+        return ScreenBox(
+            ScreenCoordinate(boxDp.min.x * density, boxDp.min.y * density),
+            ScreenCoordinate(boxDp.max.x * density, boxDp.max.y * density),
+        )
+    }
 
-        val coordinate = mMap!!.coordinateForPixel(screenCoordinate)
+    fun getCoordinateFromView(pointDp: ScreenCoordinate, response: CommandResponse) {
+        val pointPx = toPx(pointDp)
+
+        val coordinate = mMap!!.coordinateForPixel(pointPx)
 
         response.success {
             it.putArray("coordinateFromView", coordinate.toReadableArray())
         }
     }
 
-    fun getPointInView(coordinate: Point, response: CommandResponse) {
-        val point = mMap!!.pixelForCoordinate(coordinate)
-        val density = getDisplayDensity()
-        val pointInView = PointF((point.x / density).toFloat(), (point.y / density).toFloat())
+    fun getPointInView(coordinates: Point, response: CommandResponse) {
+        val pointDp = toDp(mMap!!.pixelForCoordinate(coordinates))
 
         response.success {
             val array: WritableArray = WritableNativeArray()
-            array.pushDouble(pointInView.x.toDouble())
-            array.pushDouble(pointInView.y.toDouble())
+            array.pushDouble(pointDp.x)
+            array.pushDouble(pointDp.y)
             it.putArray("pointInView", array)
         }
     }
 
-    fun queryRenderedFeaturesAtPoint(point: PointF, filter: Expression?, layerIDs: List<String>?, response: CommandResponse) {
+    fun queryRenderedFeaturesAtPoint(pointDp: ScreenCoordinate, filter: Expression?, layerIDs: List<String>?, response: CommandResponse) {
         if (mMap == null) {
             Logger.e("queryRenderedFeaturesAtPoint", "mapbox map is null")
             return
         }
-        // JS sends point values in DIP (see getPointInView which divides by display density),
-        // but Mapbox core expects screen pixel coordinates. Convert back to px here.
-        val density: Float = getDisplayDensity()
-        val screenCoordinate = ScreenCoordinate(
-                (point.x * density).toDouble(),
-                (point.y * density).toDouble()
-        )
-        val queryGeometry = RenderedQueryGeometry(screenCoordinate)
-        val layers = layerIDs?.takeUnless { it.isEmpty() } ?: null;
+
+        val pointPx = toPx(pointDp)
+        val queryGeometry = RenderedQueryGeometry(pointPx)
+        val layers = layerIDs?.takeUnless { it.isEmpty() } ?: null
         val queryOptions = RenderedQueryOptions(layers, filter)
         mMap.queryRenderedFeatures(queryGeometry, queryOptions) { features ->
             if (features.isValue) {
@@ -966,14 +979,19 @@ open class RNMBXMapView(private val mContext: Context, var mManager: RNMBXMapVie
         }
     }
 
-    fun queryRenderedFeaturesInRect(rect: RectF?, filter: Expression?, layerIDs: List<String>?, response: CommandResponse) {
+    fun queryRenderedFeaturesInRect(rectDp: ScreenBox?, filter: Expression?, layerIDs: List<String>?, response: CommandResponse) {
         val size = mMap.getMapOptions().size
-        val screenBox = if (rect == null) ScreenBox(ScreenCoordinate(0.0, 0.0), ScreenCoordinate(size?.width!!.toDouble(), size?.height!!.toDouble())) else ScreenBox(
-                ScreenCoordinate(rect.right.toDouble(), rect.bottom.toDouble() ),
-                ScreenCoordinate(rect.left.toDouble(), rect.top.toDouble()),
-        )
+
+        val rectPx: ScreenBox =
+            rectDp?.let { toPx(it) }
+                ?: ScreenBox(
+                    ScreenCoordinate(0.0, 0.0),
+                    /** No conversion needed, screen size is already returned in physical pixels. */
+                    ScreenCoordinate(size?.width?.toDouble() ?: 0.0, size?.height?.toDouble() ?: 0.0)
+                )
+
         mMap.queryRenderedFeatures(
-                RenderedQueryGeometry(screenBox),
+                RenderedQueryGeometry(rectPx),
                 RenderedQueryOptions(layerIDs, filter)
         ) { features ->
             if (features.isValue) {

package/android/src/main/java/com/rnmapbox/rnmbx/components/mapview/RNMBXMapViewManager.kt

@@ -10,25 +10,16 @@ import com.facebook.react.uimanager.LayoutShadowNode
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.annotations.ReactProp
 import com.rnmapbox.rnmbx.events.constants.EventKeys
-import com.facebook.react.common.MapBuilder
 import com.facebook.react.uimanager.ViewManagerDelegate
 import com.facebook.react.viewmanagers.RNMBXMapViewManagerDelegate
 import com.facebook.react.viewmanagers.RNMBXMapViewManagerInterface
-import com.mapbox.maps.MapInitOptions
 import com.mapbox.maps.extension.style.layers.properties.generated.ProjectionName
 import com.mapbox.maps.plugin.gestures.gestures
-import com.mapbox.maps.plugin.logo.logo
-import com.rnmapbox.rnmbx.events.AndroidCallbackEvent
 import com.rnmapbox.rnmbx.events.constants.eventMapOf
-import com.rnmapbox.rnmbx.utils.ConvertUtils
-import com.rnmapbox.rnmbx.utils.ExpressionParser
 import com.rnmapbox.rnmbx.utils.Logger
 import com.rnmapbox.rnmbx.utils.ViewTagResolver
 import com.rnmapbox.rnmbx.utils.extensions.getAndLogIfNotBoolean
 import com.rnmapbox.rnmbx.utils.extensions.getAndLogIfNotDouble
-import com.rnmapbox.rnmbx.utils.extensions.toCoordinate
-import com.rnmapbox.rnmbx.utils.extensions.toRectF
-import com.rnmapbox.rnmbx.utils.extensions.toScreenCoordinate
 import java.lang.Exception
 import java.util.HashMap
 

package/android/src/main/java/com/rnmapbox/rnmbx/components/styles/RNMBXStyleFactory.kt

@@ -175,6 +175,14 @@ object RNMBXStyleFactory {
                 setLineGradient(layer, styleValue)
               "lineTrimOffset" ->
                 setLineTrimOffset(layer, styleValue)
+              "lineBorderWidth" ->
+                setLineBorderWidth(layer, styleValue)
+                "lineBorderWidthTransition" ->
+                setLineBorderWidthTransition(layer, styleValue)
+              "lineBorderColor" ->
+                setLineBorderColor(layer, styleValue)
+                "lineBorderColorTransition" ->
+                setLineBorderColorTransition(layer, styleValue)
               "lineZOffset" ->
                 setLineZOffset(layer, styleValue)
               "lineElevationReference" ->
@@ -1623,6 +1631,58 @@ object RNMBXStyleFactory {
       }
     }
 
+    fun setLineBorderWidth(layer: LineLayer, styleValue: RNMBXStyleValue ) {
+      if (styleValue.isExpression()) {
+        val expression = styleValue.getExpression()
+        if (expression != null) {
+          layer.lineBorderWidth(expression)
+        } else {
+          Logger.e("RNMBXLine", "Expression for lineBorderWidth is null")
+        }
+      } else {
+          val value = styleValue.getDouble(VALUE_KEY)
+          if (value != null) {
+            layer.lineBorderWidth(value)
+          } else {
+            Logger.e("RNMBXLine", "value for lineBorderWidth is null")
+          }
+      }
+    }
+
+
+    fun setLineBorderWidthTransition(layer: LineLayer, styleValue: RNMBXStyleValue) {
+      val transition = styleValue.transition
+      if (transition != null) {
+        layer.lineBorderWidthTransition(transition);
+      }
+    }
+
+    fun setLineBorderColor(layer: LineLayer, styleValue: RNMBXStyleValue ) {
+      if (styleValue.isExpression()) {
+        val expression = styleValue.getExpression()
+        if (expression != null) {
+          layer.lineBorderColor(expression)
+        } else {
+          Logger.e("RNMBXLine", "Expression for lineBorderColor is null")
+        }
+      } else {
+          val value = styleValue.getInt(VALUE_KEY)
+          if (value != null) {
+            layer.lineBorderColor(value)
+          } else {
+            Logger.e("RNMBXLine", "value for lineBorderColor is null")
+          }
+      }
+    }
+
+
+    fun setLineBorderColorTransition(layer: LineLayer, styleValue: RNMBXStyleValue) {
+      val transition = styleValue.transition
+      if (transition != null) {
+        layer.lineBorderColorTransition(transition);
+      }
+    }
+
     fun setLineZOffset(layer: LineLayer, styleValue: RNMBXStyleValue ) {
       if (styleValue.isExpression()) {
         val expression = styleValue.getExpression()

package/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)
     }
@@ -55,7 +55,7 @@ class RNMBXAtmosphere(context: Context?) : AbstractSourceConsumer(context) {
         mAtmosphere?.also {
             RNMBXStyleFactory.setAtmosphereLayerStyle(
                 it, RNMBXStyle(
-                    context, mReactStyle!!,
+                    context, mReactStyle,
                     mMap!!
                 )
             )

package/android/src/main/java/com/rnmapbox/rnmbx/components/styles/atmosphere/RNMBXAtmosphereManager.kt

@@ -2,6 +2,7 @@ package com.rnmapbox.rnmbx.components.styles.atmosphere
 
 import com.facebook.react.bridge.Dynamic
 import com.facebook.react.uimanager.ThemedReactContext
+import com.rnmapbox.rnmbx.utils.extensions.asMapOrNull
 import com.facebook.react.uimanager.ViewGroupManager
 import com.facebook.react.uimanager.ViewManagerDelegate
 import com.facebook.react.uimanager.annotations.ReactProp
@@ -30,7 +31,7 @@ class RNMBXAtmosphereManager : ViewGroupManager<RNMBXAtmosphere>(), RNMBXAtmosph
 
     @ReactProp(name = "reactStyle")
     override fun setReactStyle(atmosphere: RNMBXAtmosphere, reactStyle: Dynamic) {
-        atmosphere.setReactStyle(reactStyle.asMap())
+        atmosphere.setReactStyle(reactStyle.asMapOrNull())
     }
 
     companion object {

package/android/src/main/java/com/rnmapbox/rnmbx/components/styles/light/RNMBXLightManager.kt

@@ -2,6 +2,7 @@ package com.rnmapbox.rnmbx.components.styles.light
 
 import com.facebook.react.bridge.Dynamic
 import com.facebook.react.uimanager.ThemedReactContext
+import com.rnmapbox.rnmbx.utils.extensions.asMapOrNull
 import com.facebook.react.uimanager.ViewGroupManager
 import com.facebook.react.uimanager.annotations.ReactProp
 import com.facebook.react.viewmanagers.RNMBXLightManagerInterface
@@ -18,7 +19,7 @@ class RNMBXLightManager : ViewGroupManager<RNMBXLight>(),
 
     @ReactProp(name = "reactStyle")
     override fun setReactStyle(light: RNMBXLight, reactStyle: Dynamic) {
-        light.setReactStyle(reactStyle.asMap())
+        light.setReactStyle(reactStyle.asMapOrNull())
     }
 
     companion object {