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