React Native PDF

https://github.com/wonday/react-native-pdf
Admin
React Native PDF is a cross-platform PDF view component for React Native that supports reading PDFs...
Tokens:71,192
Snippets:441
Trust Score:6.7
License:MIT
Update:1 day ago
Show doc for...
Tokens:
Raw
### Install pods with pod install

Source: https://github.com/wonday/react-native-pdf/blob/master/example/android/app/src/main/assets/test.pdf

Run this command to install the pods defined in your Podfile.

```bash
$ pod install
```

--------------------------------

### Install and watch JSX with react-tools

Source: https://github.com/wonday/react-native-pdf/blob/master/example/android/app/src/main/assets/test.pdf

Commands to install react-tools globally and precompile JSX files from src/ to build/ with the --watch flag.

```bash
$ npm install -g react-tools
$ cd project/
$ jsx --watch src/ build/
```

--------------------------------

### Install CocoaPods with gem

Source: https://github.com/wonday/react-native-pdf/blob/master/example/android/app/src/main/assets/test.pdf

Run this command to install CocoaPods, a package management tool for iOS/Mac development. Requires Ruby to be installed.

```bash
gem install cocoapods
```

--------------------------------

### Install React Native CLI

Source: https://github.com/wonday/react-native-pdf/blob/master/example/android/app/src/main/assets/test.pdf

Install the React Native command-line interface globally using npm.

```bash
npm install -g react-native-cli
```

--------------------------------

### Start Metro dev server with npm or Yarn

Source: https://github.com/wonday/react-native-pdf/blob/master/FabricExample/README.md

Run from the root of the React Native project to start the Metro bundler. Use either npm start or yarn start.

```sh
# Using npm
npm start

# OR using Yarn
yarn start
```

--------------------------------

### Start React Native development server

Source: https://github.com/wonday/react-native-pdf/blob/master/example/android/app/src/main/assets/test.pdf

Run this command from the project root to start the React Native development server within the CocoaPods dependency. The --root option points to the ReactComponent directory containing index.ios.js.

```bash
(JS_DIR=`pwd`/ReactComponent; cd Pods/React; npm run start -- --root $JS_DIR)
```

--------------------------------

### Basic Usage Example

Source: https://github.com/wonday/react-native-pdf/blob/master/README.md

A complete example of using the Pdf component in a React Native application, demonstrating how to set the source and handle events like onLoadComplete, onPageChanged, onError, and onPressLink.

