[New Architecture][iOS] Polygon/Geojson overlays never render with Google Maps (Fabric)

Closed
#5,928 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
68/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
ios, objective-c, react
Domain
mobile

Research direction

Start in ios/AirGoogleMaps/AIRGoogleMap.mm at insertReactSubview: and removeReactSubview:, then inspect RNMapsGooglePolygonView.mm and its updateProps path handling. Reproduce the Fabric Google iOS example, checking polygon and GeoJSON lifecycle behavior and the fewer-than-three-points case. Done means valid overlays render and removal is safe without attaching an invalid path.

Written by the indexing model from the issue text.

Description

stale

Summary

With the New Architecture (Fabric) enabled and provider="google" on iOS, <Polygon> and <Geojson> overlays never render. Markers in the same map render fine. The GMSPolygon is created but never attached to the map.

Environment

  • react-native-maps: 1.27.2
  • Platform: iOS, provider="google" (Google Maps SDK)
  • New Architecture (Fabric): enabled
  • React Native 0.83.x / Expo SDK 55

Reproduction

Minimal map with New Architecture enabled:

<MapView
  provider="google"
  style={{ flex: 1 }}
  initialRegion={{ latitude: 52.09, longitude: 5.12, latitudeDelta: 0.05, longitudeDelta: 0.05 }}
>
  <Polygon
    coordinates={[
      { latitude: 52.10, longitude: 5.10 },
      { latitude: 52.10, longitude: 5.14 },
      { latitude: 52.08, longitude: 5.12 },
    ]}
    fillColor="rgba(0,128,255,0.4)"
    strokeColor="#0066ff"
    strokeWidth={2}
  />
</MapView>

Expected: a filled triangle. Actual: nothing renders. (A <Marker> added to the same map does render.)

Root cause

In ios/AirGoogleMaps/AIRGoogleMap.mm, the New-Arch Google polygon branch of insertReactSubview: / removeReactSubview: leaves the attach/detach calls commented out, so the GMSPolygon is never assigned to the map:

} else if ([NSStringFromClass([subview class]) isEqualToString:@"RNMapsGooglePolygonView"]) {
//      RNMapsGooglePolygonView *polygon = (RNMapsGooglePolygonView*)subview;
//      [polygon didInsertInMap:self];   // <-- never attached → never renders
    [self.polygons addObject:subview];
}

RNMapsGooglePolygonView didInsertInMap: (which sets _view.map = map) is never invoked, and didRemoveFromMap is likewise never called on removal.

Note: attaching unconditionally is also unsafe under Fabric — coordinates can arrive via updateProps after mount, and attaching a GMSPolygon whose path has < 3 points crashes Google Maps (null-deref in gmssdk::CoordsToPoints during setMap:). So the attach must be deferred until the path is renderable.

Suggested fix

Invoke didInsertInMap: / didRemoveFromMap for the New-Arch polygon view, and defer the actual attach until the path is valid (≥ 3 points), re-checking from updateProps:

// AIRGoogleMap.mm — insertReactSubview: (and the mirror in removeReactSubview: → didRemoveFromMap)
if ([subview respondsToSelector:@selector(didInsertInMap:)]) {
    [subview performSelector:@selector(didInsertInMap:) withObject:self];
}
// RNMapsGooglePolygonView.mm
- (void)didInsertInMap:(AIRGoogleMap *)map { _pendingMap = map; [self attachIfReady]; }

- (void)attachIfReady {
    if (_view != nil && _view.map == nil && _pendingMap != nil
        && _view.path != nil && _view.path.count >= 3) {
        _view.map = _pendingMap;   // safe: path is renderable
    }
}
// ...and call [self attachIfReady] at the end of updateProps:, after coordinates are applied.

I have a complete, working patch-package patch against 1.27.2 for this (and several related New-Arch overlay issues) and am happy to open a PR if that's preferred.

Related: #5355 (Fabric support tracking), #5457.

Dominant language
TypeScript
Stars
16k
Forks
5k
Avg merge
9d 9h
Merged PRs (30d)
3

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from react-native-maps/react-native-maps

All issues in react-native-maps/react-native-maps

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.