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-viewiOS 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-pdfFor React Native 0.60 and above, do a pod install for iOS :
cd ios && pd installAnd 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