React Native download file using RNFetchBlob's Download Manager on Android 10

Question

I need to download file to user's Download directory in React Native app using rn-fetch-blob, but seems like it is not compatible with Android 10, because I am getting error:

First I ask for permissions:

try {
            const granted = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE);
            if (granted === PermissionsAndroid.RESULTS.GRANTED) {
                await actualDownloadPDF();
            } else {
                ToastAndroid.show('Nepovolili jste ukládání souborů do zařízení.', ToastAndroid.LONG);
            }
        } catch (err) {
            console.warn(err);
        }

then I try to download file:

const res = await RNFetchBlob.config({
                addAndroidDownloads: {
                    useDownloadManager: true,
                    notification: true,
                    mime: 'application/pdf',
                    title: filename,
                    path: dirs.DownloadDir,
                },
            }).fetch('GET', url, {
                Authorization: 'Bearer ' + Api.Bearer,
            });

It seems like Android 10 requires from developer to open Intent where user select write permission to folder ( https://developer.android.com/training/data-storage/shared/documents-files#grant-access-directory), but I am not sure how to do it, because it seems like RNFetchBlob does not have this feature, yet.

Any ideas how to make this work? It was working fine on Android 9.

Use a different path under Android Q. You can read that every day here. — blackapps, Jul 28 '20 at 15:03
What different path? I want to safe the file to download folder :D — Baterka, Jul 29 '20 at 09:55
You are not alone as you can read every day here. And then you choose a different directory. — blackapps, Jul 29 '20 at 10:02

score 3 · Answer 1 · answered Aug 18 '20 at 18:12

3

const fileName = 'document.pdf'; 
const destPath = RNFetchBlob.fs.dirs.DownloadDir + '/' + fileName;

const config = {
  fileCache : true, 
  path: destPath, 
  addAndroidDownloads: { 
    title: destPath, 
    description: `Download ${destPath}`,
    useDownloadManager: false, 
    notification: false,
  }
}; 

const res = await RNFetchBlob.config(config)...

I'm using this code and it works on Android 10.

answered Aug 18 '20 at 18:12

Luis Abarca

154
3

1

How to open this downloaded file. I am facing an issue with Android. For iOS, it worked perfectly. – Sharad S Katre Mar 22 '21 at 17:10
1

@SharadSKatre if you want to open it in *your* app, you can use https://www.npmjs.com/package/react-native-pdf (look at the example section). Or, if you want to open it using some native (Android or iOS) viewer, use react-native-file-viewer. – Filip Savic Apr 02 '21 at 09:01

score 2 · Answer 2 · answered Apr 14 '21 at 16:43

2

Add android:requestLegacyExternalStorage="true" to in your AndroidManifest.xml

<application
  ...
  android:requestLegacyExternalStorage="true"
>

answered Apr 14 '21 at 16:43

Samson Akinfenwa

61
6

score 1 · Answer 3 · answered Feb 19 '21 at 12:02

I think that your if clause is wrong. My working example look like this:

import { PermissionsAndroid } from "react-native";

export const CheckFilePermissions = async (platform) => {
  if(platform === 'android') {
    try {
      const granted = await PermissionsAndroid.requestMultiple([
        PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,
        PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
      ]);
      if (granted['android.permission.READ_EXTERNAL_STORAGE'] && granted['android.permission.WRITE_EXTERNAL_STORAGE']) {
        // user granted permissions
        return true;
      } else {
        // user didn't grant permission... handle with toastr, popup, something...
        return false;
      }
    } catch (err) {
      // unexpected error
      return false;
    }
  } else {
    // platform is iOS
    return true;
  }
};

You can use it like:

if(await CheckFilePermissions(Platform.OS)) {
....
your code 
....

score 1 · Answer 4 · answered Jun 02 '22 at 17:45

1

You should give complete path to the 'path' field. Change

path: dirs.DownloadDir

to

path: dirs.DownloadDir`/download.pdf`

answered Jun 02 '22 at 17:45

Sanaullah Javeid

103
1
10

React Native download file using RNFetchBlob's Download Manager on Android 10

4 Answers4

Linked