Minimalist PDF viewer for React Native
MIT License
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.
Version 2.x, adds render support for annotations conforming the PAS standard v1. If annotation support is not needed, use 1.x for slightly reduced size.
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 to manage pages:
import { PdfView } from 'react-native-pdf-light';
<PdfView page={page} source={source} />
For zoom support, install react-native-gesture-handler
and use deep import.
Note that react-native-gesture-handler
is only required to use zoom
features; the other display options do not have any dependencies.
import { ZoomPdfView } from 'react-native-pdf-light/Zoom';
<ZoomPdfView page={page} source={source} />
<Pdf ... />
Display a pdf.Props:
annotation: string
annotationStr: string
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:
annotation: string
annotationStr: string
page: number
resizeMode: 'contain' | 'fitWidth'
source: string
style: ViewStyle
<ZoomPdfView ... />
Pinch zoomable single page of a pdf.Zoom interactions compatible with react-native-pager-view
in horizontal
display mode.
Props:
PdfView
onZoomIn: () => void
onZoomReset: () => void
maximumZoom: number
refreshControl: <RefreshControl />
RefreshControl
component, used to provide pull-to-refresh functionality for the internal ScrollView.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.
MIT