How to show pdf files in react native applications

How to show pdf in a react native app :

This post will show you how to load a pdf from remote cloud storage and how to show it in a react native application. We need to use a third-party library for PDF view as React Native doesn’t provide any inbuilt packages.

I will show you by using a package called react-native-pdf that provides an easy way to load PDF files from local or remote storage.

Installation :

The complete documentation of this module is available here on Github.

You can install it by using npm or yarn :

# Using npm
npm install react-native-pdf rn-fetch-blob @react-native-community/progress-bar-android @react-native-community/progress-view --save

# Using yarn:
yarn add react-native-pdf rn-fetch-blob @react-native-community/progress-bar-android @react-native-community/progress-view

iOS and Android setup :

Once the installation is completed, you are almost 90% done with the setup. If you are below React Native 0.60, link it :

react-native link rn-fetch-blob
react-native link @react-native-community/progress-bar-android
react-native link @react-native-community/progress-view
react-native link react-native-pdf

For React Native 0.60 and above, do a pod install for iOS :

cd ios && pd install

And add the below to your android/app/build.gradle file :

android {

    packagingOptions {
       pickFirst 'lib/x86/libc++_shared.so'
       pickFirst 'lib/x86_64/libjsc.so'
       pickFirst 'lib/arm64-v8a/libjsc.so'
       pickFirst 'lib/arm64-v8a/libc++_shared.so'
       pickFirst 'lib/x86_64/libc++_shared.so'
       pickFirst 'lib/armeabi-v7a/libc++_shared.so'
     }

   }

That’s it. You can now load any pdf file as like below :

import Pdf from 'react-native-pdf';

<Pdf source={source} />

The source can be like {uri:”http://site.com/file.pdf”} . You can check the Github repository for more examples.

It provides the following callback methods :

  • onLoadProgress
  • onLoadComplete
  • onPageChanged
  • onError
  • onPageSingleTap
  • onScaleChanged
  • onPressLink

You might also like: