Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/danfordgidraph/react-native-render-pdf
A Native, High-Performance, Feature-Rich and fully cross-platform React Native PDF View component written in Obj-C++ for iOS, Kotlin for Android and C++ for Windows
https://github.com/danfordgidraph/react-native-render-pdf
android cpp ios kotlin mobile mobile-development mobile-library objective-c react react-native react-native-library universal-app windows
Last synced: 4 months ago
JSON representation
A Native, High-Performance, Feature-Rich and fully cross-platform React Native PDF View component written in Obj-C++ for iOS, Kotlin for Android and C++ for Windows
- Host: GitHub
- URL: https://github.com/danfordgidraph/react-native-render-pdf
- Owner: DanfordGidraph
- License: mit
- Created: 2024-07-03T16:00:35.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-07-05T09:44:43.000Z (7 months ago)
- Last Synced: 2024-09-29T02:20:59.114Z (4 months ago)
- Topics: android, cpp, ios, kotlin, mobile, mobile-development, mobile-library, objective-c, react, react-native, react-native-library, universal-app, windows
- Language: Objective-C++
- Homepage: https://www.npmjs.com/package/react-native-render-pdf
- Size: 272 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-render-pdf
[](https://www.npmjs.com/package/react-native-render-pdf)
A high performance & feature rich React Native PDF View component written in Obj-C++ for iOS, Kotlin for Android and C++ for Windows
### Feature
- read a PDF from url, blob, local file or asset and can cache it.
- display horizontally or vertically
- drag and zoom
- double tap for zoom
- support password protected pdf
- jump to a specific page in the pdf
### Supported versions
We use [`react-native-blob-util`](https://github.com/RonRadtke/react-native-blob-util) to handle file system access in this package,
So you should install react-native-render-pdf and react-native-blob-util
> The table below shows the supported versions of React Native and react-native-blob-util for different versions of `react-native-render-pdf`.
| React Native | 0.57+ |
| ----------------------- | ------- |
| react-native-render-pdf | 1.0.0+ |
| react-native-blob-util | 0.13.7+ |
> 🚨 Expo: This package is not available in the [Expo Go](https://expo.dev/client) app. Learn how you can use this package in [Custom Dev Clients](https://docs.expo.dev/development/getting-started/) via the out-of-tree [Expo Config Plugin](https://github.com/expo/config-plugins/tree/master/packages/react-native-pdf). Example: [`with-pdf`](https://github.com/expo/examples/tree/master/with-pdf).
### Installation
```bash
# Using npm
npm install react-native-render-pdf react-native-blob-util --save
# or using yarn:
yarn add react-native-render-pdf react-native-blob-util
```
Then follow the instructions for your platform to link react-native-render-pdf into your project:
### iOS installation
iOS details
**React Native 0.60 and above**
Run `pod install` in the `ios` directory. Linking is not required in React Native 0.60 and above.
**React Native 0.59 and below**
```bash
react-native link react-native-blob-util
react-native link react-native-render-pdf
```
### Android installation
Android details
\*\*Add following to your android/build.gradle\*\*
```diff
ext {
...
+ kotlinVersion = "1.9.24' // or latest
...
}
```
**If you use RN 0.59.0 and above**, please add following to your android/app/build.gradle\*\*
```diff
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'
+ }
}
```
**React Native 0.59.0 and below**
```bash
react-native link react-native-blob-util
react-native link react-native-render-pdf
```
### Windows installation
Windows details
- Open your solution in Visual Studio 2019 (eg. `windows\yourapp.sln`)
- Right-click Solution icon in Solution Explorer > Add > Existing Project...
- If running RNW 0.62: add `node_modules\react-native-render-pdf\windows\RCTPdf\RCTPdf.vcxproj`
- If running RNW 0.62: add `node_modules\react-native-blob-util\windows\ReactNativeBlobUtil\ReactNativeBlobUtil.vcxproj`
- Right-click main application project > Add > Reference...
- Select `progress-view` and in Solution Projects
- If running 0.62, also select `RCTPdf` and `ReactNativeBlobUtil`
- In app `pch.h` add `#include "winrt/RCTPdf.h"`
- If running 0.62, also select `#include "winrt/ReactNativeBlobUtil.h"`
- In `App.cpp` add `PackageProviders().Append(winrt::progress_view::ReactPackageProvider());` before `InitializeComponent();`
- If running RNW 0.62, also add `PackageProviders().Append(winrt::RCTPdf::ReactPackageProvider());` and `PackageProviders().Append(winrt::ReactNativeBlobUtil::ReactPackageProvider());`
#### Bundling PDFs with the app
To add a `test.pdf` like in the example add:
```
true
```
in the app `.vcxproj` file, before ``.
### FAQ
FAQ details
Q1. After installation and running, I can not see the pdf file.
A1: maybe you forgot to excute `react-native link` or it does not run correctly.
You can add it manually. For detail you can see the issue [`#24`](https://github.com/danfordgidraph/react-native-render-pdf/issues/24) and [`#2`](https://github.com/danfordgidraph/react-native-render-pdf/issues/2)
Q2. When running, it shows `'Pdf' has no propType for native prop RCTPdf.acessibilityLabel of native type 'String'`
A2. Your react-native version is too old, please upgrade it to 0.47.0+ see also [`#39`](https://github.com/danfordgidraph/react-native-render-pdf/issues/39)
Q3. When I run the example app I get a white/gray screen / the loading bar isn't progressing .
A3. Check your uri, if you hit a pdf that is hosted on a `http` you will need to do the following:
**iOS:**
add an exception for the server hosting the pdf in the ios `info.plist`. Here is an example :
```
NSAppTransportSecurity
NSExceptionDomains
yourserver.com
NSIncludesSubdomains
NSTemporaryExceptionAllowsInsecureHTTPLoads
NSTemporaryExceptionMinimumTLSVersion
TLSv1.1
```
**Android:**
[`see here`](https://stackoverflow.com/questions/54818098/cleartext-http-traffic-not-permitted)
Q4. why doesn't it work with react native expo?.
A4. Expo does not support native module. you can read more expo caveats [`here`](https://facebook.github.io/react-native/docs/getting-started.html#caveats)
Q5. Why can't I run the iOS example? `'Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65.'`
A5. Run the following commands in the project folder (e.g. `react-native-render-pdf/example`) to ensure that all dependencies are available:
```
yarn install (or npm install)
cd ios
pod install
cd ..
react-native run-ios
```
[[more]](https://github.com/danfordgidraph/react-native-render-pdf/releases)
### Example
```js
/**
* Original Author: Wonday (@wonday.org) Copyright (c) 2017-present
* Copyright (c) 2024-present, Staxtech (@gidraphdanford.dev)
* All rights reserved.
*
* This source code is licensed under the MIT-style license found in the
* LICENSE file in the root directory of this source tree.
*/
import React from "react";
import { StyleSheet, Dimensions, View } from "react-native";
import Pdf from "react-native-render-pdf";
export default class PDFExample extends React.Component {
render() {
const source = {
uri: "http://samples.leanpub.com/thereactnativebook-sample.pdf",
cache: true,
};
//const source = require('./test.pdf'); // ios only
//const source = {uri:'bundle-assets://test.pdf' };
//const source = {uri:'file:///sdcard/test.pdf'};
//const source = {uri:"data:application/pdf;base64,JVBERi0xLjcKJc..."};
//const source = {uri:"content://com.example.blobs/xxxxxxxx-...?offset=0&size=xxx"};
//const source = {uri:"blob:xxxxxxxx-...?offset=0&size=xxx"};
return (
{
console.log(`Number of pages: ${numberOfPages}`);
}}
onPageChanged={(page, numberOfPages) => {
console.log(`Current page: ${page}`);
}}
onError={(error) => {
console.log(error);
}}
onPressLink={(uri) => {
console.log(`Link pressed: ${uri}`);
}}
style={styles.pdf}
/>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "flex-start",
alignItems: "center",
marginTop: 25,
},
pdf: {
flex: 1,
width: Dimensions.get("window").width,
height: Dimensions.get("window").height,
},
});
```
### Configuration
| Property | Type | Default | Description | iOS | Android | Windows | FirstRelease |
| ------------------------------ | :-----------------------------------------------------------: | :----------------------: | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- | ------- | --------------------------- | ------------ |
| source | object | not null | PDF source like {uri:xxx, cache:false}. see the following for detail. | ✔ | ✔ | ✔ | 1.0.0 |
| page | number | 1 | initial page index | ✔ | ✔ | ✔ | 1.0.0 |
| scale | number | 1.0 | should minScale<=scale<=maxScale | ✔ | ✔ | ✔ | 1.0.0 |
| minScale | number | 1.0 | min scale | ✔ | ✔ | ✔ | 1.0.0 |
| maxScale | number | 3.0 | max scale | ✔ | ✔ | ✔ | 1.0.0 |
| horizontal | bool | false | draw page direction, if you want to listen the orientation change, you can use [[react-native-orientation-locker]](https://github.com/danfordgidraph/react-native-orientation-locker) | ✔ | ✔ | ✔ | 1.0.0 |
| showsHorizontalScrollIndicator | bool | true | shows or hides the horizontal scroll bar indicator on iOS | ✔ | | | 1.0.0 |
| showsVerticalScrollIndicator | bool | true | shows or hides the vertical scroll bar indicator on iOS | ✔ | | | 1.0.0 |
| fitPolicy | number | 2 | 0:fit width, 1:fit height, 2:fit both(default) | ✔ | ✔ | ✔ | 1.0.0 |
| spacing | number | 10 | the breaker size between pages | ✔ | ✔ | ✔ | 1.0.0 |
| password | string | "" | pdf password, if password error, will call OnError() with message "Password required or incorrect password." | ✔ | ✔ | ✔ | 1.0.0 |
| style | object | {backgroundColor:"#eee"} | support normal view style, you can use this to set border/spacing color... | ✔ | ✔ | ✔ | 1.0.0 |
| renderActivityIndicator | (progress) => Component | | when loading show it as an indicator, you can use your component | ✔ | ✔ | ✖ | 1.0.0 |
| enableAntialiasing | bool | true | improve rendering a little bit on low-res screens, but maybe course some problem on Android 4.4, so add a switch | ✖ | ✔ | ✖ | 1.0.0 |
| enablePaging | bool | false | only show one page in screen | ✔ | ✔ | ✔ | 1.0.0 |
| enableRTL | bool | false | scroll page as "page3, page2, page1" | ✔ | ✖ | ✔ | 1.0.0 |
| enableAnnotationRendering | bool | true | enable rendering annotation, notice:iOS only support initial setting,not support realtime changing | ✔ | ✔ | ✖ | 1.0.0 |
| trustAllCerts | bool | true | Allow connections to servers with self-signed certification | ✔ | ✔ | ✖ | 1.0.0 |
| singlePage | bool | false | Only show first page, useful for thumbnail views | ✔ | ✔ | ✔ | 1.0.0 |
| onLoadProgress | function(percent) | null | callback when loading, return loading progress (0-1) | ✔ | ✔ | ✖ | 1.0.0 |
| onLoadComplete | function(numberOfPages, path, {width, height}, tableContents) | null | callback when pdf load completed, return total page count, pdf local/cache path, {width,height} and table of contents | ✔ | ✔ | ✔ but without tableContents | 1.0.0 |
| onPageChanged | function(page,numberOfPages) | null | callback when page changed ,return current page and total page count | ✔ | ✔ | ✔ | 1.0.0 |
| onError | function(error) | null | callback when error happened | ✔ | ✔ | ✔ | 1.0.0 |
| onPageSingleTap | function(page) | null | callback when page was single tapped | ✔ | ✔ | ✔ | 1.0.0 |
| onScaleChanged | function(scale) | null | callback when scale page | ✔ | ✔ | ✔ | 1.0.0 |
| onPressLink | function(uri) | null | callback when link tapped | ✔ | ✔ | ✖ | 1.0.0 |
#### parameters of source
| parameter | Description | default | iOS | Android | Windows |
| ------------- | --------------------------------------------- | --------------- | --- | ------- | ------- |
| uri | pdf source, see the forllowing for detail. | required | ✔ | ✔ | ✔ |
| cache | use cache or not | false | ✔ | ✔ | ✖ |
| cacheFileName | specific file name for cached pdf file | MD5(uri) result | ✔ | ✔ | ✖ |
| expiration | cache file expired seconds (0 is not expired) | 0 | ✔ | ✔ | ✖ |
| method | request method when uri is a url | "GET" | ✔ | ✔ | ✖ |
| headers | request headers when uri is a url | {} | ✔ | ✔ | ✖ |
#### types of source.uri
| Usage | Description | iOS | Android | Windows |
| -------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- | --- | ------- | ------- |
| `{uri:"http://xxx/xxx.pdf"}` | load pdf from a url | ✔ | ✔ | ✔ |
| `{require("./test.pdf")}` | load pdf relate to js file (do not need add by xcode) | ✔ | ✖ | ✖ |
| `{uri:"bundle-assets://path/to/xxx.pdf"}` | load pdf from assets, the file should be at android/app/src/main/assets/path/to/xxx.pdf | ✖ | ✔ | ✖ |
| `{uri:"bundle-assets://xxx.pdf"}` | load pdf from assets, you must add pdf to project by xcode. this does not support folder. | ✔ | ✖ | ✖ |
| `{uri:"data:application/pdf;base64,JVBERi0xLjcKJc..."}` | load pdf from base64 string | ✔ | ✔ | ✔ |
| `{uri:"file:///absolute/path/to/xxx.pdf"}` | load pdf from local file system | ✔ | ✔ | ✔ |
| `{uri:"ms-appx:///xxx.pdf"}}` | load pdf bundled with UWP app | ✖ | ✖ | ✔ |
| `{uri:"content://com.example.blobs/xxxxxxxx-...?offset=0&size=xxx"}` | load pdf from content URI | ✔\* | ✖ | ✖ |
| `{uri:"blob:xxxxxxxx-...?offset=0&size=xxx"}` | load pdf from blob URL | ✖ | ✔ | ✖ |
\*) requires building React Native from source with [this patch](https://github.com/facebook/react-native/pull/31789)
### Methods
- [setPage](#setPage)
Methods operate on a ref to the PDF element. You can get a ref with the following code:
```
return (
{ this.pdf = pdf; }}
source={source}
...
/>
);
```
#### setPage()
`setPage(pageNumber)`
Set the current page of the PDF component. pageNumber is a positive integer. If pageNumber > numberOfPages, current page is not changed.
Example:
```
this.pdf.setPage(42); // Display the answer to the Ultimate Question of Life, the Universe, and Everything
```
### Derived Works and Contributions Acknowledgement
- Based on the original work by [Wonday](https://github.com/wonday/) [react-native-pdf](https://github.com/wonday/react-native-pdf)
- Implements the [react-native-blob-util](https://github.com/RonRadtke/react-native-blob-util) library for file system access
- Implements the [android-pdfview Fork](https://github.com/Infomaniak/android-pdfview) library for Android by Infomaniak
- Implements the [PDFiumAndroid Fork](https://github.com/Infomaniak/PdfiumAndroid) by Infomaniak