Skip to content

fix(PointAnnotation): fix nested children not rendering on New Architecture (Fabric) #4231

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mfazekas merged 2 commits into from
Jun 21, 2026
+12 −4
Merged

fix(PointAnnotation): fix nested children not rendering on New Architecture (Fabric) #4231

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1789a2f
fix(PointAnnotation): wrap children in non-collapsable View to fix Fa…
Jun 21, 2026
b29384f
simplify callout/content split in PointAnnotation render
Jun 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions example/src/examples/Annotations/PointAnnotationAnchors.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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,
Expand Down
12 changes: 10 additions & 2 deletions src/components/PointAnnotation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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';

Expand Down Expand Up @@ -235,10 +236,17 @@ class PointAnnotation extends NativeBridgeComponent(
onMapboxPointAnnotationDragEnd: this._onDragEnd,
coordinate: this._getCoordinate(),
};
const children = React.Children.toArray(this.props.children);
const callout = children.find(
(c) => React.isValidElement(c) && c.type === Callout,
);
const content = children.filter((c) => c !== callout);

return (
// @ts-expect-error just codegen stuff
<RNMBXPointAnnotationNativeComponent {...props}>
{this.props.children}
<View collapsable={false}>{content}</View>
{callout}
</RNMBXPointAnnotationNativeComponent>
);
}
Expand Down
Loading