React Native PDF Reader or Viewer Example

This tutorial explains how to build PDF viewer in react native application. Sometime developers needs to display PDF files in their mobile application, in that case they can follow this article to create simple PDF viewer and they can customize it as well. For creating PDF reader we are going to use rn-pdf-reader-js library in this react native project.

Build Simple PDF Reader/Viewer.

In this example we will build PDF viewer in react native application. Using this we can display the PDF content in android or iOS application.

Step 1: First create the new reactive project.

Step 2: Open App.js File in your favorite code editor and erase all code and follow this tutorial.

Step 3: Through react , react-native packages import all required components.

import React, { Component } from 'react';
import { View, StyleSheet, WebView } from 'react-native';
import { Constants } from 'expo';

Step 4: Open App.js component and and Implement render method. Apply the below code inside the render block of your App component.

 render() {
    return (
      <View style={styles.container}>
        <WebView
          bounces={false}
          scrollEnabled={false} 
          source={{ uri: 'http://www.africau.edu/images/default/sample.pdf' }} />
      </View>
    );
  }

Step 5: Apply the below style sheet design.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: Constants.statusBarHeight,
  },
});

Complete Source Code for App.js 

Lets see the complete source code that helps to create simple PDF reader or viewer example in react native application. With the help of this PDF reader, you can view the PDF content easily.

import React, { Component } from 'react';
import { View, StyleSheet, WebView } from 'react-native';
import { Constants } from 'expo';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <WebView
          bounces={false}
          scrollEnabled={false} 
          source={{ uri: 'http://www.africau.edu/images/default/sample.pdf' }} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: Constants.statusBarHeight,
  },
});

Screenshot :

This is all about React Native PDF Reader or Viewer Example in react native application. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.

Demo Link :
React Native PDF Viewer Example