react-native-mapbox-gl: display offline pack with mapbox offline manager

[alonbraymok]

hey everyone,

I'm building a mobile app where users can see tours in their current positions.
I want to support places without an internet connection so I choose Mapbox for map implementation.
I used to download the map with the offline manager as some as described in the doc:

the process was successfully created and I can see the pack when I use getPacks method

I'm having trouble when trying to display the pack that was created in an offline mood in the map component

is this the correct way of doing it?

thanks

[sabarikobagapau]

using above code map is loading in offline please help ?

[wordisthebird]

Any progress with this?

[monuv10]

Any fix on this ??

[mfazekas]

Duplicate of #1773

[nitesh047]

Any fix??

[mfazekas]

OfflineManager should work, but it's automatic, you don't have to provide the offlinePack to the MapView

[nitesh047]

Okay..So I just need to download the offline pack. And it will automatically fetch the region when I go offline??

[NitayMG]

Can someone please provide us an example of the correct way to load to Mapview an offlinePack?

[joeburmon]

the pack was created but when i use the getPacks method, it gives me this return

completedResourceCount: 0
completedResourceSize: 0
metadata: "{"name":"offlinePack","_rnmapbox":{"bounds":{"coordinates":[[[125.721493,8.742201],[125.654202,8.742201],[125.654202,8.99051],[125.721493,8.99051],[125.721493,8.742201]]],"type":"Polygon"},"styleURI":"https:\/\/api.maptiler.com\/maps\/553f0d54-79a3-4fa0-8e32-5a4dea2af6e3\/style.json?key=MyMapKey","zoomRange":[14,20]}}"
percentage: null
requiredResourceCount: 0
state: "complete"

the state property returns complete, but i got

completedResourceCount: 0
completedResourceSize: 0
requiredResourceCount: 0

[pinokokol]

Hi, this happened to me too, i fixed it by flipping the bounds:

const bounds = await mapRef.current.getVisibleBounds() //returns (ne, sw)

await Mapbox.offlineManager.createPack(
        {
          name: packName,
          styleURL: Mapbox.StyleURL.Street,
          bounds: [
            [bounds[0][0], bounds[0][1]],
            [bounds[1][0], bounds[1][1]],
          ],
          minZoom: 14,
          maxZoom: 20,
          metadata,
        },
        (progress: any) => {
          console.log('Progress:', progress);
        }
      );

i changed it from
[bounds[0][1], bounds[0][0]]
[bounds[1][1], bounds[1][0]]

to
[bounds[0][0], bounds[0][1]]
[bounds[1][0], bounds[1][1]]