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

[Salmankhan033]

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:
  Map flickers on certain devices mapbox/mapbox-maps-android#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

[Salmankhan033]

I created a simple example with an empty MapView—no data, no heavy markers, and no additional layers. However, the map still flickers on the same Samsung Galaxy Note 10 device.

here is the full code

/**
 * Map Test Screen
 *
 * Bare Mapbox MapView with only the current-location puck.
 * No API markers, connection lines, heatmap, or star field.
 * Use this to check whether flicker/blink happens without app data layers.
 *
 * Navigate to: /(dashboard)/map-test
 */

import React, { useCallback, useRef, useState } from 'react';

import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';

import { Ionicons } from '@expo/vector-icons';
import { useRouter } from 'expo-router';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

import { getMapboxConfig, getMapboxStyle } from '@/config/mapbox';
import { Colors, withOpacity } from '@/theme/colors';
import { BorderRadius, Spacing } from '@/theme/spacing';

let MapboxGL: any = null;
try {
  MapboxGL = require('@rnmapbox/maps').default;
  MapboxGL.setAccessToken(process.env.EXPO_PUBLIC_MAPBOX_API_KEY || '');
} catch {
  MapboxGL = null;
}

const FALLBACK_CENTER: [number, number] = [-80.1918, 25.7617]; // Miami

export default function MapTestScreen() {
  const router = useRouter();
  const insets = useSafeAreaInsets();
  const cameraRef = useRef<any>(null);
  const [hasCentered, setHasCentered] = useState(false);
  const mapboxConfig = getMapboxConfig();
  const mapStyle = getMapboxStyle('dark');

  const handleUserLocationUpdate = useCallback(
    (location: any) => {
      if (hasCentered || !cameraRef.current) return;

      const coords = location?.coords;
      if (!coords) return;

      const { longitude, latitude } = coords;
      if (!Number.isFinite(longitude) || !Number.isFinite(latitude)) return;

      cameraRef.current.setCamera({
        centerCoordinate: [longitude, latitude],
        zoomLevel: mapboxConfig.defaultZoom,
        animationDuration: 0,
      });
      setHasCentered(true);
    },
    [hasCentered, mapboxConfig.defaultZoom]
  );

  if (!MapboxGL) {
    return (
      <View style={[styles.fallback, { paddingTop: insets.top }]}>
        <Text style={styles.fallbackText}>Mapbox not available</Text>
        <TouchableOpacity onPress={() => router.back()} style={styles.backButton}>
          <Text style={styles.backButtonText}>Go back</Text>
        </TouchableOpacity>
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <View style={[styles.header, { paddingTop: insets.top + Spacing.sm }]}>
        <TouchableOpacity
          onPress={() => router.back()}
          style={styles.backButton}
          hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
          testID="map-test-back"
        >
          <Ionicons name="arrow-back" size={22} color={Colors.dark.foreground} />
        </TouchableOpacity>
        <View style={styles.headerTextWrap}>
          <Text style={styles.headerTitle}>Map Test</Text>
          <Text style={styles.headerSubtitle}>
            Bare MapView + current location only (no API markers)
          </Text>
        </View>
      </View>

      <MapboxGL.MapView
        style={styles.map}
        styleURL={mapStyle}
        logoEnabled={false}
        attributionEnabled={false}
        scaleBarEnabled={false}
        compassEnabled={false}
        zoomEnabled
        scrollEnabled
        rotateEnabled={false}
        pitchEnabled={false}
        testID="map-test-mapview"
      >
        <MapboxGL.Camera
          ref={cameraRef}
          defaultSettings={{
            centerCoordinate: FALLBACK_CENTER,
            zoomLevel: mapboxConfig.defaultZoom,
          }}
          animationDuration={0}
        />

        <MapboxGL.UserLocation
          visible
          showsUserHeadingIndicator
          onUpdate={handleUserLocationUpdate}
          androidRenderMode="gps"
          minDisplacement={18}
        />
      </MapboxGL.MapView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Colors.dark.background,
  },
  header: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    zIndex: 10,
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: Spacing.md,
    paddingBottom: Spacing.sm,
    backgroundColor: withOpacity(Colors.dark.background, 0.85),
  },
  headerTextWrap: {
    flex: 1,
    marginLeft: Spacing.sm,
  },
  headerTitle: {
    color: Colors.dark.foreground,
    fontSize: 16,
    fontWeight: '600',
  },
  headerSubtitle: {
    color: Colors.dark.foregroundSecondary,
    fontSize: 12,
    marginTop: 2,
  },
  backButton: {
    width: 40,
    height: 40,
    borderRadius: BorderRadius.full,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: Colors.dark.backgroundSecondary,
  },
  backButtonText: {
    color: Colors.dark.foreground,
    fontSize: 14,
  },
  map: {
    flex: 1,
  },
  fallback: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: Colors.dark.background,
    gap: Spacing.md,
  },
  fallbackText: {
    color: Colors.dark.foregroundSecondary,
    fontSize: 14,
  },
});

WhatsApp.Video.2026-08-04.at.15.02.01.mp4

I also noticed scratch-like lines appearing when using multiple layers and markers. These visual artifacts are visible while interacting with the map and seem to occur more frequently when several layers are rendered simultaneously.