```APIDOC
## Basic Usage Example

### Description
A complete example of using the Pdf component in a React Native application, demonstrating how to set the source and handle events like onLoadComplete, onPageChanged, onError, and onPressLink.

### Code
```js
/**
 * Copyright (c) 2017-present, Wonday (@wonday.org)
 * 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-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 (
            <View style={styles.container}>
                <Pdf
                    source={source}
                    onLoadComplete={(numberOfPages,filePath) => {
                        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}/>
            </View>
        )
    }
}

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,
    }
});
```
```

--------------------------------

### Install react-native-pdf and react-native-blob-util via npm or yarn

Source: https://github.com/wonday/react-native-pdf/blob/master/README.md

Use npm or yarn to install the package and its required dependency react-native-blob-util. The yarn command is an alternative to the npm command.

```bash
# Using npm
npm install react-native-pdf react-native-blob-util --save

# or using yarn:
yarn add react-native-pdf react-native-blob-util
```

--------------------------------

### Install CocoaPods with bundler

Source: https://github.com/wonday/react-native-pdf/blob/master/FabricExample/README.md

Run only on first clone or after updating native deps to install CocoaPods itself via the Ruby bundler.

```sh
bundle install
```

--------------------------------

### Example: loading a PDF with PdfManager

Source: https://github.com/wonday/react-native-pdf/blob/master/_autodocs/api-reference/pdfmanager.md

Shows how to import PdfManager and call loadFile with a path and password. The returned array is destructured into fileNo, numberOfPages, pageWidth, and pageHeight. Errors are caught and checked for the 'Password required' message to warn about wrong passwords.

```javascript
import PdfManager from 'react-native-pdf/PdfManager';

try {
  const [fileNo, numberOfPages, pageWidth, pageHeight] =
    await PdfManager.loadFile('/var/mobile/Containers/Data/.../doc.pdf', 'secret');
  console.log({ fileNo, numberOfPages, pageWidth, pageHeight });
} catch (e) {
  if (e.message.includes('Password required')) {
    console.warn('Wrong password');
  } else {
    console.error('Load failed:', e.message);
  }
}
```

--------------------------------

### Direct PdfView usage with pre-resolved path

Source: https://github.com/wonday/react-native-pdf/blob/master/_autodocs/api-reference/pdfview.md

Shows direct construction of PdfView, which is possible but unsupported because it requires a pre-resolved path. The example sets path, password, page, horizontal, and callbacks.

```jsx
import PdfView from 'react-native-pdf/PdfView';
<PdfView
  path={"/path/to/some.pdf"}
  password=""
  page={2}
  horizontal
  onLoadComplete={(n, p, size) => console.log(n)}
  onError={(e) => console.error(e)}
  style={{ flex: 1 }}
/>
```

--------------------------------

### Usage example of PdfPageView

Source: https://github.com/wonday/react-native-pdf/blob/master/_autodocs/api-reference/pdfpageview.md

Example showing how to import and use PdfPageView inside a custom legacy renderer. The fileNo prop comes from PdfManager.loadFile, and the page prop is 1-based.

```jsx
import PdfPageView from 'react-native-pdf/PdfPageView';

// Inside a custom legacy renderer; fileNo comes from PdfManager.loadFile
<PdfPageView
  fileNo={fileNo}
  page={3}
  width={728}
  height={1040}
/>
```

--------------------------------

### DoubleTapView usage example

Source: https://github.com/wonday/react-native-pdf/blob/master/_autodocs/api-reference/doubletapview.md

Example of using DoubleTapView to wrap a page view, with custom delay and radius, and handlers for single and double taps.

```jsx
import DoubleTapView from 'react-native-pdf/DoubleTapView';

<DoubleTapView
  delay={250}
  radius={60}
  onSingleTap={(x, y) => console.log(`tap at ${x},${y}`)}
  onDoubleTap={() => console.log('zoom toggle')}
>
  <YourPageView />
</DoubleTapView>
```

--------------------------------

### Basic usage of Pdf with ref and setPage

Source: https://github.com/wonday/react-native-pdf/blob/master/_autodocs/api-reference/pdf.md

JSX example showing how to create a Pdf component with a ref and later call setPage to navigate to a page. The ref is typed as PdfRef | null and the source uses a remote URI with caching.

```jsx
import React, { useRef } from 'react';
import Pdf, { type PdfRef } from 'react-native-pdf';

export default function Viewer() {
  const pdfRef = useRef<PdfRef | null>(null);
  return (
    <Pdf
      ref={pdfRef}
      source={{ uri: 'https://example.com/doc.pdf', cache: true }}
      style={{ flex: 1 }}
    />
  );
}

// later, e.g. in a "Next" button handler:
pdfRef.current?.setPage(3);
```

--------------------------------

### Install iOS pod dependencies

Source: https://github.com/wonday/react-native-pdf/blob/master/FabricExample/README.md

Run every time you update native dependencies to install the CocoaPods dependencies for the iOS app.

```sh
bundle exec pod install
```

--------------------------------

### Configure PdfView indirectly via Pdf component

Source: https://github.com/wonday/react-native-pdf/blob/master/_autodocs/api-reference/pdfview.md

Use this JSX example to render a PDF by configuring the Pdf component, which internally uses PdfView. The example sets source, disables PDFKit on iOS, and provides callbacks for load completion, page changes, and errors.

```jsx
<Pdf
  source={{ uri: 'https://example.com/doc.pdf' }}
  usePDFKit={false}   // forces the legacy PdfView path on iOS
  onLoadComplete={(total, path, size) => console.log(total, path, size)}
  onPageChanged={(page, total) => console.log(page, total)}
  onError={(err) => console.error(err)}
  style={{ flex: 1 }}
/>
```

--------------------------------

### Usage example of scrollToXY with PdfViewFlatList

Source: https://github.com/wonday/react-native-pdf/blob/master/_autodocs/api-reference/pdfviewflatlist.md

Shows how to import PdfViewFlatList and use scrollToXY to restore a saved offset after a layout or zoom change. Uses a ref to call the method with saved x and y coordinates.

```jsx
import PdfViewFlatList from 'react-native-pdf/PdfViewFlatList';

const listRef = React.createRef();
// later, restore a saved offset after a layout/zoom change:
listRef.current?.scrollToXY(savedOffset.x, savedOffset.y);
```

--------------------------------

### Enabling transformFile

Source: https://github.com/wonday/react-native-pdf/blob/master/README.md

Example of using the transformFile prop to enable file transformation before display, which requires setting a file transformer on react-native-blob-util.

```APIDOC
## Enabling transformFile

### Description
If the pdf file needs to be transformed before it is displayed (e.g. when the stored or downloaded file is encrypted), set the `transformFile` prop to `true`. The transformation itself is performed by `react-native-blob-util`, so you must set a file transformer on that library first — see [setting a file transformer](https://github.com/RonRadtke/react-native-blob-util/#setting-a-file-transformer) in the `react-native-blob-util` documentation.

### Code
```js
<Pdf
    source={source}
    transformFile={true}
    onLoadComplete={(numberOfPages,filePath) => {
        console.log(`Number of pages: ${numberOfPages}`);
    }}
    onError={(error) => {
        console.log(error);
    }}
    style={styles.pdf}/>
```

### Note
When `transformFile` is enabled, the transformed file is written to a separate `.view` file, so the original file on disk stays in its transformed (e.g. encrypted) form.
```

--------------------------------

### PinchZoomView usage example

Source: https://github.com/wonday/react-native-pdf/blob/master/_autodocs/api-reference/pinchzoomview.md

Shows how to use PinchZoomView as a wrapper around a ScrollView. The scalable prop enables the pinch gesture, and onScaleChanged logs the scale and focal point relative to the previous gesture frame.

```jsx
import PinchZoomView from 'react-native-pdf/PinchZoomView';

<PinchZoomView
  scalable
  onScaleChanged={({scale, pageX, pageY}) => {
    // ratio relative to the previous gesture frame
    console.log(`pinch ${scale} around (${pageX}, ${pageY})`);
  }}
>
  <ScrollView ...>...</ScrollView>
</PinchZoomView>
```

--------------------------------

### Link react-native-pdf and react-native-blob-util for React Native 0.59 and below (iOS)

Source: https://github.com/wonday/react-native-pdf/blob/master/README.md

For React Native 0.59 and below on iOS, run these react-native link commands to link the native modules. For React Native 0.60 and above, linking is not required; instead run pod install in the ios directory.

```bash
react-native link react-native-blob-util
react-native link react-native-pdf
```

--------------------------------

### Copy SampleApp to AwesomeProject

Source: https://github.com/wonday/react-native-pdf/blob/master/example/android/app/src/main/assets/test.pdf

Create the AwesomeProject directory and copy the SampleApp contents into it.

```bash
mkdir Examples/AwesomeProject
cp -R Examples/SampleApp/* Examples/AwesomeProject
```

--------------------------------

### Initialize and navigate to AwesomeProject

Source: https://github.com/wonday/react-native-pdf/blob/master/example/android/app/src/main/assets/test.pdf

Create a new React Native project named AwesomeProject and change into its directory.

```bash
react-native init AwesomeProject
cd AwesomeProject
```

--------------------------------

### Initialize a New React Native Project

Source: https://github.com/wonday/react-native-pdf/blob/master/FabricExample/test.pdf

Create a new React Native project named AwesomeProject using the CLI.

```bash
react-native init AwesomeProject
```

--------------------------------

### Change to Project Directory

Source: https://github.com/wonday/react-native-pdf/blob/master/FabricExample/test.pdf

Navigate into the newly created project folder.

```bash
cd AwesomeProject
```

--------------------------------

### Create UIWindow and root view controller (iOS)

Source: https://github.com/wonday/react-native-pdf/blob/master/example/android/app/src/main/assets/test.pdf

Sets up the app window and assigns a root view controller, analogous to creating a Canvas and Brush in traditional iOS.

```objectivec
self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
MyViewController *rootViewController = [[MyViewController alloc] init];
rootViewController.launchOptions = launchOptions;
self.window.rootViewController = rootViewController;
[self.window makeKeyAndVisible];
return YES;
```

--------------------------------

### MyViewController.h and MyViewController.m

Source: https://github.com/wonday/react-native-pdf/blob/master/example/test.pdf

Create these two files in Xcode. MyViewController.h imports UIKit and RCTRootView, declares a UIViewController subclass with a launchOptions property. MyViewController.m loads the main.jsbundle and creates an RCTRootView with moduleName 'AdmobTest', setting its frame and adding it to the view.

```Objective-C
// MyViewController.h
#import <UIKit/UIKit.h>
#import "RCTRootView.h"
@interface MyViewController : UIViewController
@property (weak, nonatomic) NSDictionary *launchOptions;
@end

// MyViewController.m
#import "MyViewController.h"

@implementation MyViewController
-(void)viewDidLoad
{
    [super viewDidLoad];
    NSURL *jsCodeLocation;
    jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

    RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"AdmobTest" launchOptions:self.launchOptions];
    rootView.frame = CGRectMake(0, 50, viewRect.size.width, viewRect.size.height-50);
    [self.view addSubview:rootView];
}
@end
```

--------------------------------

### Run packager.sh for AwesomeProject

Source: https://github.com/wonday/react-native-pdf/blob/master/example/android/app/src/main/assets/test.pdf

Run the packager script pointing to the AwesomeProject directory.

```bash
packager/packager.sh --root=./Examples/AwesomeProject
```

--------------------------------

### Add React and RCTText to Podfile

Source: https://github.com/wonday/react-native-pdf/blob/master/example/android/app/src/main/assets/test.pdf

Add these lines to your Podfile to include React and the RCTText subspec. Create the Podfile under the project root if it doesn't exist.

```ruby
pod 'React'
pod 'React/RCTText'
```

--------------------------------

### Get a ref to the Pdf component

Source: https://github.com/wonday/react-native-pdf/blob/master/README.md

Use a ref callback to store the Pdf component instance, enabling access to its methods like setPage.

```jsx
return (
  <Pdf
    ref={(pdf) => { this.pdf = pdf; }}
    source={source}
    ...
  />
);
```

--------------------------------

### Direct call to setNativeProps with page prop

Source: https://github.com/wonday/react-native-pdf/blob/master/_autodocs/api-reference/pdf.md

JSX example showing how to call setNativeProps directly on the PdfRef to set the page property without a re-render.

```jsx
this.pdfRef.current.setNativeProps({ page: 5 });
```

--------------------------------

### Bundle test.pdf in Windows app .vcxproj

Source: https://github.com/wonday/react-native-pdf/blob/master/README.md

Add this XML to the app's .vcxproj file before the <None Include="packages.config" /> entry to include test.pdf as deployment content for the Windows app.

```xml
<None Include="..\..\test.pdf">
  <DeploymentContent>true</DeploymentContent>
</None>
```

--------------------------------

### StatefulThing component with state update

Source: https://github.com/wonday/react-native-pdf/blob/master/example/android/app/src/main/assets/test.pdf

Example of a React component that uses state to store a name and updates it on click. Note that the code directly mutates this.state.name, which is not the recommended way to update state in React; setState should be used instead.

```JavaScript
/** @jsx React.DOM */
var StatefulThing = React.createClass({
  updateName: function(event) {
    event.preventDefault();
    this.state.name = "Taylor";
  },
  setInitialState: function() {
    return (
      {name: "World"}
    );
  },
  render: function() {
    return (
      <a href="#" onClick={this.updateName}>
        My name is {this.state.name}
      </a>
    );
  }
});
```

--------------------------------

### Build and run iOS app with npm or Yarn

Source: https://github.com/wonday/react-native-pdf/blob/master/FabricExample/README.md

Run from the root of the project with Metro running to build and launch the iOS app. Use either npm run ios or yarn ios.

```sh
# Using npm
npm run ios

