Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/alpha0010/react-native-pdf-viewer

Minimalist PDF viewer for React Native
https://github.com/alpha0010/react-native-pdf-viewer

pdf pdf-viewer react-native

Last synced: about 2 hours ago
JSON representation

Minimalist PDF viewer for React Native

Host: GitHub
URL: https://github.com/alpha0010/react-native-pdf-viewer
Owner: alpha0010
License: mit
Created: 2020-09-17T22:44:48.000Z (about 4 years ago)
Default Branch: master
Last Pushed: 2024-09-23T15:37:35.000Z (about 2 months ago)
Last Synced: 2024-11-07T17:02:18.234Z (7 days ago)
Topics: pdf, pdf-viewer, react-native
Language: TypeScript
Homepage:
Size: 594 KB
Stars: 76
Watchers: 2
Forks: 10
Open Issues: 3
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE

Awesome Lists containing this project

README

# react-native-pdf-light

[![npm version](https://img.shields.io/npm/v/react-native-pdf-light)](https://www.npmjs.com/package/react-native-pdf-light)
![CI](https://github.com/alpha0010/react-native-pdf-viewer/workflows/CI/badge.svg)

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](https://github.com/alpha0010/paged-annotation). If
annotation support is not needed, use 1.x for slightly reduced size.

PDF Annotation

## Installation

```sh
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

```js
import { Pdf, PdfUtil } from 'react-native-pdf-light';

PdfUtil.getPageCount(source).then(console.log);

```

If creating your own custom viewer to manage pages:
```js
import { PdfView } from 'react-native-pdf-light';

```

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.
```js
import { ZoomPdfView } from 'react-native-pdf-light/Zoom';

```

#### `` Display a pdf.

Props:
- `annotation: string`
- Optional: Path to annotation data. File assumed to be [PAS v1](https://github.com/alpha0010/paged-annotation#version-1).
- `annotationStr: string`
- Optional: Stringified JSON of annotation data. Data assumed to be [PAS v1](https://github.com/alpha0010/paged-annotation#version-1).
- `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`](https://reactnative.dev/docs/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.

#### `` Single page of a pdf.

#### `` 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: `
- Optional: A [`RefreshControl`](https://reactnative.dev/docs/refreshcontrol) component, used to provide pull-to-refresh functionality for the internal ScrollView.

#### `PdfUtil` Utility functions.

`PdfUtil.getPageCount(source: string): Promise`
- 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](https://github.com/alpha0010/react-native-pdf-viewer/pulls).)

## Alternatives

- [react-native-pdf](https://github.com/wonday/react-native-pdf)
- [react-native-file-viewer](https://github.com/vinzscam/react-native-file-viewer)
- [react-native-view-pdf](https://github.com/rumax/react-native-PDFView)
- [rn-pdf-reader-js](https://github.com/xcarpentier/rn-pdf-reader-js)

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT