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 {
    return (
      <View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>


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.


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.

      source={{ uri: "" }} />

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'


uri: 'test-pdf.pdf'


React Native Document & PDF Viewer result


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 and github.
Stay tuned and happy coding

  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. Es posible que además de la visualización, se pueda descargar el archivo, en concreto el PDF? Gracias.

  3. 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.

  4. 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