import JSZip from "jszip";
const createArchive = async() => {
// Some code
const zip = new JSZip();
const data = getExampleData();
zip.file("example.json", data);
const zipContent = await zip.generateAsync(
{ type: "base64" },
(metadata) => {
setCreationProgress(metadata.percent); // Set a progress value for ui
console.log("Value:", metadata.percent);
}
);// When this function is executed the ui freezes
// Some code
}
I create an zip archive in this code. It actually works, but when the function “zip.generateAsync()” is executed, the app freezes until the function completes. This can take a long time depending on the size of the files. The interface does not update, and nothing can be clicked. So, the problem is that the user cannot see the progress of the archive creation or cancel it because the interface is unresponsive.
(Also, keep in mind that I’m using Expo).
I believe one solution could be to move the task from the main thread to the background using the ‘expo-task-manager’ and ‘expo-background-fetch’ libraries, but I haven’t been able to make it work yet. Alternatively, I could use another library for creating the archive, but I don’t know which one, as nothing else seems to work with Expo.