# OR using Yarn
yarn ios
```

--------------------------------

### Build and run Android app with npm or Yarn

Source: https://github.com/wonday/react-native-pdf/blob/master/FabricExample/README.md

Run from the root of the project with Metro running to build and launch the Android app. Use either npm run android or yarn android.

```sh
# Using npm
npm run android

# OR using Yarn
yarn android
```

--------------------------------

### Pdf component constructor

Source: https://github.com/wonday/react-native-pdf/blob/master/_autodocs/api-reference/pdf.md

Constructor initializes state for path, download status, and progress, plus internal task references.

```javascript
constructor(props) {
    super(props);
    this.state = {
        path: '',
        isDownloaded: false,
        progress: 0,
    };
    this.lastRNBFTask = null;
    this.lastViewFile = null;
}
```

--------------------------------

### Generate new library with react-native new-library

Source: https://github.com/wonday/react-native-pdf/blob/master/example/android/app/src/main/assets/test.pdf

Use this CLI command to generate a new React Native library module named SampleModule.

```bash
react-native new-library SampleModule
```

--------------------------------

### Exercise: Create React Native View with Blue Background

Source: https://github.com/wonday/react-native-pdf/blob/master/FabricExample/test.pdf

Exercise prompt: create a new React Native view and place it inside a ViewController, styling the view with a blue background.

```text
Create new react native view, and put it inside a `ViewController`, style the view with backgroundColor blue.
```

--------------------------------

### Commands to fix iOS build failure (error code 65)

Source: https://github.com/wonday/react-native-pdf/blob/master/README.md

Run these commands in the project folder (e.g., react-native-pdf/example) to ensure all dependencies are available when the iOS build fails with 'Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65.'

```bash
yarn install (or npm install)
cd ios
pod install
cd ..
react-native run-ios
```

--------------------------------

### Include React and your script in HTML

Source: https://github.com/wonday/react-native-pdf/blob/master/example/android/app/src/main/assets/test.pdf

HTML skeleton showing where to include react.js in the head and your source file after the document content.

```html
<html>
<head>
<script src="react.js"></script>
...
</head>
<body>
...
<script src="mine.js"></script>
</body>
</html>
```

--------------------------------

### MyViewController.h and MyViewController.m

Source: https://github.com/wonday/react-native-pdf/blob/master/example/android/app/src/main/assets/test.pdf

Creates a custom UIViewController that loads a React Native bundle and displays it as a root view. The header imports UIKit and RCTRootView, and the implementation sets up the root view with a specified module name and frame.

```objectivec
// MyViewController.h
#import <UIKit/UIKit.h>
#import "RCTRootView.h"
@interface MyViewController : UIViewController
@property (weak, nonatomic) NSDictionary *launchOptions;
@end

