Unable to load file from local file system

[Supriya Gorai]

What react-native version are you using? - 0.71.4

What react-native-pdf version are you using? - 6.6.2

What platform does your issue occur on? (android/ios/both) - android

Describe your issue as precisely as possible :
I am building a React native application and I want to hide some PDF files that are coming from API and want to download those files just like YouTube does when you download the video so that no one can find them on the phone.

Also, I want access to the downloaded file. When user is offline, user can open that file in the app.

I am using react-native-blob-util and react-native-file-access for this feature.

Code to store the files -

const saveNoteToLocal = async (list) => {
    await Promise.all(
      list.map(async (note) => {
        if (!note.content) {
          const url = note.fileDetails.metadata.location;
          const idFileExist = await checkFile(url);
        
          if (!idFileExist) {
            const pdfName = url.split('/').pop();
            const { dirs } = ReactNativeBlobUtil.fs;
            const path = `${dirs.CacheDir}/${pdfName}`;
  
            try {
              await ReactNativeBlobUtil.config({
                path,
                fileCache: true,
              })
                .fetch('GET', url)
                .then((res) => {
                  console.log('The file saved to ', res.path());
                });
            } catch (error) {
              console.error('Error saving file:', error);
              toaster('danger', 'Failed to save file. Please try again.');
            }
          }
        }
      })
    );
  };

Save to Fetch the files -

const initializeOffline = async () => {
    setLoading(true);
    const { note } = route.params;
  
    const pdfUrl = note.fileDetails.metadata.location;
    const pdfName = pdfUrl.split('/').pop();
    const { dirs } = ReactNativeBlobUtil.fs;
    const path = `${dirs.CacheDir}/${pdfName}`;
  
    try {
      const fileExists = await FileSystem.exists(path);
      console.log('offline fileExists', fileExists, `file://${path}`);
      if (fileExists) {
        setPdfPath(`file://${path}`);
      } else {
        toaster('danger', 'File not found. Please check your internet connection.');
      }
    } catch (error) {
      console.error('Error checking file existence:', error);
      toaster('danger', 'Failed to check file existence. Please try again.');
    } finally {
      setLoading(false);
    }
  };

         <Pdf
              minScale={1.0}
              maxScale={1.0}
              scale={1}
              fitPolicy={0}
              trustAllCerts={false}
              source={{
                uri: pdfPath,
                cache: true,
              }}
              onLoadComplete={(numberOfPages,filePath) => {
                console.log(`Number of pages: ${numberOfPages}`, filePath);
            }}
              style={{
                width,
                height,
                flex: 1,
                backgroundColor: 'red'
              }}
          />

Issue:
Files are not loading from the file-system offline. I can able to fetch the file paths but when passing it in component , not working.

No error message in console.

[Roman]

@SupriyaGo Can you verify if path to your file contains empty spces or special characters, because it looks like is the root couse in my case.