PDF viewer for React Native. Implemented with platform native render functions for smallest deploy size impact, and restricted feature set to simplify integration with larger systems.
PDF viewer for React Native. Implemented with platform native render functions for smallest deploy size impact, and restricted feature set to simplify integration with larger systems.
Includes prefabricated full document viewer based on FlatList
and a single page render component to use as a building block for your own fully custom viewer.
Uses android.graphics.pdf.PdfRenderer
on Android and CGPDFDocument
on iOS. Unlike many native components in the wild, react-native-pdf-light
provides full implementation of React Native shadow nodes. This simplifies UI development, since the component actually knows its own dimensions.
npm install react-native-pdf-light
If iOS build fails with Undefined symbol: __swift_FORCE_LOAD_...
, add an empty .swift
file to the xcode project.
import { Pdf, PdfUtil } from 'react-native-pdf-light';
PdfUtil.getPageCount(source).then(console.log);
<Pdf source={source} />
If creating your own custom viewer, import can be optimized to:
import { PdfView } from 'react-native-pdf-light/PdfView';
<PdfView page={page} source={source} />
<Pdf ... />
Display a pdf.Props:
onError: (error: Error) => void
onLoadComplete: (numberOfPages: number) => void
onMeasurePages: (measurements: { itemHeight: number, offset: number }[]) => void
shrinkToFit: 'never' | 'portrait' | 'landscape' | 'always'
source: string
The following props are forwarded to the underlying FlatList
component:
initialScrollIndex
ListEmptyComponent
onMomentumScrollBegin
onMomentumScrollEnd
onScroll
onScrollBeginDrag
onScrollEndDrag
refreshControl
scrollEventThrottle
Methods:
scrollToIndex(index: number): void
scrollToOffset(offset: number): void
<PdfView ... />
Single page of a pdf.Props:
page: number
resizeMode: 'contain' | 'fitWidth'
source: string
style: ViewStyle
PdfUtil
Utility functions.PdfUtil.getPageCount(source: string): Promise<number>
PdfUtil.getPageSizes(source: string): Promise<{ height: number; width: number }[]>
On Android API level < 26 when directly rendering pages with PdfView
at a non-default aspect ratio (e.g. setting both width and height of the view such that the view's aspect ratio does not match the pdf page's aspect ratio) if a page in the pdf is cropped or rotated, the page may render in the wrong position. This is due to a bug in the native android.graphics.pdf.PdfRenderer
. (If you are aware of a fix, pull requests welcome.)
See the contributing guide to learn how to contribute to the repository and the development workflow.
Author: alpha0010
Source Code: https://github.com/alpha0010/react-native-pdf-viewer
Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.
Skenix is providing React Native Development Services with qualified React Native App Developers. Get the best React Native App Development Services.
Are you a mobile app developer looking for more efficient tools for your projects? Mobile app development is getting tougher and tougher as the market continues to grow. As a developer, you need to develop Apps which meet the demands of your users. To achieve this, adopt the right tools, like the React Native development framework.
Looking for top React Native mobile app development company in USA for Startups & Enterprise? Find out the top list of React Native mobile app development company in USA.
Hire top react native app development company in New York to build and develop custom react native mobile apps for Android & iOS with the latest features.