// MyViewController.m
#import "MyViewController.h"

@implementation MyViewController
- (void)viewDidLoad
{
  [super viewDidLoad];
  NSURL *jsCodeLocation;
  jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension: @"jsbundle"];

  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"AdmobTest" launchOptions:self.launchOptions];
  rootView.frame = CGRectMake(0, 50, viewRect.size.width, viewRect.size.height-50);
  [self.view addSubview:rootView];
}
@end
```

--------------------------------

### Precompiled version of ThingList

Source: https://github.com/wonday/react-native-pdf/blob/master/example/android/app/src/main/assets/test.pdf

Shows the JavaScript output after JSX precompilation, using React.DOM.h1 and Thing calls.

```javascript
var ThingList = React.createClass({displayName:'ThingList',
  render: function() {
    return (
      React.DOM.h1(null, "My Things:"),
      Thing( {name:"Hello World!"})
    );
  }
});
```

--------------------------------

### Modified AppDelegate.m

Source: https://github.com/wonday/react-native-pdf/blob/master/example/test.pdf

Modify the default SampleApp's AppDelegate.m to use MyViewController. The code comments out the default SampleApp code and sets MyViewController as the root view controller, passing launchOptions. It includes commented options for loading JavaScript from the development server or from a pre-bundled file.

```Objective-C
#import "AppDelegate.h"
#import "MyViewController.h"
@implementation AppDelegate

