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-view Marker with no anchor is bottom-anchored on 1.29.0 but was centred on 1.20.x — undocumented change

Ouverte
  • Quelque chose ne va pas ?
#5,982 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
67/100
Type d'issue
Bug
Clarté
Plutôt claire
Activité
Active
Stack technique
react-native, typescript
Domaine
mobile

Piste de recherche

Start at the anchor prop and the iOS Google Maps Fabric marker path, then run the supplied reproduction on 1.29.0 and compare it with 1.20.x. Done means confirming whether the default changed intentionally and either restoring the centred behavior or documenting the 1.29 release impact, including the explicit anchor workaround.

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

Description

Summary

A <Marker> with custom children and no anchor prop is positioned differently on 1.29.0's Fabric marker path than on 1.20.x: 1.29.0 leaves Google's default bottom-centre groundAnchor, pinning the child view's bottom edge to the coordinate, where before the view appeared centred on it.

The visible effect is worse than a constant offset. Because it's a fixed number of pixels (half the marker height), the ground distance it covers grows as you zoom out, so it reads as markers drifting further off-position the further out you go, not as a static anchor difference. That's what made it hard to recognise; I went looking for a coordinate or projection bug first.

anchor={{x: 0.5, y: 0.5}} restores the old appearance.

Two asks: confirm whether the change was intentional, and if so note it in the 1.29 release notes, since it silently moves every unanchored custom marker in an existing app.

Reproducible sample code
import React, {useState} from 'react';
import {Pressable, StyleSheet, Text, View} from 'react-native';
import MapView, {Marker, PROVIDER_GOOGLE} from 'react-native-maps';

const COORD = {latitude: 52.5163, longitude: 13.3777};
const REGION = {...COORD, latitudeDelta: 0.004, longitudeDelta: 0.004};

export default function App() {
  const [centred, setCentred] = useState(false);

  return (
    <View style={{flex: 1}}>
      <MapView provider={PROVIDER_GOOGLE} style={{flex: 1}} initialRegion={REGION}>
        <Marker coordinate={COORD} anchor={centred ? {x: 0.5, y: 0.5} : undefined}>
          {/* collapsable={false} is needed for an unrelated reason, see #5980 */}
          <View collapsable={false} style={styles.wrapper}>
            <View style={styles.card} />
            <View style={styles.centreDot} />
          </View>
        </Marker>
      </MapView>

      <Pressable style={styles.button} onPress={() => setCentred(v => !v)}>
        <Text style={styles.buttonText}>
          anchor: {centred ? '{x: 0.5, y: 0.5}' : 'not set'}
        </Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  wrapper: {width: 84, height: 84, alignItems: 'center', justifyContent: 'center'},
  card: {width: 48, height: 48, borderRadius: 10, backgroundColor: '#3355ff'},
  // Marks the exact centre of the wrapper, to compare against the map.
  centreDot: {position: 'absolute', width: 2, height: 2, backgroundColor: '#ff0000'},
  button: {
    position: 'absolute', bottom: 48, alignSelf: 'center',
    backgroundColor: '#000000cc', padding: 12, borderRadius: 8,
  },
  buttonText: {color: '#ffffff'},
});
Steps to reproduce
  1. New Architecture app, react-native-maps 1.29.0, Google Maps iOS key, physical iOS device (development build, not Expo Go).
  2. Zoomed in close, note where the red centre dot sits against a fixed map feature.
  3. Tap the button. The marker jumps by about half its height (~42px here).
  4. Pinch out several zoom levels and tap again. Same pixel jump, far more ground covered. With the anchor unset the marker is a street or two from its coordinate.
Expected result

Either the unanchored custom-view marker is centred on its coordinate as on 1.20.x, or the change to bottom-centre anchoring is documented as breaking for 1.29.

Actual result

With no anchor, 1.29.0 pins the bottom edge of the 84×84 wrapper to the coordinate, so the marker's visual centre sits ~42px above where the coordinate is. Zooming out grows the geographic size of that fixed offset. anchor={{x: 0.5, y: 0.5}} fixes it at every zoom.

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

What I measured vs what I'm inferring. Measured on device: on 1.29.0 an unanchored custom-view marker is bottom-anchored, the offset is a fixed pixel amount, its apparent geographic error grows on zoom-out, and the explicit anchor fixes it. Not controlled: the "1.20.x centred it" half. My app ran 1.20.1 with unanchored custom markers that appeared centred, and the drift appeared when I moved to 1.29.0, but I never ran this same reproduction on both versions. If the 1.20 default was also bottom-centre, please treat this as a documentation request only.

iOS only; no Android measurement. Environment: RN 0.81.5, React 19.1.0, Expo SDK 54. I run 1.29.0 with PR #5966 via patch-package and no other library change. Nothing in that patch touches anchoring, and the fix here is a pure JS prop.

Possibly related, different provider: #5918 and #5939 (Apple Maps anchor drift with flat={true}) and #5965 (Apple Maps mispositioning on content resize). This is the Google path with no flat involved, so probably distinct, but they may share a root cause in how the Fabric marker path forwards anchoring.

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.