I am using the react-native-pdf-view library and I am having trouble populating the PDFView with a pdf.

How my project works is that I receive a base64 pdf from the server where I then save to the android file system by using the library react-native-fs like so:
(This works fine)

saveFile(filename){

   var base64Image = this.state.imageBase64;

   // create a path you want to write to
   var path = RNFS.DocumentDirectoryPath + '/' + filename;

   // write the file
   RNFS.writeFile(path, base64Image, 'base64').then((success) => {
     console.log('FILE WRITTEN!');
     this.setState(
       {pdf_dirPath: path}
     );
     this._display_fileAttachment()
   })
   .catch((err) => {
     console.log(err.message);
   });
 }

I then try populate the pdf view with this:

<PDFView
  ref={(pdf)=>{this.pdfView = pdf;}}
  src={"path/To/base64/pdf"}
  style={styles.pdf}
 />

Question

Does the react-native-pdf-view have to take a file location or can it take a base64 pdf or a blob.

If it can take a base64 or blob please explain or give sample code on how to do it.
Thanks

Nb: This StackOverflow question is very similar but I need to know how in what form to save or retrieve the base64 from the file system and how to populate the pdf.

For anyone having the same problem, here is the solution. Solution

react-native-pdf-view must take the file path to the pdf_base64.

Firstly, I used the react-native-fetch-blob to request the pdf base64 from the server. (Because RN fetch API does not yet support BLOBs).

Also, I discovered that react-native-fetch-blob also has a FileSystem API which is way better documented and easier to understand than the 'react-native-fs' library. (Check out its FileSystem API documentation)

Receiving base64 pdf and saving it to a file path:

var RNFetchBlob = require('react-native-fetch-blob').default;

const DocumentDir = RNFetchBlob.fs.dirs.DocumentDir;

getPdfFromServer: function(uri_attachment, filename_attachment) {
   return new Promise((RESOLVE, REJECT) => {

      // Fetch attachment
      RNFetchBlob.fetch('GET', config.apiRoot+'/app/'+uri_attachment)
      .then((res) => {
       
          let base64Str = res.data;
          let pdfLocation = DocumentDir + '/' + filename_attachment;

          RNFetchBlob.fs.writeFile(pdfLocation, pdf_base64Str, 'base64');
          RESOLVE(pdfLocation);
      })
   }).catch((error) => {
       // error handling
       console.log("Error", error)
   });
}

What I was doing wrong was instead of saving the pdf_base64Str to the file location as I did in the example above. I was saving it like this:

var pdf_base64= 'data:application/pdf;base64,'+pdf_base64Str;

which was wrong.

Populate PDF view with file path:

<PDFView
    ref={(pdf)=>{this.pdfView = pdf;}}
    src={pdfLocation}
    style={styles.pdf}
/>