Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

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

Ouverte
  • Quelque chose ne va pas ?
#5,980 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 2 jours

Personne n'a encore pris cette issue.

Évaluation

Difficulté
3/5
Temps estimé
1-2 jours
Accessibilité débutants
58/100
Type d'issue
Bug
Clarté
Plutôt claire
Activité
Active
Stack technique
ios, typescript
Domaine
mobile

Piste de recherche

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.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

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.

Langage dominant
TypeScript
Étoiles
16k
Forks
5k
Merge moyen
1 j 4 h
PR mergées (30 j)
4

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de react-native-maps/react-native-maps

Toutes les issues de react-native-maps/react-native-maps

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.