How to download a file with React Native?

react-native react-native-fs
Arnaud picture Arnaud · Jun 14, 2017 · Viewed 75.1k times · Source

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.

  • react-native-file-download does not support Android
  • react-native-fs does nothing when I trigger downloadFile (nothing shows up on the notification bar), and I am not able to find the file after that. I added android.permission.WRITE_EXTERNAL_STORAGE to the Android Manifest file. I double-checked that the file I am trying to download exists (when it does not, the library throws an error)

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.

Answer

Ray picture Ray · Jun 14, 2017

Just implemented the download feature an hour ago :p

Follow these steps:

a) npm install rn-fetch-blob

b) follow the installation instructions.

b2) if you want to manually install the package without using rnpm, go to their wiki.

c) 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
})

Related questions

How to access files and folders using react-native-fs library

I am using react-native-fs for file system access. However am unable to access files in ios. Below is the code: RNFS.readDir(RNFS.MainBundlePath) .then((result) => { console.log('Got result', result); return Promise.all([RNFS.stat(result[0].path), result[0].…

Read More
React-native-android - How to save an image to the Android file system and view in the phone's 'Gallery'

Is it possible to save an image to the android's local file system so it can be viewed from the phone's 'Gallery' and in a folder?? I found this react-native-fs library but after studying the documentation and working through an …

Read More
Open a file (pdf, word, excel, png etc.) on device with its default application in react-native

I'm using react-native-fs to download a file(pdf, word, excel, png etc.) and I need to open it in other application. Is it possible to open downloaded file with Linking or better open a dialog with possible apps like when …

Read More