-(BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    //NSURL *jsCodeLocation;

    // Loading JavaScript code-uncomment the one you want.

    // OPTION 1
    // Load from development server. Start the server from the repository root:
    //
    // $ npm start
    //
    // To run on device, change `localhost` to the IP address of your computer, and make sure your computer and
    // iOS device are on the same Wi-Fi network.
    //jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"];

    // OPTION 2
    // Load from pre-bundled file on disk. To re-generate the static bundle, run
    //
    // $ curl http://localhost:8081/index.ios.bundle -o main.jsbundle
    //
    // and uncomment the next following line

    self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
    //UIViewController *rootViewController = [[UIViewController alloc] init];
    MyViewController *rootViewController = [[MyViewController alloc] init];
    rootViewController.launchOptions = launchOptions;
    self.window.rootViewController = rootViewController;
    [self.window makeKeyAndVisible];
    return YES;
}

@end
```

--------------------------------

### Create RCTRootView with bundle URL and module name (iOS)

Source: https://github.com/wonday/react-native-pdf/blob/master/example/android/app/src/main/assets/test.pdf

Shows how to set the JavaScript bundle location and create an RCTRootView for a React-Native component.

```objectivec
NSURL *jsCodeLocation;
jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"SampleApp" launchOptions:self.launchOptions];
```

--------------------------------

### Configuration Properties

Source: https://github.com/wonday/react-native-pdf/blob/master/README.md

Table of all configurable properties for the Pdf component, including type, default, description, and platform support.

```APIDOC
## Configuration Properties

