Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-native-pdf-light

Package Overview
Dependencies
Maintainers
1
Versions
29
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-native-pdf-light

Minimalist PDF viewer for React Native

  • 2.2.1
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
745
decreased by-58.68%
Maintainers
1
Weekly downloads
 
Created
Source

react-native-pdf-light

npm version CI

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.

PDF Annotation

Installation

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.

Usage

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
    • Optional: Path to annotation data. File assumed to be PAS v1.
  • annotationStr: string
    • Optional: Stringified JSON of annotation data. Data assumed to be PAS v1.
  • onError: (error: Error) => void
    • Optional: Callback to handle errors.
  • onLoadComplete: (numberOfPages: number) => void
    • Optional: Callback to handle pdf load completion.
    • Passed the page count of the loaded pdf.
  • onMeasurePages: (measurements: { itemHeight: number, offset: number }[]) => void
    • Optional: Callback to receive layout details of all pages.
  • shrinkToFit: 'never' | 'portrait' | 'landscape' | 'always'
    • Optional: Size pages such that each page can be displayed without cutoff.
    • Applies when device is in the specified orientation.
  • source: string
    • Document to display.

The following props are forwarded to the underlying FlatList component:

  • initialScrollIndex
  • ListEmptyComponent
  • onMomentumScrollBegin
  • onMomentumScrollEnd
  • onScroll
  • onScrollBeginDrag
  • onScrollEndDrag
  • refreshControl
  • scrollEventThrottle

Methods:

  • scrollToIndex(index: number): void
    • Scroll to the specified page (0-indexed).
  • scrollToOffset(offset: number): void
    • Scroll to the specified offset.
<PdfView ... /> Single page of a pdf.

Props:

  • annotation: string
    • Optional: Path to annotation data. File assumed to be PAS v1.
  • annotationStr: string
    • Optional: Stringified JSON of annotation data. Data assumed to be PAS v1.
  • page: number
    • Page (0-indexed) of document to display.
  • resizeMode: 'contain' | 'fitWidth'
    • Optional: How pdf page should be scaled to fit in view dimensions.
  • source: string
    • Document to display.
  • style: ViewStyle
    • Optional: View stylesheet.
<ZoomPdfView ... /> Pinch zoomable single page of a pdf.

Zoom interactions compatible with react-native-pager-view in horizontal display mode.

Props:

  • All props from PdfView
  • onZoomIn: () => void
    • Optional: Callback when view starts to zoom.
  • onZoomReset: () => void
    • Optional: Callback when view returns to non-zoomed state.
  • maximumZoom: number
    • Optional: Maximum allowed zoom. Default 2.
  • refreshControl: <RefreshControl />
    • Optional: A RefreshControl component, used to provide pull-to-refresh functionality for the internal ScrollView.
PdfUtil Utility functions.

PdfUtil.getPageCount(source: string): Promise<number>

  • Get the number of pages of a pdf.

PdfUtil.getPageSizes(source: string): Promise<{ height: number; width: number }[]>

  • Get the dimensions of every page.

Known Issues

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.)

Alternatives

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Keywords

FAQs

Package last updated on 19 Jul 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc