react-nativereact-native-fs

How to download a file with React Native?


I am building an app with React Native, for Android and iOS. I am trying to let the user download a PDF file when clicking on a button.

I do not find other solutions for this problem. I have found libraries for viewing a PDF, but I would like to let the user download the PDF.


Solution

  • Follow these steps:

    1. Run npm install rn-fetch-blob.

    2. Follow the installation instructions. If you want to manually install the package without using rnpm, go to their wiki.

    3. Finally, that's how I made it possible to download files within my app:

        const { config, fs } = RNFetchBlob
        let PictureDir = fs.dirs.PictureDir // this is the pictures directory. You can check the available directories in the wiki.
        let options = {
          fileCache: true,
          addAndroidDownloads : {
            useDownloadManager : true, // setting it to true will use the device's native download manager and will be shown in the notification bar.
            notification : false,
            path:  PictureDir + "/me_"+Math.floor(date.getTime() + date.getSeconds() / 2), // this is the path where your downloaded file will live in
            description : 'Downloading image.'
          }
        }
        config(options).fetch('GET', "http://www.example.com/example.pdf").then((res) => {
          // do some magic here
        })