[iOS][Google Maps][Fabric] Custom marker children draw cropped/mis-scaled when the child wrapper is a layout-only View (Fabric flattens it)

Start with the provided A/B reproduction on a physical iOS device using Fabric, then inspect the Fabric iOS Google Maps Marker child-container path. Verify how a layout-only wrapper is handled and whether the intended 84×84 bounds are preserved. Done means both markers render identically without requiring user-supplied collapsable={false}, with regression coverage or documentation for the behavior.

Summary

On the New Architecture, if a <Marker>'s direct child is a layout-only View (no backgroundColor, borderWidth, opacity, etc.) Fabric flattens it out of the native view hierarchy. The marker's iconView then measures the inner content instead of the intended wrapper, and the marker draws cropped or mis-scaled.

collapsable={false} on that wrapper fixes it completely, with no native change. So it's arguably working as designed at the RN level, but it's a silent trap: the same JSX renders correctly on 1.20.x, because the legacy interop path never flattened marker children. It only appears on the 1.29.0 Fabric marker path from #5944.

I suspect this explains some of the "custom markers broken on New Arch" reports where native patches only half-work, no native patch can recover a view Fabric already removed.

Reproducible sample code

import React from 'react';
import {StyleSheet, Text, View} from 'react-native';
import MapView, {Marker, PROVIDER_GOOGLE} from 'react-native-maps';

const REGION = {latitude: 52.5163, longitude: 13.3777, latitudeDelta: 0.01, longitudeDelta: 0.01};

export default function App() {
  return (
    <MapView provider={PROVIDER_GOOGLE} style={{flex: 1}} initialRegion={REGION}>
      {/* A: layout-only wrapper -> Fabric flattens it -> draws cropped */}
      <Marker coordinate={{latitude: 52.5163, longitude: 13.3737}} anchor={{x: 0.5, y: 0.5}}>
        <View style={styles.wrapper}>
          <View style={styles.card}><Text style={styles.label}>A</Text></View>
        </View>
      </Marker>

      {/* B: identical but non-collapsable -> draws correctly */}
      <Marker coordinate={{latitude: 52.5163, longitude: 13.3817}} anchor={{x: 0.5, y: 0.5}}>
        <View collapsable={false} style={styles.wrapper}>
          <View style={styles.card}><Text style={styles.label}>B</Text></View>
        </View>
      </Marker>
    </MapView>
  );
}

const styles = StyleSheet.create({
  // No appearance props, so this is a flattening candidate.
  wrapper: {width: 84, height: 84, alignItems: 'center', justifyContent: 'center'},
  card: {
    width: 48, height: 48, borderRadius: 10, backgroundColor: '#3355ff',
    alignItems: 'center', justifyContent: 'center',
  },
  label: {color: '#ffffff', fontSize: 14, fontWeight: '600'},
});

Steps to reproduce

1. New Architecture app (newArchEnabled: true), react-native-maps 1.29.0, a Google Maps iOS API key.
2. Run on a physical iOS device (a development build), not Expo Go.
3. Compare the two markers.

Expected result

A and B look identical: an 84×84 transparent wrapper with a 48×48 blue card centred in it.

Actual result

B is correct. A is wrong. The icon view is sized to the inner 48×48 card rather than the 84×84 wrapper, so the wrapper's contents are clipped and mis-scaled. Exactly what you see depends on where the inner content sits in the wrapper; in my app it looked like only one corner of the card was being drawn. Plain Text children are affected the same way, so it isn't an image problem.

How I narrowed it down, all on device via hot reload:

• onLayout on the marker child reported the correct 84×84 frame, so React layout was fine.
• Forcing tracksViewChanges on permanently didn't help, so not a stale snapshot.
• Re-latching the icon view (redraw()) didn't help, so not a size-latch timing problem.
• Giving the wrapper a visible border, which makes it unflattenable, fixed it completely.

React Native Maps Version

1.29.0

What platforms are you seeing the problem on?

iOS (Google Maps)

React Native Version

0.81.5

What version of Expo are you using?

SDK 54 (not available in the dropdown above, the list stops at SDK 53)

Device(s)

iPad mini (6th generation), iPadOS 26.6

Additional information

Suggested fix: have the library set collapsable={false} on the container it already puts marker children in, so user JSX can't be silently optimised away. Failing that, a line in the custom-marker docs and the 1.29 release notes would save people a lot of time, the symptom doesn't suggest the cause at all.

Possibly related, not verified. Flagging as triage leads, not diagnoses: #5971 (icon view stays 0×0; its reproduction uses a layout-only <View style={{alignItems: 'center'}}> as the marker child, and that thread is currently trading hand-written native patches, worth someone trying collapsable={false} there), #5964 (same CGRectZero family), #5953, and #5877 (the Android-side report). Flattening is an RN-level behaviour rather than provider-level, so the same trap plausibly applies on Android, but I have no Android measurement and am not claiming one.

Scope of my evidence: iOS + PROVIDER_GOOGLE + Fabric, physical device, on 1.29.0 with PR #5966 applied via patch-package, which is the only library modification. The flattening and its fix are JS-side and didn't depend on that patch, but I haven't run stock 1.29.0, so I can't say how this presents without #5966.