This function downloads a zip file and unzips it and saves the unzipped image files into the expo file system of the React Native Expo app. It does successfully download the file, unzip and save the images. The problem is that when I display the images, they appear corrupted and distorted. I suspect there is something wrong with this function causing this issue and I would appreciate any advice.
const readZipFile = async (uri: string, privateAssetsDirectory: string) => {
try {
const response = await axios.get(uri, { responseType: 'arraybuffer' });
const zipBuffer = response.data;
// Create a new JSZip instance and load the zip buffer
const zip = await JSZip.loadAsync(zipBuffer);
// Get an array of file keys
const fileKeys = Object.keys(zip.files);
// Iterate over each file key in the zip archive
for (const filename of fileKeys) {
const file = zip.files[filename];
if (!file.dir && !isSystemFile(filename)) { // Exclude directories
// Extract the file contents as Uint8Array
const content = await file.async('uint8array');
// Convert Uint8Array to Base64 string
let base64Content = '';
for (let i = 0; i < content.length; i += 1024) {
const chunk = content.subarray(i, i + 1024);
base64Content += btoa(String.fromCharCode.apply(null, chunk));
}
// Save the file to the directory where the zip file is located
const filePath = privateAssetsDirectory + filename;
await FileSystem.writeAsStringAsync(
filePath,
base64Content,
{ encoding: FileSystem.EncodingType.Base64 }
);
//console.log('File:', filename, ', Size:', content.length);
//console.log('Saved at:', filePath);
}
}
} catch (error) {
console.error('Error reading zip file:', error);
throw error;
}
};
I expected the images to display but they are distorted. You can only see part of what the images is supposed to contain and part of the images are just grey.