[iOS] [Apple Maps] [New Architecture] Custom-view Marker with flat=true drifts off-anchor on zoom-out, and inner transform: rotate is silently ignored
Summary
Custom-view <Marker> (children = <View> containing an <Image> plus an absolute-positioned dot, with flat={true} and transform: [{rotate: ...}] on the wrapper View) renders off-anchor on Apple Maps under New Architecture. The visual center of the marker drifts increasingly toward the upper-left of its declared coordinate LatLng as the user zooms out. The same code on [email protected] + RN 0.81 + Old Architecture (Paper) rendered correctly.
Two additional issues observed in the same setup, which may be related:
- Two-finger map rotation gets silently reset to North on subsequent pinch-zoom, even though no code path calls
setCamera({heading: 0}). Possible New-Arch-only side effect ofcameraZoomRangeor iOS 17+ MapKit auto-recovery. - Replacing
transform: [{rotate: …}]on the inner View with the Marker'srotationprop does not fix the drift, and additionally breaks the marker's response to heading changes — the marker no longer rotates at all. Therotationprop appears to be silently ignored on custom-view markers withflat=trueunder New Arch.
This is distinct from #5911 (markers disappear after zoom/pan) and #5912 (image prop fails to load under bridgeless mode) — in our case the marker renders, it is just positioned incorrectly and won't rotate.
Environment
| Version | |
|---|---|
react-native-maps |
1.27.2 |
react-native |
0.83.6 |
react |
19.2.0 |
expo |
^55.0.0 |
| iOS | 17.x / 18.x (real device + simulator) |
| Provider | PROVIDER_DEFAULT (Apple Maps) |
newArchEnabled |
true |
Reproducible sample code
<Marker
coordinate={{ latitude: 52.5146, longitude: 13.3501 }}
anchor={{ x: 0.5, y: 0.5 }}
flat
tracksViewChanges
>
<View
style={{
width: 60,
height: 150,
alignItems: 'center',
justifyContent: 'center',
transform: [{ rotate: '45deg' }], // or any other angle, including 0
}}
>
<Image
source={require('./assets/camper.png')}
resizeMode="contain"
style={{ width: '100%', height: '100%' }}
/>
<View
style={{
position: 'absolute',
top: '50%',
left: '50%',
width: 16,
height: 16,
marginTop: -8,
marginLeft: -8,
backgroundColor: 'red',
borderRadius: 8,
}}
/>
</View>
</Marker>The red dot is centered absolutely within the wrapper, so it should sit visually on the marker's coordinate. Under New Arch on Apple Maps, the dot is offset from the LatLng (verified by overlaying a separate small-dot marker at the same coordinate — they don't align).
Steps to reproduce
- Expo SDK 55+ app with
"newArchEnabled": trueinapp.json(default for SDK 55). - Render the marker above on Apple Maps (
PROVIDER_DEFAULT). - At the initial camera distance the offset is small. Pinch-zoom out: the wrapper view (van/icon) drifts progressively up and to the left relative to the inner absolute dot, which stays anchored correctly.
- Bonus: two-finger rotate the map, then pinch-zoom. Map heading silently resets to 0° even though no
animateCamera/setCamerais triggered from JS.
Expected result
- The wrapper view's center stays at the marker's
coordinateregardless of zoom. - User-set map heading remains stable across pinch-zoom.
rotationprop on<Marker flat>rotates the custom-view children in world space.
Actual result
- Wrapper view drifts toward upper-left, increasingly visible at low zoom levels.
- Map heading resets to 0° on pinch-zoom.
rotationprop has no visible effect on custom-view markers under New Arch.
Workaround
Setting "newArchEnabled": false in app.json (and running expo prebuild --clean + pod install) restores all three behaviors to match the pre-Fabric (Paper) renderer. Confirmed on real iPhone 17 Pro Max running iOS 18 / Apple Maps with [email protected].
This is the workaround we're shipping until the Fabric path on Apple Maps is fixed, but Old Architecture is being deprecated by Expo so this isn't viable long-term.
Related
- #5911 — disappearing markers under New Arch (different symptom)
- #5912 —
imageprop fails under bridgeless mode (different symptom; we use custom-view children, not theimageprop)
Source: react-native-maps/react-native-maps