[Bug]: onMapIdle is not getting triggered when the internet is unreachable

[pranshuchittora]

Mapbox Implementation

Mapbox

Mapbox Version

11.8.0

React Native Version

0.75.x

Platform

iOS, Android

@rnmapbox/maps version

#main

Standalone component to reproduce

example/ShowMap.tsx

import React, { useState, useEffect } from 'react';
import { Alert } from 'react-native';
import Mapbox from '@rnmapbox/maps';
import { ButtonGroup } from '@rneui/base';

const ShowMap = () => {
  useEffect(() => {
    Mapbox.locationManager.start();

    return (): void => {
      Mapbox.locationManager.stop();
    };
  }, []);

  const onMapChange = (index: number, newStyleURL: Mapbox.StyleURL): void => {};

  const onUserMarkerPress = (): void => {
    Alert.alert('You pressed on the user location annotation');
  };

  return (
    <>
      <Mapbox.MapView
        testID={'show-map'}
        onMapIdle={() => {
          console.debug('======> onMapIdle');
        }}
        onCameraChanged={() => {
          console.debug('======> onCameraChanged');
        }}
      >
        <Mapbox.Camera
          followZoomLevel={12}
          followUserLocation
          animationDuration={0}
        />

        <Mapbox.UserLocation onPress={onUserMarkerPress} />
      </Mapbox.MapView>
    </>
  );
};

export default ShowMap;

Observed behavior and steps to reproduce

When the device is offline, onMapIdle method is not being triggered as expected.

Steps to repro

1. Run the example app, replace the ShowMap.tsx file with the above code. Just add the console logs as mentioned
2. Go offline and run the app.
3. Open the ShowMap screen, try changing the layer.
4. Pan the map and check for the logs

---

iOS

Screen.Recording.2024-12-04.at.16.36.22.mov

Android

Screen.Recording.2024-12-04.at.16.28.03.mp4

Expected behavior

onMapIdle should fire while being offline. It does fires when the device is online.

Notes / preliminary analysis

Most likely due to the SDK not able to fetch the tiles successfully, in turn not triggering the onMapIdle

Additional links and references

No response

Full Code

import React, { useState, useEffect } from 'react';
import { Alert } from 'react-native';
import Mapbox from '@rnmapbox/maps';
import { ButtonGroup } from '@rneui/base';

import sheet from '../../styles/sheet';
import { onSortOptions } from '../../utils';
import { ExampleWithMetadata } from '../common/ExampleMetadata'; // exclude-from-doc

const ShowMap = () => {
  const _mapOptions = Object.keys(Mapbox.StyleURL)
    .map((key) => {
      return {
        label: key,
        data: (Mapbox.StyleURL as any)[key], // bad any, because enums
      };
    })
    .sort(onSortOptions);

  const [styleURL, setStyleURL] = useState({ styleURL: _mapOptions[0].data });

  useEffect(() => {
    Mapbox.locationManager.start();

    return (): void => {
      Mapbox.locationManager.stop();
    };
  }, []);

  const onMapChange = (index: number, newStyleURL: Mapbox.StyleURL): void => {
    setStyleURL({ styleURL: newStyleURL });
  };

  const onUserMarkerPress = (): void => {
    Alert.alert('You pressed on the user location annotation');
  };

  return (
    <>
      <ButtonGroup
        buttons={_mapOptions.map((i) => i.label)}
        selectedIndex={_mapOptions.findIndex(
          (i) => i.data === styleURL.styleURL,
        )}
        onPress={(index) => onMapChange(index, _mapOptions[index].data)}
      />
      <Mapbox.MapView
        styleURL={styleURL.styleURL}
        style={sheet.matchParent}
        testID={'show-map'}
        onMapIdle={() => {
          console.debug('======> onMapIdle');
        }}
        onCameraChanged={() => {
          console.debug('======> onCameraChanged');
        }}
      >
        <Mapbox.Camera
          followZoomLevel={12}
          followUserLocation
          animationDuration={0}
        />

        <Mapbox.UserLocation onPress={onUserMarkerPress} />
      </Mapbox.MapView>
    </>
  );
};

export default ShowMap;

/* end-example-doc */

const metadata: ExampleWithMetadata['metadata'] = {
  title: 'Show Map',
  tags: ['Camera#followZoomLevel', 'UserLocation#onPress'],
  docs: `
Shows a map with the user location annotation enabled, and on press of the user location annotation, an alert is shown.
`,
};
ShowMap.metadata = metadata;