[Bug]: getPack and getPacks can not get full information after createPack

[thdailong]

Mapbox Implementation

Mapbox

Mapbox Version

default

Platform

Android

@rnmapbox/maps version

10.0.15

Standalone component to reproduce

import Mapbox from '@rnmapbox/maps';
import { useState } from 'react';
import React, { useEffect } from 'react';
import { Box, Icon, ScrollView, Text, useDisclose, useTheme } from 'native-base';
import PropTypes from 'prop-types';

const Row = ({ name = 'Offline 1', timestamp = 'oct 25, 2021', size = '15' }) => {
    const theme = useTheme();
    return (
            <Box
                flexDirection={'row'}
                justifyContent={'space-between'}
                py={'14px'}
                alignItems={'center'}
            >
                <Box flexDirection={'row'} alignItems={'center'}>
                    <Box>
                        <Text fontWeight={600}>{name}</Text>
                        <Text fontSize={10}>
                            {size.toFixed(2)} MB - Downloaded {timestamp}
                        </Text>
                    </Box>
                </Box>
            </Box>
    );
};

Row.propTypes = {
  name: PropTypes.string, 
  timestamp: PropTypes.string,
  size: PropTypes.string,
};

export default function Index(props) {
    const [offlineData, setOfflineData] = useState(null);
    const queryOfflineMap = async () => {
        const offlinePackets = await Mapbox.offlineManager.getPacks();
        setOfflineData(offlinePackets);
    };


    useEffect(() => {
        queryOfflineMap();
    }, []);

    return (
        <Box>
            <ScrollView contentContainerStyle={{ paddingBottom: 40 }}>
       
                <Box>
                    {offlineData?.map((item, index) => {
                        return (
                            <Row
                                name={item?._metadata?.name}
                                key={index}
                                pack={item?.pack}
                                size={item?.pack?.completedResourceSize / 1024 / 1024}
                            />
                        );
                    })}
                </Box>
            </ScrollView>
        </Box>
    );
}

Observed behavior and steps to reproduce

The code above is a screen to show all packs that have been download! I also have another component to show map and just to download a small region using createPack().
However, after createPack(), the list still show all packs that have been downloaded including the pack just been download, but the last pack just been download is showing full information like size, percentage, coordinates.

Expected behavior

All packs should be shown with full information(size, coordinates, ...)

Notes / preliminary analysis

After reading the source code, I finally found that a way to fix this bug by making some small changes in offlineManager.ts file

And add await Mapbox.offlineManager._initialize(true);

import Mapbox from '@rnmapbox/maps';

export default function Index(props) {
    const [offlineData, setOfflineData] = useState(null);
    const queryOfflineMap = async () => {
        const offlinePackets = await Mapbox.offlineManager.getPacks();
        await Mapbox.offlineManager._initialize(true);
        setOfflineData(offlinePackets);
    };


    useEffect(() => {
        queryOfflineMap();
    }, []);

    return (
        <Box>
            <ScrollView contentContainerStyle={{ paddingBottom: 40 }}>
       
                <Box>
                    {offlineData?.map((item, index) => {
                        return (
                            <Row
                                name={item?._metadata?.name}
                                key={index}
                                pack={item?.pack}
                                size={item?.pack?.completedResourceSize / 1024 / 1024}
                            />
                        );
                    })}
                </Box>
            </ScrollView>
        </Box>
    );
}

It work perfectly!

Additional links and references

No response

[mfazekas]

@thdailong thanks much!

Looks good to me, do you want to open a PR?

[thdailong]

@mfazekas Just create PR, can you review for me?
#3279