offlinemap downlpoadiing but while deleting not deleted from app memory

[sampathkumarch]

@mfazekas

hi everyone i am facing a problem is can download the offline map in different regions, at the same time my app memory size is increasing, and sometimes i want to remove some offline maps, am calling this API to delete the offline map offlinemanager.deletepacK(pack name) but the pack not removing the app memory, how can I fix this issue

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';
Mapbox.setAccessToken('');
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 OfflineMap = () => {
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 OfflineMap;

when i click the create pack i get 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