### Description
Table of all configurable properties for the Pdf component, including type, default, description, and platform support.

### Properties

| Property | Type | Default | Description | iOS | Android | Windows | FirstRelease |
| --- | --- | --- | --- | --- | --- | --- | --- |
| source | object | not null | PDF source like {uri:xxx, cache:false}. see the following for detail. | ✔ | ✔ | ✔ | <3.0 |
| page | number | 1 | initial page index | ✔ | ✔ | ✔ | <3.0 |
| scale | number | 1.0 | should minScale<=scale<=maxScale | ✔ | ✔ | ✔ | <3.0 |
```

--------------------------------

### MyViewController.h and MyViewController.m

Source: https://github.com/wonday/react-native-pdf/blob/master/FabricExample/test.pdf

Creates a UIViewController subclass that loads a React Native root view from a pre-bundled JavaScript file. The view is added with a frame offset from the top by 50 points.

```Objective-C
// MyViewController.h
#import <UIKit/UIKit.h>
#import "RCTRootView.h"
@interface MyViewController : UIViewController
@property (weak, nonatomic) NSDictionary *launchOptions;
@end
```

```Objective-C
// MyViewController.m
#import "MyViewController.h"

@implementation MyViewController
-(void)viewDidLoad
{
  [super viewDidLoad];
  NSURL *jsCodeLocation;
  jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension\
  :@"jsbundle"];

  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocatio\
  n moduleName:@"AdmobTest" launchOptions:self.launchOptions];
  rootView.frame = CGRectMake(0, 50, viewRect.size.width, viewRect.size.height\
  -50);
  [self.view addSubview:rootView];
}
@end
```

--------------------------------

### PdfManager.loadFile(path, password)

Source: https://github.com/wonday/react-native-pdf/blob/master/_autodocs/api-reference/pdfmanager.md

Loads a PDF file from the local filesystem and returns metadata needed to render its pages. Accepts an optional password for encrypted PDFs and resolves with an array containing the file number, page count, and page dimensions.

```APIDOC
## PdfManager.loadFile(path, password)

### Description
Loads a PDF file from the local filesystem and returns metadata needed to render its pages. Accepts an optional password for encrypted PDFs and resolves with an array containing the file number, page count, and page dimensions.

### Method
Static method

### Endpoint
PdfManager.loadFile(path, password)

### Parameters
#### Path Parameters
- **path** (string) - Required - Local filesystem path of the PDF file.
- **password** (string) - Optional - Password for encrypted PDFs. Defaults to "".

### Request Example
```js
import PdfManager from 'react-native-pdf/PdfManager';

const [fileNo, numberOfPages, pageWidth, pageHeight] = await PdfManager.loadFile('/path/to/document.pdf', 'secret');
```

### Response
#### Success Response
Resolves to a Promise<[number, number, number, number]> with:
- **fileNo** (number) - Index of this document in the native pdfDocRefs array.
- **numberOfPages** (number) - Total number of pages in the PDF.
- **pageWidth** (number) - Width of page 1 (crop-box based; height when rotation is 90°/270°).
- **pageHeight** (number) - Height of page 1 (width when rotation is 90°/270°).

#### Response Example
```js
const [fileNo, numberOfPages, pageWidth, pageHeight] = await PdfManager.loadFile('/path/to/document.pdf');
console.log({ fileNo, numberOfPages, pageWidth, pageHeight });
```

### Error Handling
- **TypeError('path must be a valid string.')** - Thrown synchronously if path is not a string.
- **Native rejection, RCTErrorUnspecified, message "Load pdf failed. path=<path>"** - If CGPDFDocumentCreateWithURL returns NULL (unreadable/corrupt file).
- **Native rejection, message "Load pdf failed. path=null"** - If path is nil/empty.
- **Native rejection, message "Password required or incorrect password."** - If document is encrypted and password is incorrect or missing.

### Platform Note
NativeModules.PdfManager exists only on iOS. On Android and Windows, calling PdfManager.loadFile rejects with a module-not-found error.
```

--------------------------------

### onLoadProgress(percent)

Source: https://github.com/wonday/react-native-pdf/blob/master/_autodocs/api-reference/pdf.md

Called with download progress. Provides a number between 0 and 1 representing the download progress.

```APIDOC
## onLoadProgress(percent)

