Hacktoberfest 2026:维护者为十月标记出来的 issue,仍然开放、适合新手。 浏览 Hacktoberfest issue

[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

未关闭
#5,982 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

评估

难度
3/5
预计耗时
1-2 天
新手友好度
67/100
Issue 类型
缺陷
描述清晰度
基本清楚
活跃度
活跃
技术栈
react-native, typescript
领域
mobile

调研方向

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.

由索引模型根据 Issue 内容生成。

描述

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.

主要语言
TypeScript
星标
16k
派生
5k
平均合并
17 小时 45 分钟
30 天内合并 PR
2

贡献指南

打开贡献指南

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

react-native-maps/react-native-maps 的其他 Issue

查看 react-native-maps/react-native-maps 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。