From 1789a2fffb980b392d94897fe2d9504749618406 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mikl=C3=B3s=20Fazekas?= <boga@MBPM5P.local>
Date: Sun, 21 Jun 2026 12:51:26 +0200
Subject: [PATCH 1/2] fix(PointAnnotation): wrap children in non-collapsable
 View to fix Fabric view flattening

In React Native's New Architecture (Fabric), a View inside PointAnnotation
can get its children lifted up to become direct siblings in the native child
list. This triggers the "supports max 1 subview" error and causes the bitmap
snapshot to miss nested children (text labels disappear, only the empty outer
View is captured).

Wrapping content children in a View with collapsable={false} prevents Fabric
from flattening the user's View, so the native layer always sees a single
content child regardless of nesting depth.

Also removes the manual collapsable={false} workaround from the
PointAnnotationAnchors example, since the library now handles it.

Fixes #3682
---
 .../Annotations/PointAnnotationAnchors.js        |  4 ++--
 src/components/PointAnnotation.tsx               | 16 ++++++++++++++--
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/example/src/examples/Annotations/PointAnnotationAnchors.js b/example/src/examples/Annotations/PointAnnotationAnchors.js
index 4184e9e524..87d9a6f1c2 100644
--- a/example/src/examples/Annotations/PointAnnotationAnchors.js
+++ b/example/src/examples/Annotations/PointAnnotationAnchors.js
@@ -81,7 +81,7 @@ const PointAnnotationAnchors = (props) => {
           coordinate={p.coordinate}
           anchor={p.anchor}
         >
-          <View style={styles.small} collapsable={false}>
+          <View style={styles.small}>
             <Text style={[styles.text, { color: 'white' }]}>
               x={p.anchor.x.toPrecision(2)}, y={p.anchor.y.toPrecision(2)}
             </Text>
@@ -103,7 +103,7 @@ const PointAnnotationAnchors = (props) => {
             coordinate={p.coordinate}
             anchor={p.anchor}
           >
-            <View style={[styles.large, p.containerStyle]} collapsable={false}>
+            <View style={[styles.large, p.containerStyle]}>
               <View
                 style={{
                   height: ANNOTATION_SIZE * 2,
diff --git a/src/components/PointAnnotation.tsx b/src/components/PointAnnotation.tsx
index cf8c6f5750..34d0ca1cb0 100644
--- a/src/components/PointAnnotation.tsx
+++ b/src/components/PointAnnotation.tsx
@@ -1,5 +1,5 @@
 import React, { type SyntheticEvent, type Component } from 'react';
-import { StyleSheet, type ViewProps } from 'react-native';
+import { StyleSheet, View, type ViewProps } from 'react-native';
 import {
   type Feature,
   type GeoJsonProperties,
@@ -16,6 +16,7 @@ import RNMBXPointAnnotationNativeComponent from '../specs/RNMBXPointAnnotationNa
 import NativeRNMBXPointAnnotationModule from '../specs/NativeRNMBXPointAnnotationModule';
 
 import NativeBridgeComponent, { type RNMBEvent } from './NativeBridgeComponent';
+import Callout from './Callout';
 
 export const NATIVE_MODULE_NAME = 'RNMBXPointAnnotation';
 
@@ -235,10 +236,21 @@ class PointAnnotation extends NativeBridgeComponent(
       onMapboxPointAnnotationDragEnd: this._onDragEnd,
       coordinate: this._getCoordinate(),
     };
+    const childArray = React.Children.toArray(this.props.children);
+    const calloutIndex = childArray.findIndex(
+      (child) => React.isValidElement(child) && child.type === Callout,
+    );
+    const callout = calloutIndex !== -1 ? childArray[calloutIndex] : null;
+    const content =
+      calloutIndex !== -1
+        ? childArray.filter((_, i) => i !== calloutIndex)
+        : childArray;
+
     return (
       // @ts-expect-error just codegen stuff
       <RNMBXPointAnnotationNativeComponent {...props}>
-        {this.props.children}
+        <View collapsable={false}>{content}</View>
+        {callout}
       </RNMBXPointAnnotationNativeComponent>
     );
   }

From b29384f490908f72b41d72da91ca0d8e06d9f1d8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mikl=C3=B3s=20Fazekas?= <boga@MBPM5P.local>
Date: Sun, 21 Jun 2026 12:56:21 +0200
Subject: [PATCH 2/2] simplify callout/content split in PointAnnotation render

---
 src/components/PointAnnotation.tsx | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/components/PointAnnotation.tsx b/src/components/PointAnnotation.tsx
index 34d0ca1cb0..3c889e042a 100644
--- a/src/components/PointAnnotation.tsx
+++ b/src/components/PointAnnotation.tsx
@@ -236,15 +236,11 @@ class PointAnnotation extends NativeBridgeComponent(
       onMapboxPointAnnotationDragEnd: this._onDragEnd,
       coordinate: this._getCoordinate(),
     };
-    const childArray = React.Children.toArray(this.props.children);
-    const calloutIndex = childArray.findIndex(
-      (child) => React.isValidElement(child) && child.type === Callout,
+    const children = React.Children.toArray(this.props.children);
+    const callout = children.find(
+      (c) => React.isValidElement(c) && c.type === Callout,
     );
-    const callout = calloutIndex !== -1 ? childArray[calloutIndex] : null;
-    const content =
-      calloutIndex !== -1
-        ? childArray.filter((_, i) => i !== calloutIndex)
-        : childArray;
+    const content = children.filter((c) => c !== callout);
 
     return (
       // @ts-expect-error just codegen stuff