How to download File in React Native using URL

In this article, we are going to learn about How to Download File in React Native using URL. to do this there are some libraries available like react-native-fetch-blob, react-native-fs, rn-fetch-blob but most of the users using rn-fetch-blob. you can see the graph for usage here 

Basically, the rn-fetch-blob is a fork of react-native-fetch-blob & react-native-fs is not maintained by its owner. so it is good to use rn-fetch-blob. let’s start with an example

1. Create a new project

2. Install dependency

You can refer GitHub site if any errors with rn-fetch-blob

Check these features of rn-fetch-blob:

  • Transfer data directly from/to storage without BASE64 bridging
  • File API supports regular files, Asset files, and CameraRoll files
  • Native-to-native file manipulation API, reduce JS bridging performance loss
  • File stream support for dealing with large file
  • Blob, File, XMLHttpRequest polyfills that make the browser-based library available in RN (experimental)
  • JSON stream supported base on Oboe.js @jimhigson

 3. Import the following components

4. Function to download file

In this function first, we are getting today’s date to add the time suffix in the filename. & getFileExtention is this function to get file extension from URL. this is helpful when you want to download a file from a dynamic URL.

Function to get an extension from URL

5. Android Storage permission

To download a file in Android you need to get storage permission access from the user to do this we have to create a function to get storage permission from user

6. Source code

Heres the source code for the download File in React Native

7. Output:

I have posted another article for rn-fetch-blob iOS implementation. please check this post.


Leave a Reply

Your email address will not be published.