MapLoad error Failed to load tile - createPack success, getPack success, but map fails to show downloaded region

Describe the bug

Tiles and sprites fail to load in a region contained within downloaded pack at a zoom level between min and max zoom level for downloaded pack

To Reproduce

1. Delete app and re-install to ensure all mapbox tiles are cleared
2. createPack

    await MapboxGL.offlineManager.createPack({
      name: 'pack_name',
      styleURL: MapboxGL.StyleURL.Outdoors,
      minZoom: 1,
      maxZoom: 10,
      bounds: [[-110, 40], [-112, 39]],
    }, this.progressListener, this.errorListener);

1. getPack (keep app open and then cut internet so getPack returns successfully - https://github.com/rnmapbox/maps/issues/2054)

const mapPack = await MapboxGL.offlineManager.getPack('pack_name');

1. Attempt to show region contained within tiles pack at zoom level less than max level of tile pack

      <View style={StyleSheet.flatten([styles.mapContainer, style])}>
        <MapboxGL.MapView 
          ref={(ref) => (this._map = ref)}
          style={styles.map} 
          styleURL={MapboxGL.StyleURL.Outdoors}
          minZoomLevel={1}
          maxZoomLevel={10}
        >
          <MapboxGL.Camera 
            ref={(ref) => (this._camera = ref)}
            zoomLevel={8}
            centerCoordinate={[-111, 39]}
            bounds={{
              ne: [-110, 40],
              sw: [-112, 38],
            }}
            minZoomLevel={1}
            maxZoomLevel={10}
            animationDuration={10}
          />

        </MapboxGL.MapView> 
      </View>

1. Attempt to view map and note the following errors

 ERROR  Mapbox error MapLoad error Failed to load sprite:  {"level": "error", "message": "MapLoad error Failed to load sprite: "}
 ERROR  Mapbox error MapLoad error Failed to load tile:  {"level": "error", "message": "MapLoad error Failed to load tile: "}

1. Enable network and navigate back to map - note that map tiles are visible as expected

Versions:

• Platform: iOS
• Platform OS: iOS 15.5
• Device: iPhone 12
• Emulator/ Simulator: yes
• Dev OS: MacOS 12.4
• @rnmapbox/maps: “@rnmapbox/maps”: “github:rnmapbox/maps#main”,
• MapboxImpl: $RNMapboxMapsImpl = ‘mapbox’
• Mapbox version: $RNMapboxMapsVersion = ‘~> 10.5.0’
• React Native Version: 0.64.3

[wen-kai]

Looks like our bounds were reversed – we were using nw & se. Documentation specifies ne & sw. After adjusting bounds it works perfectly. EDIT: only works on IOS – offline mode appears to be broken on Android.

[bryanboyko]

Same issue after trying the exact configuration in the example offlineManager implementation found here https://github.com/nitaliano/react-native-mapbox-gl/blob/master/example/src/components/CreateOfflineRegion.js

ERROR  Mapbox error MapLoad error Failed to load tile:  {"level": "error", "message": "MapLoad error Failed to load tile: "}

createPack

    const screenDims = Dimensions.get('window');
    const CENTER_COORD = [-73.970895, 40.723279];
    const MAPBOX_VECTOR_TILE_SIZE = 512;
    const bnds = geoViewport.bounds(
      CENTER_COORD,
      12,
      [screenDims.width, screenDims.height],
      MAPBOX_VECTOR_TILE_SIZE,
    );

    const options = {
      name: 'pack_name',
      styleURL: MapboxGL.StyleURL.Street,
      bounds: [[bnds[0], bnds[1]], [bnds[2], bnds[3]]],
      minZoom: 10,
      maxZoom: 20,
    };

getPack

{"_metadata": null, "pack": {"bounds": "{\"type\":\"FeatureCollection\",\"features\":[{\"type\":\"Feature\",\"properties\":{},\"geometry\":{\"type\":\"Point\",\"coordinates\":[-74.00442123413086,40.668399962792876]}},{\"type\":\"Feature\",\"properties\":{},\"geometry\":{\"type\":\"Point\",\"coordinates\":[-73.93747329711914,40.77820166245534]}}]}", "metadata": "{
  \"name\" : \"pack_name\"
}"}}

Map implementation

      <View style={StyleSheet.flatten([styles.mapContainer, style])}>
        <MapboxGL.MapView 
          ref={(ref) => (this._map = ref)}
          style={styles.map} 
          styleURL={MapboxGL.StyleURL.Street}
          minZoomLevel={10}
          maxZoomLevel={20}
        >
          <MapboxGL.Camera 
            ref={(ref) => (this._camera = ref)}
            zoomLevel={15}
            centerCoordinate={CENTER_COORD}
            bounds={{

              ne: [bnds[0], bnds[1]],
              sw: [bnds[2], bnds[3]],
            }}
            minZoomLevel={10}
            maxZoomLevel={20}
            animationDuration={10}
          />

        </MapboxGL.MapView> 
      </View>