Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Raster Tiles aren't saved via OfflineManager

See original GitHub issue

Environment

Mapbox (GL) implementation: v10
Mapbox (GL) version: 10.7.0
@rnmapbox/maps Version #main
Platform: iOS
React Native Version 0.68
Platform OS: iOS 15
Device: any
Emulator/ Simulator: yes
Dev OS: Monterey

Standalone component to reproduce

import React from 'react';
import {StyleSheet, View} from 'react-native';
import MapboxGL from '@rnmapbox/maps';

const styles = StyleSheet.create({
    mapView: {flex: 1},
});

class BugExample extends React.Component {
    constructor(props) {
      super(props);

      this.state = {
        showMap: false, // change to true to show map
      };
    }

    async componentDidMount() {
        // delete for testing
        // console.log(await MapboxGL.offlineManager.deletePack('field-1'));

        console.log('>>>>>>>>>>start creating pack', );
        await MapboxGL.offlineManager.createPack(
            {
                name: 'field-1', // any
                bounds: [[32.23782523101579, 46.39912398458027], [33.43887899585923, 47.041693870480955]], // any LARGE area
                styleURL: MapboxGL.StyleURL.Satellite,
                minZoom: 10,
                maxZoom: 12,
            },
            (pack, status) => {
                console.log('>>>>>>>>>>pack progress', pack.name, status.percentage, status.completedTileCount);
            },
            (pack, error) => {
                console.log('>>>>>>>>>>pack error', pack.name, error);
            },
        );

        console.log(await MapboxGL.offlineManager.getPacks());
    }

    render() {
        // change showMap to true to render map when offline (wifi off / airplane mode) to test offline loading of tiles
        if (!this.state.showMap) return <View />;

        return (
            <View style={styles.mapView}>
                <MapboxGL.MapView
                    ref={(c) => (this._map = c)}
                    onPress={this.onPress}
                    style={styles.mapView}
                    styleURL={MapboxGL.StyleURL.Satellite}
                >
                    <MapboxGL.Camera
                        zoomLevel={10}
                        centerCoordinate={[33.43887899585923, 47.041693870480955]}
                    />
                </MapboxGL.MapView>
            </View>
        );
    }
}

export default BugExample;
}

Observed behavior and steps to reproduce

Any raster style (eg; Satellite or SatelliteStreet) is able to be downloaded successfully; however, when loaded offline the raster images aren’t rendered. The vector assets are rendered successfully (streets, city names, etc). The rest of the map is blurry as it is unable to load the raster images.

start sample app & wait until download is complete
go offline
flip state.showMap to true
Map is rendered without raster tiles and only shows vector assets

Expected behavior

Raster tiles should be rendered when offline.

Notes / preliminary analysis

The map pack is created successfully for a raster style; however, it doesn’t seem like the raster assets are actually downloaded.

EDIT: It appears the iOS code is outdated and the zoom range needs to be passed in the TilesetDescriptorOptions. Android appears to still be broken however.