React native Question posted in
The official React Native documentation can be found here.

Freezing of the interface when using the "jszip" library in a React Native (Expo) project

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.

Tags:

2

Answers


  1. 0

    You can use the react-native-zip-stream library to extract a specific file from a ZIP archive without needing to unzip the entire archive. This library allows you to stream individual files in various formats like base64, arraybuffer, or string.

    Here’s an example of how to extract a specific file from a ZIP archive:

    import { streamFileFromZip } from 'react-native-zip-stream';

const zipFilePath = '/path/to/your/zipfile.zip'; // Path to the ZIP file
const entryName = 'fileInsideZip.txt'; // Name of the file you want to extract

const extractFileFromZip = async () => {
  try {
    // Extract the file as a base64 string
    const base64Data = await streamFileFromZip(
      zipFilePath,
      entryName,
      'base64'
    );
    console.log('Extracted Base64 Data:', base64Data);

    // Or, extract the file as an ArrayBuffer
    const arrayBufferData = await streamFileFromZip(
      zipFilePath,
      entryName,
      'arraybuffer'
    );
    console.log('Extracted ArrayBuffer Data:', new Uint8Array(arrayBufferData));

    // Or, extract the file as a plain string
    const stringData = await streamFileFromZip(
      zipFilePath,
      entryName,
      'string'
    );
    console.log('Extracted String Data:', stringData);
  } catch (error) {
    console.error('Error extracting file from ZIP:', error);
  }
};

extractFileFromZip();

    In this example, you can choose the format (base64, arraybuffer, or string) depending on how you want the file data to be processed in your app. This method extracts only the specified file, which is ideal for large ZIP archives where you don’t want to extract everything.

    You can find more details on the library here: react-native-zip-stream GitHub.

    Login or Signup to reply.
  2. 0

    react-native-zip-stream It seems that the expo project is not supported.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search