How to save downloaded files and view in File app using React Native in iOS?

Question

I am using react-native-fs to download files from server and save them. Once they are downloaded I am using react-native-file-viewer to open them. This process totally works fine: I am able to download and open it in the viewer, but I am not able to save the file in the File application from the viewer, though I can save in iCloud but not in the iPhone. The downloaded file is stored in a place like

/var/mobile/Containers/Data/Application/CCF6CD16-A62A-48BB-92F3-3021195CFE0C/Documents/react-native-pdf.pdf

but this is not shown in the File app.

The code I am using to download and view the file is as follows

    RNFS.downloadFile({
      fromUrl: 'http://www.mywebsite.com/react-native-pdfurl.pdf',
      toFile: `${RNFS.DocumentDirectoryPath}/react-native-pdfurl.pdf`,
    }).promise.then((r) => {
      console.log('yo yo yo ');
      this.setState({ isDone: true });

      const path = `${RNFS.DocumentDirectoryPath}/react-native-pdfurl.pdf`;
      FileViewer.open(path)
      .then(() => {
          // success
      })
      .catch(error => {
          // error
      });

      RNFS.readDir(RNFS.DocumentDirectoryPath).then(files => {
          console.log(files);
      })
        .catch(err => {

            console.log(err.message, err.code);

        });
    });

The readDir gets me the name path of the file saved. But this is not reflected in any folder in the File application. My question is how can I save the file in a way that it shows in the File application.

Answer 1

The below code downloads the file and opens it. In case the file already exists it will directly open it.

      downloadOpenClick = async (item) => {

    try {

      let platformName = 'ios';
      if (Platform.OS === 'ios'){
        platformName = 'ios';
      }else{
        platformName = 'android';
      }

      const selectedFile = item;

      var dirType=null;
      if(Platform.OS === 'ios'){
        dirType = RNFS.DocumentDirectoryPath;

      }else{
        await this.requestStoragePermission();
        dirType = RNFS.ExternalStorageDirectoryPath+'/AppName';
      }

        RNFS.mkdir(dirType+`/Folder`).then(files => {
          RNFS.mkdir(dirType+`/Folder/SubFolder`).then(files => {
              //console.log(files);
          }).catch(err => {

              //console.log(err.message, err.code);

          });
        }).catch(err => {

            //console.log(err.message, err.code);

        });

        var exists = false;
        RNFS.exists(`${dirType}/Folder/SubFolder/${selectedFile}`).then( (output) => {
            if (output) {
                exists = true;
                const path = `${dirType}/Folder/SubFolder/${selectedFile}`;
                FileViewer.open(path)
                .then(() => {
                    // success
                })
                .catch(error => {
                    // error
                    console.log('error');
                    console.log(error);
                });
            } else {
              const selectedFileUrl = selectedFile.replace(/\s/g, '%20');

              RNFS.downloadFile({
                fromUrl: `https://mywebsite/api/getAttachment?selectedFile=${selectedFileUrl}`,
                toFile: `${dirType}/Folder/SubFolder/${selectedFile}`,
                background: true,
                begin: (res) => {
                  console.log(res);
                  this.setState({ contentLength: res.contentLength});
                },
                progress: (res) => {
                      this.setState({ showSpinner: true });
                      var prog = res.bytesWritten/res.contentLength
                      this.setState({ downloaded : prog});
                      console.log(this.state.downloaded);
                }
              }).promise.then((r) => {
                //console.log(r);
                this.setState({ showSpinner: false });
                this.setState({ downloaded : 0});
                const path = `${dirType}/${tipoDesc}/${oggetto}/${selectedFile}`;
                FileViewer.open(path)
                .then(() => {
                    // success
                })
                .catch(error => {
                    // error
                    console.log('error');
                    console.log(error);
                });
              }).catch(error => {
                console.log('error');
                console.log(error);
              });;
             }
        });




      } catch (error) {
        console.log('error');
        console.log(error);
      }
  };

using

react-native-file-viewer and react-native-fs