How to download File in React Native iOS using URL

In this article, we are going to learn about How to download File in React Native iOS using URL. Before going to proceed with this React Native IOS example. I want you to go through my previous article which was written for How to download File in React Native Android. In this example, we are going to download xlsx file from URL. so I am not creating a whole project to example this because I have already posted an article on How to download File in React Native using URL. so we have to add conditions with respect to OS, as there are different option and configuration for Android & iOS.

In this post, we will discuss only the download xlsx function. and we are using rn-fetch-blob dependency to download files from servers from URL. To set up the project & dependency please visit this post

 

 

Before going forward in iOS you need to set up two properties in info.plist file under Information Property List section in XCode project.

  1. Application supports iTunes file sharing set to true
  2. Support opening documents in place set to true

1. Create async function

Create a new async function which will trigger on the download file button and pass fileUrl in parameter

2. Define constants inside the function

Define the following constants inside the function.

As you can see in the above definitions we have clearly mentioned the Directory path for Android & iOS. and make sure to add file extension at the end of the finalPath. In my case, the file is xlsx so I mentioned it statically as ‘.xlsx’. you can get this extension dynamically from the URL.

3. Create a configuration for the download API call

We have to configure the download parameter separately for Android iOS as given below

4. Download API response handling

Here is the code to handle the current download API response. also, pass constants configuration in it.

As you can see in the above code after getting success response from the server. we have to display the document on the viewer or we have to show the default iOS popup to select destination folder to save document manually.

I have added two options to display the downloaded document. also, I have added these properties on the set timeout method because these properties will not work properly sometimes this is the solution for the following errors

  • Error: RNFetchBlob.ios.previewDocument is not working in React Native iOS
  • Error: RNFetchBlob.ios.openDocument is not working in React Native iOS

The solution is to add setTimeout and call these properties into it.

5. Source code for downloadXlsx file

Use the above function to download a file from URL, make sure to specify file extension to file path

Thank you 🙂

 

Leave a Reply

Your email address will not be published. Required fields are marked *