react-nativereact-native-fetch-blob

React native: download pdf file with rn-fetch-blob on click a button


I have to let user download a pdf file whene he clock on button, I find that I have to use rn-fetch-blob instead of react-native-fetch-blob. In the documentation there is this code:

const { config, fs } = RNFetchBlob
let DownloadDir = fs.dirs.DownloadDir // this is the Downloads directory.
let options = {
fileCache: true,
addAndroidDownloads : {
useDownloadManager : true, //uses the device's native download manager.
notification : true,
title : "Notification Title", // Title of download notification.
path: DownloadDir + "/me_"+ '.' + extension, // this is the path where your download file will be in
description : 'Downloading file.'
}
}
config(options)
.fetch('GET',"https://whatever_url_u _want/)
.then((res) => {
//console.log("Success");
})
.catch((err) => {console.log('error')}) // To execute when download cancelled and other errors
}

I have no idea what I can do with this ! how to use use it in TouchableOpacity onPress prop ? please someone can provide a detailed example

PS. I call an API with POST methode and I receive a link of PDF file. I think

I have to set this link like that
    config(options)
    .fetch('GET',this.state.data.link)

Solution

    1. Add below permissions in AndroidManifest.xml
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.DOWNLOAD_WITHOUT_NOTIFICATION" />
    
    1. To use downloadmanager, add below action in intent in AndroidManifest.xml
    <intent-filter>
         <action android:name="android.intent.action.MAIN" />
         <category android:name="android.intent.category.LAUNCHER" />
         <action android:name="android.intent.action.DOWNLOAD_COMPLETE"/>                          
    </intent-filter>
    
    1. import PermissionsAndroid, Alert from react native (android only)
    import {PermissionsAndroid, Alert} from "react-native";
    
    1. Now in component
    actualDownload = () => {
       const { dirs } = RNFetchBlob.fs;
      RNFetchBlob.config({
        fileCache: true,
        addAndroidDownloads: {
        useDownloadManager: true,
        notification: true,
        mediaScannable: true,
        title: `test.pdf`,
        path: `${dirs.DownloadDir}/test.pdf`,
        },
      })
        .fetch('GET', 'http://www.africau.edu/images/default/sample.pdf', {})
        .then((res) => {
          console.log('The file saved to ', res.path());
        })
        .catch((e) => {
          console.log(e)
        });
    }
    
    downloadFile = () => {
      try {
          const granted = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE);
          if (granted === PermissionsAndroid.RESULTS.GRANTED) {
            this.actualDownload();
          } else {
            Alert.alert('Permission Denied!', 'You need to give storage permission to download the file');
          }
        } catch (err) {
          console.warn(err);
        } 
    }
    
    render(){
      <TouchableOpacity onPress={this.downloadFile}>
        <Text>Download!!!</Text>
      </TouchableOpacity>
    }
    

    CAUTION: You need to ask for storage permission for android 6 or higher in runtime