[Bug]: MapView flickers and some Scratches line while zooming in and out on some devices
Nobody has claimed this yet.
- Dominant language
- Kotlin
- Stars
- 2.9k
- Forks
- 947
- Avg merge
- 6d 37m
- Merged PRs (30d)
- 1
Description
Mapbox Version
11.15.0
React Native Version
0.81.5
Platform
Android
@rnmapbox/maps version
10.3.1
Standalone component to reproduce
import React from 'react';
import {
MapView,
ShapeSource,
LineLayer,
Camera,
} from '@rnmapbox/maps';
const aLine = {
type: 'LineString',
coordinates: [
[-74.00597, 40.71427],
[-74.00697, 40.71527],
],
};
class BugReportExample extends React.Component {
render() {
return (
<MapView style={{flex: 1}}>
<Camera centerCoordinate={[-74.00597, 40.71427]} zoomLevel={14} />
<ShapeSource id="idStreetLayer" shape={aLine}>
<LineLayer id="idStreetLayer" />
</ShapeSource>
</MapView>
);
}
}
Observed behavior and steps to reproduce
Observed Behavior
When continuously zooming in and out on the map, the map view flickers on some Android devices. The flickering occurs during the zoom animation and results in an unstable rendering experience.
Steps to Reproduce
- Open a screen containing a
MapView. - Interact with the map using pinch-to-zoom gestures.
- Zoom in and out repeatedly.
- Observe that the map flickers intermittently on some Android devices.
- I am facing on Android Note 10 device
Environment
- Platform: Android
- React Native: 0.79.0
- @rnmapbox/maps: 10.3.0
- Mapbox SDK: 11.16.2
The issue has not been observed on iOS.
Expected behavior
The map should render smoothly while zooming in and out without any flickering or visual artifacts, regardless of the Android device.
Notes / preliminary analysis
- The issue appears to be Android-specific.
- It occurs only on certain Android devices and is difficult to reproduce consistently across all hardware.
- The problem seems related to the rendering pipeline during zoom animations.
- I found a similar issue in the native Android Mapbox SDK:
https://github.com/mapbox/mapbox-maps-android/issues/2479
I am unsure whether this is caused by the React Native wrapper or inherited from the underlying Android SDK.
Additional links and references
Video: https://drive.google.com/file/d/12KfnYgl4ppzbFsJC0yQAoLfE8ocM-Lw8/view?usp=sharing
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the standalone React Native example using MapView, Camera, ShapeSource, and LineLayer, then reproduce the flicker during pinch zoom on the reported Android device and versions. Compare the behavior with native Android SDK issue 2479 to determine whether the wrapper contributes; done means the cause and an appropriate fix or upstream limitation are documented.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- android, javascript, react-native
- Domain
- mobile-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100