### Description
Called with download progress. Provides a number between 0 and 1 representing the download progress.

### Parameters
- **percent** (number) - Required - Download progress in range 0..1.
```

--------------------------------

### PdfManager class with loadFile method

Source: https://github.com/wonday/react-native-pdf/blob/master/_autodocs/api-reference/pdfmanager.md

Exported class that wraps the native PdfManager module. The loadFile method validates the path, defaults the password to an empty string, and calls the native loadFile. Throws a TypeError synchronously if path is not a string.

```javascript
'use strict';

const PdfManagerNative = require('react-native').NativeModules.PdfManager;

export default class PdfManager {

    static loadFile(path, password) {
        if (typeof path !== 'string') {
            throw new TypeError('path must be a valid string.');
        }

        if (password === undefined) {
            password = "";
        }

        return PdfManagerNative.loadFile(path, password);
    }
}
```

--------------------------------

### Error('no pdf source!')

Source: https://github.com/wonday/react-native-pdf/blob/master/_autodocs/errors.md

Delivered through the `onError` callback when no PDF source is provided.

```APIDOC
## Error('no pdf source!')

### Description
Delivered through the `onError` callback when no PDF source is provided.

### Type
`Error`

### Channel
`onError` callback
```

--------------------------------

### renderActivityIndicator(progress)

Source: https://github.com/wonday/react-native-pdf/blob/master/_autodocs/api-reference/pdf.md

Function prop used while the PDF is not yet downloaded. Receives the current progress and returns a React element to display.

```APIDOC
## renderActivityIndicator(progress)

### Description
Function prop used while the PDF is not yet downloaded. Receives the current progress and returns a React element to display.

### Parameters
- **progress** (number) - Required - Current download progress (0..1).

### Returns
- React element - The element to render as the activity indicator. Default shows a <Text>{percent}%</Text>.
```

--------------------------------

### package.json for ReactComponent folder

Source: https://github.com/wonday/react-native-pdf/blob/master/example/android/app/src/main/assets/test.pdf

Create this package.json file under the ReactComponent folder to support require-based JavaScript module imports.

```json
{
  "name": "my project",
  "version": "1.0.0"
}
```

--------------------------------

### source object parameters

Source: https://github.com/wonday/react-native-pdf/blob/master/_autodocs/configuration.md

Configuration object passed to the react-native-pdf component's `source` prop. Each key controls how the PDF is fetched and cached.

```APIDOC
## source object parameters

### Description
Configuration object for the `source` prop of the react-native-pdf component. Controls PDF location, caching, and network request behavior.

### Parameters

| Key | Type | Required | Default | Description | iOS | Android | Windows |
|---|---|---|---|---|---|---|---|
| `uri` | `string` | yes | — | PDF location (see URI types below). | ✔ | ✔ | ✔ |
| `cache` | `boolean` | no | `false` | Keep the fetched file in cache dir; when false the file is unlinked on unmount. | ✔ | ✔ | ✖ |
| `cacheFileName` | `string` | no | `SHA1(uri) + '.pdf'` | Cache file name inside `CacheDir`. | ✔ | ✔ | ✖ |
| `expiration` | `number` | no | `0` | Cache validity in seconds; `0` = never expires. | ✔ | ✔ | ✖ |
| `method` | `string` | no | `'GET'` | HTTP method for network URIs (also used for `body`). | ✔ | ✔ | ✖ |
| `headers` | `{ [key: string]: string }` | no | `{}` | Request headers for network URIs. | ✔ | ✔ | ✖ |
| `body` | `string` | no | `""` | Request body — read by `index.js _downloadFile` (`source.body ? source.body : ""`) but **missing from `index.d.ts`**. | ✔ | ✔ | ✖ |

### Notes
- **Windows** does not use `react-native-blob-util`; it hands `uri` (e.g. `ms-appx:///test.pdf`) directly to the native `RCTPdf` view, so cache-related keys are ignored.
```

--------------------------------

### Add packagingOptions to android/app/build.gradle for RN 0.59.0 and above

Source: https://github.com/wonday/react-native-pdf/blob/master/README.md

Add the packagingOptions block with pickFirst entries for native libraries to your android/app/build.gradle. This is required for React Native 0.59.0 and above to avoid duplicate library conflicts.

```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'
+     }

   }
```
Tokens:
Raw