rnmapbox / rnmapbox/maps

Globe-projection MapView renders only atmosphere space-color on ~50% of cold starts under RN 0.86 New Architecture — engine init race, upstream: mapbox/mapbox-maps-ios#2436

Open
#4,278 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
Kotlin
Stars
2.9k
Forks
947
Avg merge
6d 37m
Merged PRs (30d)
1

Description

Summary — heads-up for RN 0.86 / Expo SDK 57 users with globe-projection maps

On React Native 0.86 (New Architecture), a MapView using globe projection that is mounted
during app launch initializes into a broken state on ~50% of cold starts: the Mapbox engine's
camera subsystem stays in Mercator constraints while the globe style is active, and the map renders
only the atmosphere space-color — permanently, silently (style-load events fire, no error).

Full investigation, instrumented evidence and the internal-state fingerprint are in the upstream
engine report: mapbox/mapbox-maps-ios#2436. Key facts:

  • Reproduced identically on Mapbox iOS 11.16.0 / 11.20.1 / 11.23.1 / 11.28.0 (no safe pin).
  • Same app + SDK worked on RN 0.81; RN 0.86's launch timing exposes the race.
  • The wrapper is exonerated as the cause: we patched RNMBXMapView to pass the style into
    MapInitOptions at creation (eliminating the default-style → reactStyleURL swap entirely,
    verified per-launch) and removed every JS camera write and every map child — the rate was
    unchanged. This is engine-level.
  • The broken state is per-launch sticky: a freshly created MapView later in the same launch
    inherits it. Camera commands and removeFromSuperview/re-add cycles do not recover it
    (verified with instrumentation inside MapView.swift); only a full react-native-screens
    detach/re-attach of the host screen (e.g. a tab navigation away and back) recovers — 100%
    across 20/20 automated cold starts vs the ~50% baseline.
  • Measured with an automated cold-start harness (10-run batches); happy to share it.

Filing here so rnmapbox users hitting "globe renders then goes black on launch, fixed by switching
tabs" on RN 0.86 find this instead of burning days — and in case the maintainers want to track the
upstream fix or consider a wrapper-level mitigation (e.g. an optional detect-and-recover using the
Mercator-clamp fingerprint described upstream).

Environment

@rnmapbox/maps 10.3.5 · RNMapboxMapsVersion 11.28.0 · RN 0.86.2 (New Architecture, bridgeless) ·
Expo SDK 57 · iOS 18 device + simulator (equivalent symptom also observed on Android).

Minimal reproducible example

import React from 'react';
import Mapbox, { MapView, Camera } from '@rnmapbox/maps';

Mapbox.setAccessToken('pk.YOUR_TOKEN');

// Globe projection + atmosphere declared in the style, as in a typical globe home screen.
const GLOBE_STYLE = JSON.stringify({
  version: 8,
  projection: { name: 'globe' },
  fog: {
    color: '#4A2412',
    'high-color': '#FF7A2E',
    'space-color': '#0D0806',
    'horizon-blend': 0.006,
    'star-intensity': 0.25,
  },
  sources: {
    composite: { type: 'vector', url: 'mapbox://mapbox.mapbox-streets-v8' },
  },
  layers: [
    { id: 'land', type: 'background', paint: { 'background-color': 'hsl(24, 28%, 13%)' } },
  ],
});

// Mount this as the app's LAUNCH screen (the race lives in the app's first
// seconds). Cold-start repeatedly: force-quit → relaunch. On RN 0.86
// (New Architecture) ~50% of cold starts render only the fog space-color
// (#0D0806) after the first moments — permanently, with no error event.
// Also reproduces with a stock style: styleURL="mapbox://styles/mapbox/dark-v11"
// plus projection="globe".
export default function GlobeRepro() {
  return (
    <MapView
      style={{ flex: 1 }}
      styleJSON={GLOBE_STYLE}
      projection="globe"
      scaleBarEnabled={false}
    >
      <Camera defaultSettings={{ centerCoordinate: [0, 20], zoomLevel: 1.0 }} />
    </MapView>
  );
}

Diagnostic detail for maintainers: in the broken state, animated setCamera flights to a
high-latitude target (e.g. Iceland, lat 64.96) settle with cameraState.center.latitude
clamped to exactly the Mercator center-latitude limit for the viewport (~27.0° here) while
the globe style is confirmed active — the engine's camera constraints are running in Mercator
mode against a globe renderer. Full instrumented evidence: mapbox/mapbox-maps-ios#2436.

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.

Research direction

Start with the upstream report mapbox/mapbox-maps-ios#2436 and reproduce the minimal GlobeRepro example across repeated cold starts. Then read the RNMBXMapView and MapView.swift instrumentation described in the issue, including MapInitOptions handling; done means a confirmed diagnosis, upstream tracking, or a maintainer-approved wrapper-level mitigation with regression coverage.

Written by the indexing model from the issue text.

Assessment

Tech stack
ios, react-native, swift, typescript
Domain
mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Needs clarification
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.