DEV Community

loading...

Downloading and Displaying a file in React Native

johannawad profile image Johanna ・2 min read

React Native does not currently offer full support for downloading and showing a file. The approach in this article shows you how to download and display a file using the react-native-fs and react-native-webview libraries respectively.

In this example, the file is of a PDF format, however, the same approach can be used for images or other text file formats.

Prerequisites:

A working React Native App. Not sure how to do this? Checkout the setup instructions on the React Native Website.

Downloading the file

Install react-native-fs:

yarn add react-native-fs
Enter fullscreen mode Exit fullscreen mode

or

npm install react-native-fs
Enter fullscreen mode Exit fullscreen mode

If you're using React Native version 0.60.0 or higher, it a does auto-linking for you. If not, check the extra setup instructions on react-native-fs page.
Install the CocoaPods dependencies (iOS specific):

cd ios && pod install
Enter fullscreen mode Exit fullscreen mode

Using downloadFile function:

In this example, I will be retrieving a PDF file from an API endpoint using the downloadFile function from react-native-fs. This function has two required parameters - fromUrl and toFile , along with several other optional ones. I created an async function downloadPDF which requires a url and fileName. It also contains a basic header with an authorization token and content-type.

React-native-fs' DocumentDirectoryPath provides the Android or iOS where documents are stored. You can change this to your customised path if you wish.

downloadPDF = async (url: string, fileName: string): Promise<any> =>{
//Define path to store file along with the extension
const path = `${DocumentDirectoryPath}/${fileName}.pdf`;
const headers = {
  'Accept': 'application/pdf',
  'Content-Type': 'application/pdf',
  'Authorization': `Bearer [token]`
}
//Define options
const options: DownloadFileOptions = {
  fromUrl: [baseUrl] + url,
  toFile: path,
  headers: headers
}
//Call downloadFile
const response =  await downloadFile(options);
return response.promise.then(async res => 
  //Transform response
  if(res && res.statusCode === 200 && res.bytesWritten > 0 &&
  res.path){
    doSomething(res)
  }else{
    logError(res)
}};
Enter fullscreen mode Exit fullscreen mode

The response from downloadFile contains statusCode , jobId and bytesWritten . To know if a request is successful, check whether the statusCode is 200 and the bytesWritten > 0. It is important to check both values because, I found it returning 200 even when no files were written.

I saved the path in the Redux's state to later retrieve the file.

Opening the saved file in a WebView

Install react-native-webview:

yarn add react-native-webview
Enter fullscreen mode Exit fullscreen mode

or

npm install react-native-webview
Enter fullscreen mode Exit fullscreen mode

Again, install the CocoaPods dependencies (iOS specific):

cd ios && pod install
Enter fullscreen mode Exit fullscreen mode

Implementing the WebView:

Create a React Funcional Component containing a WebView .

const WebViewComponent: React.FunctionComponent = ({ navigation, route}: any): JSX.Element => (
<WebView
  source={{ uri: "file://"+ path}}
  style={{ flex: 1 }}
  originWhitelist={["*"]}
/>
)};
export default WebViewComponent;
Enter fullscreen mode Exit fullscreen mode

The WebView source's URI should point to file:// + pathToFile . Don't forget to include the style property and set flex:1 as shown above.

Discussion (3)

pic
Editor guide
Collapse
amankumarsingh01 profile image
Aman Kumar Singh

Hello, thanks for sharing. 👍

If you would like to add syntax coloring to your code:

Markdown - how to make blocks of React code (syntax highlighting - github, dev.to)

I personally struggeled with this.

At the beginning of the src code line after 3 x the grave accent sign, we need to add jsx.

This is React code sample:

import React from "react";

const App = () => {
  return (
    <div>
      <h1>My App</h1>
    </div>
  );
};

export default App;
Enter fullscreen mode Exit fullscreen mode
Collapse
johannawad profile image
Johanna Author

Thanks for your suggestion. It will definitely improve the readability of the code!

Collapse
peterlunch profile image
Peter

Great post just helped me thanks.