Summary
On iOS with Fabric, a <Marker> whose icon is a custom child view never appears.
The marker is created and is attached to the map — its icon view simply has a
frame of {0, 0, 0, 0}, and Google Maps draws a zero-sized icon view as nothing.
Android is unaffected. <Polyline> and the map itself render correctly, which is
what makes this look like a data or coordinate problem at first.
Reproducible sample code
<MapView provider={PROVIDER_GOOGLE} initialRegion={region} style={{flex: 1}}>
{mosques.map(m => (
<Marker key={m.id} coordinate={{latitude: m.lat, longitude: m.lng}}>
<View style={{alignItems: 'center'}}>
<View style={{width: 34, height: 34, borderRadius: 17, borderWidth: 2.5}} />
<View style={{width: 2.5, height: 9}} />
</View>
</Marker>
))}
</MapView>
Steps to reproduce
<MapView provider={PROVIDER_GOOGLE} initialRegion={region} style={{flex: 1}}>
{mosques.map(m => (
<Marker key={m.id} coordinate={{latitude: m.lat, longitude: m.lng}}>
<View style={{alignItems: 'center'}}>
<View style={{width: 34, height: 34, borderRadius: 17, borderWidth: 2.5}} />
<View style={{width: 2.5, height: 9}} />
))}
Expected result
the custom pins appear.
Actual result
nothing appears. The map, its POIs, and any <Polyline> render fine.
React Native Maps Version
1.29.0
What platforms are you seeing the problem on?
iOS (Apple Maps), iOS (Google Maps)
React Native Version
0.86.2
What version of Expo are you using?
Not using Expo
Device(s)
Iphone 17 pro max
Additional information
Each of these was tested on a real build, and none of them is the cause:
- Not the custom children — a bare
<Marker coordinate title /> with no children
is also invisible.
- Not the provider — reproduces with
PROVIDER_GOOGLE and with Apple Maps.
- Not
tracksViewChanges — forcing it permanently true changes nothing.
- Not mount timing — holding markers back until after
onMapReady changes nothing.
- Not component registration —
RNMapsGoogleMarkerView is in the app's
RCTThirdPartyComponentsProvider, and the real implementation is what compiled
(2.2 MB object file defining the class; PlaceHolderGoogleMarkerView.o is empty,
so HAVE_GOOGLE_MAPS is correctly set).
- Not data — a
<Polyline> drawn through the very same marker coordinates renders.
Summary
On iOS with Fabric, a
<Marker>whose icon is a custom child view never appears.The marker is created and is attached to the map — its icon view simply has a
frame of
{0, 0, 0, 0}, and Google Maps draws a zero-sized icon view as nothing.Android is unaffected.
<Polyline>and the map itself render correctly, which iswhat makes this look like a data or coordinate problem at first.
Reproducible sample code
Steps to reproduce
<MapView provider={PROVIDER_GOOGLE} initialRegion={region} style={{flex: 1}}>
{mosques.map(m => (
<Marker key={m.id} coordinate={{latitude: m.lat, longitude: m.lng}}>
<View style={{alignItems: 'center'}}>
<View style={{width: 34, height: 34, borderRadius: 17, borderWidth: 2.5}} />
<View style={{width: 2.5, height: 9}} />
))}
Expected result
the custom pins appear.
Actual result
nothing appears. The map, its POIs, and any
<Polyline>render fine.React Native Maps Version
1.29.0
What platforms are you seeing the problem on?
iOS (Apple Maps), iOS (Google Maps)
React Native Version
0.86.2
What version of Expo are you using?
Not using Expo
Device(s)
Iphone 17 pro max
Additional information
Each of these was tested on a real build, and none of them is the cause:
<Marker coordinate title />with no childrenis also invisible.
PROVIDER_GOOGLEand with Apple Maps.tracksViewChanges— forcing it permanentlytruechanges nothing.onMapReadychanges nothing.RNMapsGoogleMarkerViewis in the app'sRCTThirdPartyComponentsProvider, and the real implementation is what compiled(2.2 MB object file defining the class;
PlaceHolderGoogleMarkerView.ois empty,so
HAVE_GOOGLE_MAPSis correctly set).<Polyline>drawn through the very same marker coordinates renders.