[Bug]: Offline map downloading the tiles ,not showing the proper map and deleting the offlinemap not deleting from the app storage

[sampathkumarch]

Mapbox Implementation

Mapbox

Mapbox Version

10.0.11

Platform

Android

@rnmapbox/maps version

10.0.11

Standalone component to reproduce

import geoViewport from '@mapbox/geo-viewport';
import Mapbox, {
Camera,
MapView,
offlineManager,
StyleURL,
} from '@rnmapbox/maps';
import React, { useState } from 'react';
import { Button, Dimensions, TextInput } from 'react-native';

const CENTER_COORD: [number, number] = [-73.970895, 40.723279];
const MAPBOX_VECTOR_TILE_SIZE = 512;
console.log('=> Mapbox[0]:', Mapbox);
console.log('=> Mapbox.StyleURL[1]:', Mapbox.StyleURL);
console.log('=> StyleURL[2]:', StyleURL);
const STYLE_URL = Mapbox.StyleURL.Satellite;

const OfflineExample = () => {
const [packName, setPackName] = useState('pack-1');
const [showEditTitle, setShowEditTitle] = useState(false);

return (
<>
<Button
title={Pack name: ${packName}}
onPress={() => {
setShowEditTitle(!showEditTitle);
}}
/>
{showEditTitle && (
<TextInput
value={packName}
autoFocus={true}
onChangeText={(text) => setPackName(text)}
onBlur={() => setShowEditTitle(false)}
/>
)}
<Button
title="Get all packs"
onPress={async () => {
const packs = await offlineManager.getPacks();
console.log('=> packs:', packs);
packs.forEach((pack) => {
console.log(
'pack:',
pack,
'name:',
pack.name,
'bounds:',
pack?.bounds,
'metadata',
pack?.metadata,
);
});
}}
/>
<Button
title="Get pack"
onPress={async () => {
const pack = await offlineManager.getPack(packName);
if (pack) {
console.log(
'pack:',
pack,
'name:',
pack.name,
'bounds:',
pack?.bounds,
'metadata',
pack?.metadata,
);

        console.log('=> status', await pack?.status());
      }
    }}
  />
  <Button
    title="Resume pack"
    onPress={async () => {
      const pack = await offlineManager.getPack(packName);
      if (pack) {
        await pack.resume();
      }
    }}
  />
  <Button
    title="Remove packs"
    onPress={async () => {
      const result = await offlineManager.resetDatabase();
      console.log('Reset DB done:', result);
    }}
  />
  <Button
    title="Create Pack"
    onPress={() => {
      const { width, height } = Dimensions.get('window');
      const bounds: [number, number, number, number] = geoViewport.bounds(
        CENTER_COORD,
        12,
        [width, height],
        MAPBOX_VECTOR_TILE_SIZE,
      );

      const options = {
        name: packName,
        styleURL: STYLE_URL,
        bounds: [
          [bounds[0], bounds[1]],
          [bounds[2], bounds[3]],
        ] as [[number, number], [number, number]],
        minZoom: 10,
        maxZoom: 20,
        metadata: {
          whatIsThat: 'foo',
        },
      };
      offlineManager.createPack(options, (region, status) =>
        console.log('=> progress callback region:', 'status: ', status),
      );
    }}
  />
  <MapView style={{ flex: 1 }} styleURL={STYLE_URL}>
    <Camera zoomLevel={10} centerCoordinate={CENTER_COORD} />
  </MapView>
</>

);
};

export default OfflineExample;

/* end-example-doc */

const metadata: ExampleWithMetadata['metadata'] = {
title: 'Offline Example',
tags: [
'offlineManager#createPack',
'offlineManager#getPack',
'offlineManager#getPacks',
],
docs: Demonstates basic use of offlineManager api.,
};
OfflineExample.metadata = metadata;

Observed behavior and steps to reproduce

when i click the create pack i got this one
LOG => progress callback region: status: {"completedResourceCount": 10, "completedResourceSize": 188188823, "erroredResourceCount": 0, "loadedResourceCount": 10, "loadedResourceSize": 188188823, "name": "pack-1", "percentage": 100, "requiredResourceCount": 10, "state": "complete"}

when i click the getall packes , i got this one i console

LOG => packs: [{"_metadata": {"_rnmapbox": [Object], "name": "pack-1", "whatIsThat": "foo"}, "pack": {"bounds": [Array], "completedResourceCount": 10, "completedResourceSize": 188188823, "expires": "Sun Feb 04 12:41:28 GMT+05:30 2024", "metadata": "{"name":"pack-1","_rnmapbox":{"bounds":{"coordinates":[[[-74.0808105,40.6751702],[-73.861084,40.6751702],[-73.861084,40.7714419],[-74.0808105,40.7714419],[-74.0808105,40.6751702]]],"type":"Polygon"},"zoomRange":[10,20],"styleURI":"mapbox:\/\/styles\/mapbox\/satellite-v9"},"whatIsThat":"foo"}", "percentage": 100, "requiredResourceCount": 10, "state": "complete"}}]
LOG pack: {"_metadata": {"_rnmapbox": {"bounds": [Object], "styleURI": "mapbox://styles/mapbox/satellite-v9", "zoomRange": [Array]}, "name": "pack-1", "whatIsThat": "foo"}, "pack": {"bounds": [-73.861083984375, 40.77144186567577, -74.080810546875, 40.67517023238807], "completedResourceCount": 10, "completedResourceSize": 188188823, "expires": "Sun Feb 04 12:41:28 GMT+05:30 2024", "metadata": "{"name":"pack-1","_rnmapbox":{"bounds":{"coordinates":[[[-74.0808105,40.6751702],[-73.861084,40.6751702],[-73.861084,40.7714419],[-74.0808105,40.7714419],[-74.0808105,40.6751702]]],"type":"Polygon"},"zoomRange":[10,20],"styleURI":"mapbox:\/\/styles\/mapbox\/satellite-v9"},"whatIsThat":"foo"}", "percentage": 100, "requiredResourceCount": 10, "state": "complete"}} name: pack-1 bounds: [-73.861083984375, 40.77144186567577, -74.080810546875, 40.67517023238807] metadata {"_rnmapbox": {"bounds": {"coordinates": [Array], "type": "Polygon"}, "styleURI": "mapbox://styles/mapbox/satellite-v9", "zoomRange": [10, 20]}, "name": "pack-1", "whatIsThat": "foo"}

when i click the remove the packs

LOG Reset DB done: undefined

Expected behavior

if i click the remove packs after that agin am click the getall packs click it was showing no package but app memory was not cleard
LOG => packs: []

in the below pic , still user data was stored it was not removed from the app memory

Notes / preliminary analysis

it should remove from app memory if click the the remove all packes, it was just removing pack names , not from the app memory

Additional links and references

No response

[github-actions]

No code example found in issue body - More info

[sampathkumarch]

@ZiZasaurus can you look this problem

#3076 (comment)