Download file using Blob in react-native

Question

Since React-native v0.54 and Expo SDK v26, Blob is now supported.

I'm trying to download a file available on a URL to my phone (if possible, in my Downloads directory on Android)

All I can find for now is an existing solution using react-native-fetch-blob which seems not necessary anymore.

If anyone could provide a brief example of how to start implementing this feature on Expo Snack

Answer 1

Expo

FileSystem

You can use the FileSystem module to download content and save it under a directory on your device.

Installation

• Managed workflow

$ expo install expo-file-system

• Bare workflow

On a bare workflow, please follow the instructions here.

Usage

1. Importing the module

import * as FileSystem from 'expo-file-system';

2. Create a download resumable.

Using async/await

await FileSystem.downloadAsync(URI, FILE_URI, OPTIONS);

Using promise

FileSystem.downloadAsync(
  'http://techslides.com/demos/sample-videos/small.mp4',
  FileSystem.documentDirectory + 'small.mp4'
)
  .then(({ uri }) => {
    console.log('Finished downloading to ', uri);
  })
  .catch(error => {
    console.error(error);
  });

NOTE

Keep in mind that in order to save/store the content downloaded, you need to pass a valid directory path/uri. i.e FileSystem.documentDirectory + 'small.mp4'. To guarantee that the path to the directory exists, you can use the FileSystem module itself to create a directory. Like this: await FileSystem.makeDirectoryAsync(path, { intermediates: true });. The options object takes the intermediates property that ensures that if you are trying to create a multilevel directory, it will also create the parent folder (if does not exit) for you.