Looking for a working Offline Manager example for android

[nick-d2g]

I’m currently unable to see the tiles using the offline manager on Android, does anyone have a working example? The pack download completes without error but when offline the map is completely black.

[mfazekas]

Offline seems to work for me on android, are you sure you're downloading for correct style, zoom and bounding box?!

[nick-d2g]

Maybe my bounds are too large an area? My map component uses the Mapbox.StyleURL.Satellite also.

import Mapbox, { offlineManager } from '@rnmapbox/maps';
import React from 'react';
import { Button, View } from 'react-native';

const OfflineExample = () => {
    return (
        <View style={{ flex: 1, width: 500, backgroundColor: '#ffffff40' }}>
            <Button
                title="Create Pack"
                onPress={async () => {
                    const options = {
                        name: 'Example Pack',
                        styleURL: Mapbox.StyleURL.Satellite,
                        bounds: [
                            [-0.2, 51.4], // southwest [lon, lat] 
                            [0.05, 51.6], // northeast [lon, lat]
                        ] as [[number, number], [number, number]],
                        minZoom: 10,
                        maxZoom: 16,
                    };
                    await offlineManager.createPack(options, (region, status) =>
                        console.log('=> progress callback region:', 'status: ', status)
                    );
                }}
            />
            <Button
                title="Get All Packs"
                onPress={async () => {
                    console.log('=> getting all packs');
                    const packs = await offlineManager.getPacks();
                    console.log('=> all packs:', packs);
                }}
            />
            <Button
                title="Delete All Packs"
                onPress={async () => {
                    console.log('=> deleting all packs');
                    const packs = await offlineManager.getPacks();
                    for (const pack of packs) {
                        await offlineManager.deletePack(pack.name);
                        console.log('=> deleted pack:', pack.name);
                    }
                    console.log('=> all packs deleted');
                }}
            />
        </View>
    );
};

export default OfflineExample;

Final log from the Create Pack button:

{
   "completedResourceCount":22,
   "completedResourceSize":417165978,
   "erroredResourceCount":0,
   "loadedResourceCount":22,
   "loadedResourceSize":417165978,
   "name":"Example Pack",
   "percentage":100,
   "requiredResourceCount":22,
}

[nick-d2g]

If I am online and pan around the map view, the in built cache retains the tiles even when offline after app restart.

However if I try to download a predefined area (without viewing it in the map view first) and then go offline and try to view this area it is black or just an incredibly blurred image.

Similar results when trying the legacy version and other examples listed in this issue #3790

[mfazekas]

https://github.com/rnmapbox/maps/blob/main/example/src/examples/CacheOffline/OfflineTilesets.tsx

The way I tested was:

• Turn off network start the app, verify that map was not loaded when pressing Center to Offline Location, exited the example
• Turn on network start the app, press Create, wait for progress to reach 100%. Press Center to Offline Location. When zooming out you should see that only the defined area is available.

See captured images at: #3979