React Native Document & PDF Viewer

React Native Document & PDF Viewer

Hello everyone and welcome to this new article, where we are going to explore how to make a React Native Document & PDF Viewer.

React Native Document & PDF Viewer result

Using this approach you can make a Document Viewer for almost all types of documents, such as:

PDF, Doc, Docx, Xls, txt and more.

The approach is to simply render the docs within a Webview component.

Which will trigger the default document UI and behavior, without any extra complexity.

Unless You want some specific Document Manipulation, where you would want to implement your own logic.

But for most cases, if you just want to view and render documents, this easy method would be perfect.

Environment Setup

To get started,
Create a new expo react native project. And if you are confident to try it on your current projects.
It wont differ.

If you took the First option and run the project,
you will be presented by the default React native expo screen below.

React Native Camera Expo Example started code

After the react native setup is finished, your code and screen will look similar to this.

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class App extends React.Component {
  render(){
    return (
      <View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
      </View>
    );
  }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

WebView Component

As I have mentioned our main component to render documents is Webview.

It will require different installation methods depending on your project type.

React-Native-Cli

Install Webview

yarn add react-native-webview

Expo Project

expo install react-native-webview

Implementing Webview

Now, we just need to add a webview component to our render method with the url to our document.

It can be either locally or from a url,

For this Example I will be using a remote document.

<WebView 
      source={{ uri: "https://reactnativemaster.com/wp-content/uploads/2020/02/React-native-document-viewer-pdf-sample.pdf" }} />
  );

Remember, you can also use documents from different extensions and types.

To add local files use the format below.

On Android

uri : '/sdcard/Download/test-pdf.pdf'

On IOS

uri: 'test-pdf.pdf'

Result

React Native Document & PDF Viewer result

Conclusion

And there you have it a React Native Document & PDF Viewer simple and easy.
I hope you like this article and find it as informative as you have expected.
I will include this code into expo.io and github.
Stay tuned and happy coding

Total
17
Shares
13 comments
  1. Can we use it to view all types of files viz.. audio, video, ppt, doc, txt, image, pdf etc.? and that too if we have file blob instead of path

  2. Hi Youssef El Habchi ,
    This article is good, i thank you for describing it clearly.
    But it only work for Ios devices this is not working with Android devices can you please check over it .
    I can provide you more details if you require any.

    1. Hi Dixit,
      It works by default on both platforms, you just need to make sure you are pointing to the specific platform with URI, it’s mentioned, check it back.

  3. hello ,
    i am working on my college project and i want to open any type of file from from my phone i am using file picker for picking a file from phone and then passing path to webView Source uri but nothing happen please help me.
    Thank You Very Much

Leave a Reply

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

Previous Post

React Native Hooks Example

Next Post
React Native Netinfo Example

React Native Netinfo Example

Related Posts