@maplibre/maplibre-react-native 11.0.0-beta.1 → 11.0.0-beta.11

package/android/src/main/java/org/maplibre/reactnative/components/annotations/markerview/MLRNMarkerView.kt

@@ -50,7 +50,8 @@ class MLRNMarkerView(
                     override fun onChildViewRemoved(
                         parent: View?,
                         child: View?,
-                    ) {}
+                    ) {
+                    }
                 },
             )
             for (i in 0 until view.childCount) {

package/android/src/main/java/org/maplibre/reactnative/components/annotations/markerview/MLRNMarkerViewContent.kt

@@ -1,16 +1,12 @@
 package org.maplibre.reactnative.components.annotations.markerview
 
 import android.content.Context
-import android.view.MotionEvent
 import android.view.ViewGroup
 import com.facebook.react.views.view.ReactViewGroup
 
 /**
- * Custom ReactViewGroup that allows content to render outside its bounds (#642).
- * This is used as a wrapper for Marker content to prevent clipping.
- *
  * Based on rnmapbox/maps implementation:
- * https://github.com/rnmapbox/maps/blob/main/android/src/main/java/com/rnmapbox/rnmbx/components/annotation/RNMBXMarkerViewContent.kt
+ * https://github.com/rnmapbox/maps/blob/512c50865f322fa89e0d20066b4a0fb10f080cb5/android/src/main/java/com/rnmapbox/rnmbx/components/annotation/RNMBXMarkerViewContent.kt
  */
 class MLRNMarkerViewContent(
     context: Context,
@@ -32,19 +28,18 @@ class MLRNMarkerViewContent(
     }
 
     /**
-     * Request that the parent (MapView) not intercept touch events when touching marker content.
-     * This allows TouchableOpacity, Pressable, etc. to receive touch events properly (#557, #1018).
+     * Returns the authoritative content size from the first child view.
+     * The child is laid out by React Native before this wrapper is added to the map,
+     * so its dimensions are reliable even before this view's own layout pass runs.
      */
-    override fun onInterceptTouchEvent(event: MotionEvent): Boolean {
-        // Request that parent (MapView) doesn't intercept this touch sequence
-        parent?.requestDisallowInterceptTouchEvent(true)
-        return super.onInterceptTouchEvent(event)
+    fun getContentSize(): Pair<Float, Float> {
+        val child = getChildAt(0) ?: return Pair(width.toFloat(), height.toFloat())
+        val w = if (child.width > 0) child.width else width
+        val h = if (child.height > 0) child.height else height
+        return Pair(w.toFloat(), h.toFloat())
     }
 }
 
-/**
- * Extension function to disable all forms of clipping on a ViewGroup
- */
 private fun ViewGroup.allowRenderingOutside() {
     clipChildren = false
     clipToPadding = false

package/android/src/main/java/org/maplibre/reactnative/components/annotations/markerview/MarkerViewManager.kt

@@ -1,9 +1,8 @@
 package org.maplibre.reactnative.components.annotations.markerview
 
 import android.graphics.PointF
+import android.graphics.RectF
 import android.view.View
-import android.view.ViewGroup
-import android.widget.FrameLayout
 import org.maplibre.android.geometry.LatLng
 import org.maplibre.android.maps.MapLibreMap
 import org.maplibre.android.maps.MapView
@@ -13,7 +12,7 @@ class MarkerViewManager(
     private val map: MapLibreMap,
 ) {
     data class MarkerInfo(
-        val view: View,
+        val view: MLRNMarkerViewContent,
         var latLng: LatLng,
         var anchorX: Float = 0f,
         var anchorY: Float = 0f,
@@ -25,7 +24,7 @@ class MarkerViewManager(
     private var isDestroyed = false
 
     fun addMarker(
-        view: View,
+        view: MLRNMarkerViewContent,
         latLng: LatLng,
         anchorX: Float = 0f,
         anchorY: Float = 0f,
@@ -35,12 +34,6 @@ class MarkerViewManager(
         val markerInfo = MarkerInfo(view, latLng, anchorX, anchorY, offsetX, offsetY)
         markers.add(markerInfo)
 
-        if (view is ViewGroup) {
-            view.clipChildren = false
-            view.clipToPadding = false
-            view.clipToOutline = false
-        }
-
         if (view.parent == null) {
             mapView.clipChildren = false
             mapView.clipToPadding = false
@@ -73,8 +66,7 @@ class MarkerViewManager(
     private fun updateMarkerPosition(marker: MarkerInfo) {
         val view = marker.view
         val screenPos: PointF = map.projection.toScreenLocation(marker.latLng)
-        val viewWidth = if (view.width > 0) view.width.toFloat() else view.measuredWidth.toFloat()
-        val viewHeight = if (view.height > 0) view.height.toFloat() else view.measuredHeight.toFloat()
+        val (viewWidth, viewHeight) = view.getContentSize()
         val anchorOffsetX = viewWidth * marker.anchorX
         val anchorOffsetY = viewHeight * marker.anchorY
         view.x = screenPos.x - anchorOffsetX + marker.offsetX
@@ -83,6 +75,18 @@ class MarkerViewManager(
 
     fun findMarkerByView(view: View): MarkerInfo? = markers.find { it.view == view }
 
+    fun isPointInsideMarker(screenPoint: PointF): Boolean {
+        for (marker in markers) {
+            val v = marker.view
+            if (v.visibility != View.VISIBLE) continue
+            val (w, h) = v.getContentSize()
+            val rect = RectF(v.x, v.y, v.x + w, v.y + h)
+            if (rect.contains(screenPoint.x, screenPoint.y)) return true
+        }
+
+        return false
+    }
+
     fun updateMarkerCoordinate(
         markerInfo: MarkerInfo,
         latLng: LatLng,

package/android/src/main/java/org/maplibre/reactnative/components/annotations/pointannotation/MLRNPointAnnotation.kt

@@ -4,6 +4,7 @@ import android.content.Context
 import android.graphics.Bitmap
 import android.graphics.PointF
 import android.view.View
+import android.view.ViewGroup
 import com.facebook.react.bridge.ReactContext
 import com.facebook.react.uimanager.UIManagerHelper
 import org.maplibre.android.geometry.LatLng
@@ -26,18 +27,17 @@ class MLRNPointAnnotation(
     private var mMap: MapLibreMap? = null
     private var mMapView: MLRNMapView? = null
 
-    private val mHasChildren = false
-
     private var mCoordinate: Point? = null
 
-    public var mapLibreId: String? = null
-    public var title: String? = null
+    var mapLibreId: String? = null
+    var title: String? = null
     private var mSnippet: String? = null
 
     private var mAnchor: FloatArray? = null
     private var mOffset: FloatArray? = null
-    private val mIsSelected = false
     private var mDraggable = false
+    var selected = false
+        private set
 
     private var mChildView: View? = null
     private var mChildBitmap: Bitmap? = null
@@ -49,7 +49,7 @@ class MLRNPointAnnotation(
     private var mCalloutBitmapId: String? = null
 
     companion object {
-        const val MARKER_IMAGE_ID: String = "MARKER_IMAGE_ID"
+        const val DEFAULT_MARKER: String = "DEFAULT_MARKER"
     }
 
     private val surfaceId: Int
@@ -115,7 +115,7 @@ class MLRNPointAnnotation(
         // Return children in consistent order: child view first, then callout
         return when {
             index == 0 && mChildView != null -> mChildView
-            index == 0 && mChildView == null && mCalloutView != null -> mCalloutView
+            index == 0 && mCalloutView != null -> mCalloutView
             index == 1 && mChildView != null && mCalloutView != null -> mCalloutView
             else -> null
         }
@@ -139,6 +139,10 @@ class MLRNPointAnnotation(
             }
             addBitmapToStyle(mCalloutBitmap, mCalloutBitmapId)
         }
+
+        if (selected) {
+            mMapView?.selectAnnotation(this)
+        }
     }
 
     override fun removeFromMap(mapView: MLRNMapView) {
@@ -201,16 +205,12 @@ class MLRNPointAnnotation(
         refreshBitmap(v, v.left, v.top, v.right, v.bottom)
     }
 
-    fun getLatLng(): LatLng? = GeoJSONUtils.toLatLng(mCoordinate)
-
     val annotationId: Long? get() = mAnnotation?.id
 
     fun setSnippet(snippet: String?) {
         mSnippet = snippet
     }
 
-    fun getCalloutView(): View? = mCalloutView
-
     fun setLngLat(lngLat: DoubleArray?) {
         if (lngLat == null || lngLat.size < 2) {
             return
@@ -260,21 +260,37 @@ class MLRNPointAnnotation(
         }
     }
 
-    fun getMarker(): Symbol? = mAnnotation
-
-    fun onSelect(shouldSendEvent: Boolean) {
-        if (mCalloutView != null) {
-            makeCallout()
+    fun setSelectedAnnotation(selected: Boolean) {
+        if (mMapView != null && mAnnotation != null) {
+            if (selected) {
+                mMapView?.selectAnnotation(this)
+            } else {
+                mMapView?.deselectAnnotation(this)
+            }
+        } else {
+            this.selected = selected
         }
-        if (shouldSendEvent) {
+    }
+
+    fun onSelect() {
+        if (!selected) {
+            selected = true
+            if (mCalloutView != null) {
+                makeCallout()
+            }
+
             emitEvent("onSelected")
         }
     }
 
     fun onDeselect() {
-        emitEvent("onDeselected")
-        if (mCalloutSymbol != null) {
-            mMapView?.getSymbolManager()?.delete(mCalloutSymbol)
+        if (selected) {
+            selected = false
+            if (mCalloutSymbol != null) {
+                mMapView?.getSymbolManager()?.delete(mCalloutSymbol)
+            }
+
+            emitEvent("onDeselected")
         }
     }
 
@@ -325,12 +341,12 @@ class MLRNPointAnnotation(
     }
 
     private fun updateIconImage() {
-        if (mChildView != null) {
+        if (mChildView != null && ((mChildView as? ViewGroup)?.childCount ?: 0) > 0) {
             if (mChildBitmapId != null) {
                 mAnnotation?.iconImage = mChildBitmapId
             }
         } else {
-            mAnnotation?.iconImage = MARKER_IMAGE_ID
+            mAnnotation?.iconImage = DEFAULT_MARKER
             mAnnotation?.iconAnchor = "bottom"
         }
     }
@@ -418,8 +434,8 @@ class MLRNPointAnnotation(
     private fun getScreenPosition(latLng: LatLng): PointF? {
         val screenPos = mMap?.projection?.toScreenLocation(latLng)
         val density = getDisplayDensity()
-        screenPos?.x = screenPos?.x?.div(density) ?: 0f
-        screenPos?.y = screenPos?.y?.div(density) ?: 0f
+        screenPos?.x = screenPos.x.div(density)
+        screenPos?.y = screenPos.y.div(density)
         return screenPos
     }
 

package/android/src/main/java/org/maplibre/reactnative/components/annotations/pointannotation/MLRNPointAnnotationManager.kt

@@ -82,7 +82,8 @@ class MLRNPointAnnotationManager(
         annotation: MLRNPointAnnotation,
         selected: Boolean,
     ) {
-        // Selection is handled by the map view
+        annotation
+            .setSelectedAnnotation(selected)
     }
 
     @ReactProp(name = "lngLat")

package/android/src/main/java/org/maplibre/reactnative/components/mapview/MLRNMapView.kt

@@ -156,9 +156,6 @@ open class MLRNMapView(
 
     private var symbolManager: SymbolManager? = null
 
-    private var activePointAnnotationAnnotationId: Long? = null
-    private var pointAnnotationClicked = false
-
     private var markerViewManager: MarkerViewManager? = null
     private var offscreenAnnotationViewContainer: ViewGroup? = null
 
@@ -264,10 +261,6 @@ open class MLRNMapView(
                     }
 
                     is MLRNPointAnnotation -> {
-                        if (child.feature.annotationId == activePointAnnotationAnnotationId) {
-                            activePointAnnotationAnnotationId = null
-                        }
-
                         child.feature.mapLibreId?.let { pointAnnotations.remove(it) }
                     }
 
@@ -324,18 +317,11 @@ open class MLRNMapView(
         mapLibreMap!!.moveCamera(cameraUpdate, callback)
     }
 
-    fun getPointAnnotationByMarkerID(markerID: Long): MLRNPointAnnotation? {
-        for (key in pointAnnotations.keys) {
-            val annotation = pointAnnotations[key]
-
-            if (annotation != null && markerID == annotation.annotationId) {
-                return annotation
-            }
+    fun getPointAnnotationByAnnotationId(annotationId: Long): MLRNPointAnnotation? =
+        pointAnnotations.values.find {
+            it.annotationId == annotationId
         }
 
-        return null
-    }
-
     fun getSymbolManager(): SymbolManager = symbolManager!!
 
     interface FoundLayerCallback {
@@ -465,28 +451,24 @@ open class MLRNMapView(
         symbolManager = SymbolManager(this, this.mapLibreMap!!, style)
         symbolManager!!.setIconAllowOverlap(true)
         symbolManager!!.addClickListener { symbol ->
-            onMarkerClick(symbol)
+            onPointAnnotationClick(symbol)
             true
         }
         symbolManager!!.addDragListener(
             object : OnSymbolDragListener {
                 override fun onAnnotationDragStarted(symbol: Symbol) {
-                    pointAnnotationClicked = true
-                    val selectedMarkerID = symbol.id
-                    val annotation = getPointAnnotationByMarkerID(selectedMarkerID)
+                    val selectedPointAnnotationID = symbol.id
+                    val annotation = getPointAnnotationByAnnotationId(selectedPointAnnotationID)
                     annotation?.onDragStart()
                 }
 
                 override fun onAnnotationDrag(symbol: Symbol) {
-                    val selectedMarkerID = symbol.id
-                    val annotation = getPointAnnotationByMarkerID(selectedMarkerID)
+                    val annotation = getPointAnnotationByAnnotationId(symbol.id)
                     annotation?.onDrag()
                 }
 
                 override fun onAnnotationDragFinished(symbol: Symbol) {
-                    pointAnnotationClicked = false
-                    val selectedMarkerID = symbol.id
-                    val annotation = getPointAnnotationByMarkerID(selectedMarkerID)
+                    val annotation = getPointAnnotationByAnnotationId(symbol.id)
                     annotation?.onDragEnd()
                 }
             },
@@ -547,19 +529,14 @@ open class MLRNMapView(
     }
 
     override fun onMapClick(latLng: LatLng): Boolean {
-        if (pointAnnotationClicked) {
-            pointAnnotationClicked = false
-        }
-
-        if (activePointAnnotationAnnotationId != null) {
-            val active = pointAnnotations.values.find { it.annotationId == activePointAnnotationAnnotationId }
-            if (active != null) {
-                deselectAnnotation(active)
-            }
-        }
+        pointAnnotations.values.find { it.selected }?.let { deselectAnnotation(it) }
 
         val screenPoint = mapLibreMap!!.projection.toScreenLocation(latLng)
 
+        if (markerViewManager?.isPointInsideMarker(screenPoint) == true) {
+            return true
+        }
+
         val hits: MutableMap<String, MutableList<Feature>?> = HashMap()
         val hitPressableSources: MutableList<MLRNPressableSource<*>> = ArrayList()
         for (pressableSource in this.pressableSources) {
@@ -567,10 +544,10 @@ open class MLRNMapView(
 
             val pointWithHitbox =
                 RectF(
-                    screenPoint.x - hitbox.left,
-                    screenPoint.y - hitbox.top,
-                    screenPoint.x + hitbox.right,
-                    screenPoint.y + hitbox.bottom,
+                    screenPoint.x - (hitbox.left * displayDensity),
+                    screenPoint.y - (hitbox.top * displayDensity),
+                    screenPoint.x + (hitbox.right * displayDensity),
+                    screenPoint.y + (hitbox.bottom * displayDensity),
                 )
 
             val features =
@@ -581,6 +558,9 @@ open class MLRNMapView(
             }
         }
 
+        screenPoint.x /= this.displayDensity
+        screenPoint.y /= this.displayDensity
+
         if (hits.isNotEmpty()) {
             val source = getPressableSourceWithHighestZIndex(hitPressableSources)
             if (source != null && source.hasOnPress) {
@@ -599,11 +579,14 @@ open class MLRNMapView(
     }
 
     override fun onMapLongClick(latLng: LatLng): Boolean {
-        if (pointAnnotationClicked) {
-            pointAnnotationClicked = false
+        val screenPoint = mapLibreMap!!.projection.toScreenLocation(latLng)
+
+        if (markerViewManager?.isPointInsideMarker(screenPoint) == true) {
+            return true
         }
 
-        val screenPoint = mapLibreMap!!.projection.toScreenLocation(latLng)
+        screenPoint.x /= this.displayDensity
+        screenPoint.y /= this.displayDensity
 
         val event = MapPressEvent(surfaceId, id, "onLongPress", latLng, screenPoint)
         eventDispatcher?.dispatchEvent(event)
@@ -611,42 +594,24 @@ open class MLRNMapView(
         return false
     }
 
-    fun onMarkerClick(symbol: Symbol) {
-        pointAnnotationClicked = true
-        val selectedMarkerID = symbol.id
-
-        var activeAnnotation: MLRNPointAnnotation? = null
-        var nextActiveAnnotation: MLRNPointAnnotation? = null
-
-        for (key in pointAnnotations.keys) {
-            val pointAnnotation = pointAnnotations[key]
-            val currentAnnotationId = pointAnnotation!!.annotationId
-
-            if (activePointAnnotationAnnotationId == currentAnnotationId) {
-                activeAnnotation = pointAnnotation
-            }
+    fun onPointAnnotationClick(nextSymbol: Symbol) {
+        val nextSelectedPointAnnotation =
+            getPointAnnotationByAnnotationId(nextSymbol.id) ?: return
 
-            if (selectedMarkerID == currentAnnotationId && activePointAnnotationAnnotationId != currentAnnotationId) {
-                nextActiveAnnotation = pointAnnotation
-            }
-        }
-
-        if (activeAnnotation != null) {
-            deselectAnnotation(activeAnnotation)
-        }
-
-        if (nextActiveAnnotation != null) {
-            selectAnnotation(nextActiveAnnotation)
+        if (!nextSelectedPointAnnotation.selected) {
+            selectAnnotation(nextSelectedPointAnnotation)
         }
     }
 
-    fun selectAnnotation(annotation: MLRNPointAnnotation) {
-        activePointAnnotationAnnotationId = annotation.annotationId
-        annotation.onSelect(true)
+    fun selectAnnotation(nextSelectedPointAnnotation: MLRNPointAnnotation) {
+        pointAnnotations.values
+            .filter { it.selected && it !== nextSelectedPointAnnotation }
+            .forEach { it.onDeselect() }
+
+        nextSelectedPointAnnotation.onSelect()
     }
 
     fun deselectAnnotation(annotation: MLRNPointAnnotation) {
-        activePointAnnotationAnnotationId = null
         annotation.onDeselect()
     }
 
@@ -825,13 +790,12 @@ open class MLRNMapView(
             if (position.hasKey("right")) gravity = gravity or Gravity.END
             if (position.hasKey("top")) gravity = gravity or Gravity.TOP
             if (position.hasKey("bottom")) gravity = gravity or Gravity.BOTTOM
-            val density = this.displayDensity
             val margins =
                 intArrayOf(
-                    if (position.hasKey("left")) (density * position.getInt("left")).roundToInt() else 0,
-                    if (position.hasKey("top")) (density * position.getInt("top")).roundToInt() else 0,
-                    if (position.hasKey("right")) (density * position.getInt("right")).roundToInt() else 0,
-                    if (position.hasKey("bottom")) (density * position.getInt("bottom")).roundToInt() else 0,
+                    if (position.hasKey("left")) (displayDensity * position.getInt("left")).roundToInt() else 0,
+                    if (position.hasKey("top")) (displayDensity * position.getInt("top")).roundToInt() else 0,
+                    if (position.hasKey("right")) (displayDensity * position.getInt("right")).roundToInt() else 0,
+                    if (position.hasKey("bottom")) (displayDensity * position.getInt("bottom")).roundToInt() else 0,
                 )
             setGravity(gravity)
             setMargins(margins)
@@ -937,8 +901,7 @@ open class MLRNMapView(
         layers: ReadableArray?,
         filter: Expression?,
     ): WritableArray {
-        val density = this.displayDensity
-        val screenPoint = PointF(point.x * density, point.y * density)
+        val screenPoint = PointF(point.x * displayDensity, point.y * displayDensity)
 
         val features =
             mapLibreMap!!.queryRenderedFeatures(
@@ -981,9 +944,8 @@ open class MLRNMapView(
 
     fun project(mapCoordinate: LatLng): WritableArray {
         val pointInView = mapLibreMap!!.projection.toScreenLocation(mapCoordinate)
-        val density = this.displayDensity
-        pointInView.x /= density
-        pointInView.y /= density
+        pointInView.x /= displayDensity
+        pointInView.y /= displayDensity
         val payload: WritableArray = Arguments.createArray()
 
         payload.pushDouble(pointInView.x.toDouble())
@@ -993,9 +955,8 @@ open class MLRNMapView(
     }
 
     fun unproject(pointInView: PointF): WritableArray {
-        val density = this.displayDensity
-        pointInView.x *= density
-        pointInView.y *= density
+        pointInView.x *= displayDensity
+        pointInView.y *= displayDensity
 
         val latLng = mapLibreMap!!.projection.fromScreenLocation(pointInView)
 
@@ -1348,7 +1309,7 @@ open class MLRNMapView(
         }
 
     private fun getPressableSourceWithHighestZIndex(sources: MutableList<MLRNPressableSource<*>>?): MLRNPressableSource<*>? {
-        if (sources == null || sources.isEmpty()) {
+        if (sources.isNullOrEmpty()) {
             return null
         }
 
@@ -1401,10 +1362,10 @@ open class MLRNMapView(
      */
     private fun setUpImage(loadedStyle: Style) {
         loadedStyle.addImage(
-            "MARKER_IMAGE_ID",
+            MLRNPointAnnotation.DEFAULT_MARKER,
             BitmapFactory.decodeResource(
                 this.resources,
-                R.drawable.red_marker,
+                R.drawable.default_marker,
             ),
         )
     }

package/ios/components/annotations/point-annotation/MLRNPointAnnotation.m

@@ -1,6 +1,7 @@
 #import "MLRNPointAnnotation.h"
 #import <React/UIView+React.h>
 #import "MLRNMapTouchEvent.h"
+#import "MLRNMapView.h"
 #import "MLRNUtils.h"
 
 const float CENTER_X_OFFSET_BASE = -0.5f;
@@ -75,6 +76,9 @@ const float CENTER_Y_OFFSET_BASE = -0.5f;
   _reactSelected = reactSelected;
 
   if (_map != nil) {
+    if ([_map isKindOfClass:[MLRNMapView class]]) {
+      ((MLRNMapView *)_map).annotationSelected = YES;
+    }
     if (_reactSelected) {
       [_map selectAnnotation:self animated:NO completionHandler:nil];
     } else {
@@ -120,8 +124,22 @@ const float CENTER_Y_OFFSET_BASE = -0.5f;
   BOOL hasCustomChildren = (self.reactSubviews.count > 0) || (self.customChildCount > 0);
 
   if (!hasCustomChildren) {
-    // default pin view
-    return nil;
+    // Replicate MLNMapView's to allow unified tap/selection behavior.
+    NSBundle *mapLibreBundle = [NSBundle bundleForClass:[MLNMapView class]];
+    UIImage *pinImage = [UIImage imageNamed:@"default_marker"
+                                   inBundle:mapLibreBundle
+              compatibleWithTraitCollection:nil];
+
+    UIImageView *pinImageView = [[UIImageView alloc] initWithImage:pinImage];
+    [pinImageView sizeToFit];
+
+    MLNAnnotationView *defaultView = [[MLNAnnotationView alloc] initWithReuseIdentifier:nil];
+    defaultView.bounds = pinImageView.bounds;
+    [defaultView addSubview:pinImageView];
+    defaultView.centerOffset = CGVectorMake(0, 0);
+    defaultView.enabled = YES;
+    [defaultView addGestureRecognizer:customViewTap];
+    return defaultView;
   } else {
     // custom view
     self.enabled = YES;
@@ -143,6 +161,9 @@ const float CENTER_Y_OFFSET_BASE = -0.5f;
 }
 
 - (void)_handleTap:(UITapGestureRecognizer *)recognizer {
+  if ([_map isKindOfClass:[MLRNMapView class]]) {
+    ((MLRNMapView *)_map).annotationSelected = YES;
+  }
   [_map selectAnnotation:self animated:NO completionHandler:nil];
 }
 

package/ios/components/annotations/point-annotation/MLRNPointAnnotationComponentView.mm

@@ -238,25 +238,15 @@ using namespace facebook::react;
   const auto &newViewProps = *std::static_pointer_cast<MLRNPointAnnotationProps const>(props);
 
   if (oldViewProps.id != newViewProps.id) {
-    NSString *idValue = [NSString stringWithCString:newViewProps.id.c_str()
-                                           encoding:NSUTF8StringEncoding];
-    [_view setId:idValue];
+    [_view setId:RCTNSStringFromString(newViewProps.id)];
   }
 
   if (oldViewProps.title != newViewProps.title) {
-    NSString *titleValue = newViewProps.title.empty()
-                               ? nil
-                               : [NSString stringWithCString:newViewProps.title.c_str()
-                                                    encoding:NSUTF8StringEncoding];
-    [_view setReactTitle:titleValue];
+    [_view setReactTitle:RCTNSStringFromStringNilIfEmpty(newViewProps.title)];
   }
 
   if (oldViewProps.snippet != newViewProps.snippet) {
-    NSString *snippetValue = newViewProps.snippet.empty()
-                                 ? nil
-                                 : [NSString stringWithCString:newViewProps.snippet.c_str()
-                                                      encoding:NSUTF8StringEncoding];
-    [_view setReactSnippet:snippetValue];
+    [_view setReactSnippet:RCTNSStringFromStringNilIfEmpty(newViewProps.snippet)];
   }
 
   if (oldViewProps.selected != newViewProps.selected) {

package/ios/components/camera/MLRNCameraComponentView.mm

@@ -24,8 +24,6 @@ using namespace facebook::react;
 
 - (instancetype)initWithFrame:(CGRect)frame {
   if (self = [super initWithFrame:frame]) {
-    static const auto defaultProps = std::make_shared<const MLRNCameraProps>();
-    _props = defaultProps;
     [self prepareView];
   }
 
@@ -34,11 +32,14 @@ using namespace facebook::react;
 
 - (void)prepareForRecycle {
   [super prepareForRecycle];
-  [_view setInitialViewState:nil];
-  [_view setStop:nil];
+  [self prepareView];
 }
 
 - (void)prepareView {
+  static const auto defaultProps = std::make_shared<const MLRNCameraProps>();
+
+  _props = defaultProps;
+
   _view = [[MLRNCamera alloc] init];
 
   // Capture weak self reference to prevent retain cycle