React Native - Unexpected Token Error when Zipping and Downloading Files JSZip. Is it in a supported JavaScript type (String, Blob, ArrayBuffer)

Question

I'm working on a React Native project where I need to fetch data from the backend, zip it, and download the zipped file using jszip and rn-fetch-blob. The code I've implemented is resulting in an "Unexpected Token" error, and I'm seeking guidance to understand and resolve this issue.

---

import {useState, useEffect} from 'react';
import RNFetchBlob from 'rn-fetch-blob';
import JSZip from 'jszip';
import {Toast} from 'native-base';
const useDownloadZipNestedArray = async (data: any[]) => {
  try {
    const allUrlsData: {url: string; path: string}[] = [];
    const handleRecursion = (data: any[], folder: string) => {
      data?.forEach(item => {
        if (item?.naacFiles?.length) {
          item?.naacFiles?.forEach((inner: any) => {
            allUrlsData?.push({
              path: `${folder}/${item?.title}/${inner?.title}`,
              url: inner?.documentUrl,
            });
          });
        }
        if (item?.internalFolder?.length) {
          handleRecursion(item?.internalFolder, `${folder}/${item?.title}`);
        }
      });
    };

    data?.forEach(item => {
      if (item?.naacFiles?.length) {
        item?.naacFiles?.forEach((inner: any) => {
          allUrlsData?.push({
            path: `${item?.title}/${inner?.title}`,
            url: inner?.documentUrl,
          });
        });
      }

      if (item?.internalFolder?.length) {
        handleRecursion(item?.internalFolder, item?.title);
      }
    });
    // console.log(allUrlsData);
    const zip = new JSZip();

    await Promise.all(
      allUrlsData?.map(
        async item =>
          new Promise(async (resolve, reject) => {
            try {
              console.log('Fetching data for file:', item.url);

              // Fetch the image as a blob
              const response = await fetch(item?.url);

              if (!response.ok) {
                console.error(
                  'Failed to fetch data for file:',
                  item.url,
                  response.status,
                  response.statusText,
                );
                resolve(false);
                return;
              }

              const imageBlob = await response.blob();

              const fileExtension = item?.url?.split('.').at(-1);

              // Extract the filename from the URL (assuming it's the last part after '/')
              const filename =
                item?.path + '.' + fileExtension ||
                item?.url?.substring(item?.url?.lastIndexOf('/') + 1);

              // Add the blob to the ZIP archive with the extracted filename
              zip.file(filename, imageBlob);
              resolve(true);
            } catch (error) {
              console.error('Error fetching data for file:', item.url, error);
              resolve(false);
            }
          }),
      ),
    );

    const zipBlob = await zip.generateAsync({type: 'blob'});
    console.log({zipBlob});
    // const {config, fs} = RNFetchBlob;
    // let DOCUMENT_DIR = fs.dirs.DownloadDir;
    // let date = new Date();

    // let options = {
    //   fileCache: true,
    //   addAndroidDownloads: {
    //     useDownloadManager: true,
    //     notification: true,
    //     title: 'Export Zip',
    //     path:
    //       DOCUMENT_DIR +
    //       '/Erp/' +
    //       Math.floor(date.getTime() + date.getSeconds() / 2) +
    //       '.zip',
    //     description: 'Downloading....',
    //   },
    // };
    // console.log({options});
  } catch (e) {
    console.log(e);
  }
};

export default useDownloadZipNestedArray;



//here When I press this button 
 <Pressable
   onPress={() => {checkPermission();}}
   p={4}
   justifyContent={'center'}
  alignItems={'center'}
   borderRadius={'full'}
   bgColor={COLORS.secondary}
  position={'absolute'}
  shadow={2}
  bottom={5}
  right={5}>
 <AppIcon
  MaterialCommunityIconsName="download"
  size={25}
  color={'white'}
 />
</Pressable>

//here I handle the permissions
 const checkPermission = async () => {
    if (Platform.OS === 'android') {
      try {
        const granted = await PermissionsAndroid.request(
          PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
          {
            title: 'Storage Permission Required',
            message: 'Needs access to your storage to download',
            buttonPositive: 'OK',
          },
        );
        if (granted === PermissionsAndroid.RESULTS.GRANTED) {
          console.log('Storage Permission Granted.');
          useDownloadZipNestedArray(naacData?.data?.data);
        } else {
          Alert.alert('Storage Permission Not Granted');
        }
      } catch (err) {
        console.warn(err);
      }
    }
  }; 
`

---

Environment:

• React Native version: 0.72.1
• Packages: "rn-fetch-blob": "^0.12.0", "jszip": "^3.10.1"
• Issue: Encountering "Unexpected Token" error with the provided code. Seeking insights into the possible causes and solutions for this error.

---

I expected the zipping and downloading process to work smoothly, resulting in a downloadable zipped file containing the converted data.