Mapbox Version
11.24.3
React Native Version
0.83.6
Platform
iOS
@rnmapbox/maps version
10.3.0
Standalone component to reproduce
import React from 'react';
import {Button, View} from 'react-native';
import {MapView, Camera} from '@rnmapbox/maps';
const NYC = [-74.006, 40.7128];
class BugReportExample extends React.Component {
state = {projection: 'globe'};
camera = React.createRef();
flyOut = () => {
// Projection is committed before the fly so the curvature emerges during
// the zoom-out rather than popping in when the camera lands.
this.setState({projection: 'globe'}, () => {
requestAnimationFrame(() => {
this.camera.current?.setCamera({
centerCoordinate: NYC,
zoomLevel: 1,
pitch: 0,
heading: 0,
animationDuration: 2500,
animationMode: 'flyTo',
});
});
});
};
flyIn = () => {
this.setState({projection: 'mercator'}, () => {
this.camera.current?.setCamera({
centerCoordinate: NYC,
zoomLevel: 13,
pitch: 0,
heading: 0,
animationDuration: 2000,
animationMode: 'flyTo',
});
});
};
render() {
return (
<View style={{flex: 1}}>
<MapView
style={{flex: 1}}
styleURL="mapbox://styles/mapbox/standard"
projection={this.state.projection}>
<View style={{flexDirection: 'row', justifyContent: 'space-around'}}>
);
}
}
export default BugReportExample;
Observed behavior and steps to reproduce
Our app uses a single MapView whose projection toggles between globe and
mercator, driven by programmatic setCamera({animationMode: 'flyTo'}) calls of
2000–2500ms when the user switches tabs.
Steps:
- Run the component above on a physical device in a Release build.
- Tap "Fly in" to get to mercator zoom 13.
- Tap "Fly out" to fly back to globe zoom 1 over 2500ms.
During the zoom-out fly the frame rate drops visibly, and the hitches land at the
same point in the animation on every run rather than appearing at random. Zoom-out
is noticeably worse than zoom-in.
This is not our app's compositing. We stripped the app down behind feature flags
until nothing was rendered above the map, no blur or glass surfaces, no list
content, no overlays, and an opaque tab bar replacing the iOS 26 Liquid Glass one
and the hitches were unchanged in both severity and position.
Expected behavior
A programmatic flyTo should hold the display refresh rate for the duration of the
animation. The camera path is known up front and no user interaction is involved,
so there is nothing to schedule reactively.
Notes / preliminary analysis
Additional links and references
No response
Mapbox Version
11.24.3
React Native Version
0.83.6
Platform
iOS
@rnmapbox/mapsversion10.3.0
Standalone component to reproduce
import React from 'react';
import {Button, View} from 'react-native';
import {MapView, Camera} from '@rnmapbox/maps';
const NYC = [-74.006, 40.7128];
class BugReportExample extends React.Component {
state = {projection: 'globe'};
camera = React.createRef();
flyOut = () => {
// Projection is committed before the fly so the curvature emerges during
// the zoom-out rather than popping in when the camera lands.
this.setState({projection: 'globe'}, () => {
requestAnimationFrame(() => {
this.camera.current?.setCamera({
centerCoordinate: NYC,
zoomLevel: 1,
pitch: 0,
heading: 0,
animationDuration: 2500,
animationMode: 'flyTo',
});
});
});
};
flyIn = () => {
this.setState({projection: 'mercator'}, () => {
this.camera.current?.setCamera({
centerCoordinate: NYC,
zoomLevel: 13,
pitch: 0,
heading: 0,
animationDuration: 2000,
animationMode: 'flyTo',
});
});
};
render() {
return (
<View style={{flex: 1}}>
<MapView
style={{flex: 1}}
styleURL="mapbox://styles/mapbox/standard"
projection={this.state.projection}>
<View style={{flexDirection: 'row', justifyContent: 'space-around'}}>
);
}
}
export default BugReportExample;
Observed behavior and steps to reproduce
Our app uses a single
MapViewwhoseprojectiontoggles betweenglobeandmercator, driven by programmaticsetCamera({animationMode: 'flyTo'})calls of2000–2500ms when the user switches tabs.
Steps:
During the zoom-out fly the frame rate drops visibly, and the hitches land at the
same point in the animation on every run rather than appearing at random. Zoom-out
is noticeably worse than zoom-in.
This is not our app's compositing. We stripped the app down behind feature flags
until nothing was rendered above the map, no blur or glass surfaces, no list
content, no overlays, and an opaque tab bar replacing the iOS 26 Liquid Glass one
and the hitches were unchanged in both severity and position.
Expected behavior
A programmatic
flyToshould hold the display refresh rate for the duration of theanimation. The camera path is known up front and no user interaction is involved,
so there is nothing to schedule reactively.
Notes / preliminary analysis
mercator-to-globe handoff into two visible flashes around zoom 5–7
(Visible two-stage full-viewport flash during globe/mercator projection handoff on 11.26.0 (not visible on 11.24.3) mapbox/mapbox-maps-ios#2438), so upgrading past 11.24.3 is not currently an
option for us and we cannot confirm whether newer versions fix this.
layers whose opacity is ramped by zoom. The repro above uses
standardinstead.in the native SDK's camera animation and tile pipeline.
Additional links and references
No response