rnmapbox / rnmapbox/maps

[Bug]: MapView flickers and some Scratches line while zooming in and out on some devices

Open
#4,272 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug 🪲
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
  1. Open a screen containing a MapView.
  2. Interact with the map using pinch-to-zoom gestures.
  3. Zoom in and out repeatedly.
  4. Observe that the map flickers intermittently on some Android devices.
  5. 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
Image

Video: https://drive.google.com/file/d/12KfnYgl4ppzbFsJC0yQAoLfE8ocM-Lw8/view?usp=sharing

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 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.