Some test text!

menu
Add an APIkeyboard_arrow_down

Add an API for React Native

linkIntroduction

The PDFTron Android React Native API includes all of the most used functions and methods for viewing, annotating and saving PDF documents. However, it is possible your app may need access to APIs that are available as part of the native API, but are not directly available to React Native.

This guide provides an example of how to add a "pageChangeOnTap" prop to the React Native interface, which determines whether page will turn left or right when tapping corresponding edges. You can follow the same pattern to add new props that your React Native app may need. The new props could be simple ones, which expose one piece of functionality, or custom ones, that a series of native commands under the hood.

Prior to following this guide, we highly recommend you to go through the official guide here: Native UI Components to have a better understanding of the system.

linkExample: Adding the "pageChangeOnTap" prop

link1. Fork and clone PDFTron's React Native Repo

The source is hosted on GitHub here: https://github.com/PDFTron/pdftron-react-native

Fork the project and clone a copy of the repository to your disk.

link2. Update the DocumentView.js interface file

The DocumentView.js interface file lists all of the React Native props on the DocumentView component.

Add the prop declaration:

static propTypes = {
  pageChangeOnTap: PropTypes.bool,
};

link3. Define a ReactProp matches the JS declaration

Open file /android/src/main/java/com/pdftron/reactnative/viewmanagers/DocumentViewViewManager.java.

Add the method key that matches the JS declaration:

@ReactProp(name = "pageChangeOnTap")
public void setPageChangeOnTap(DocumentView documentView, boolean pageChangeOnTap) {
    documentView.setPageChangeOnTap(pageChangeOnTap);
}

link4. Implement the new method

Open file /android/src/main/java/com/pdftron/reactnative/views/DocumentView.java.

Add the implementation:

public void setPageChangeOnTap(boolean pageChangeOnTap) {
    Context context = getContext();
    if (context != null) {
        PdfViewCtrlSettingsManager.setAllowPageChangeOnTap(context, pageChangeOnTap);
    }
}

The actual implementation will depend on the actual functionality.

link5. Push the code and integrate the updated source

Now npm install your forked version to your application.

The new prop is now ready to use.

link6. Access the new functionality

The app can now access the new API as follows:

<DocumentView
  pageChangeOnTap={false}
/>

link6. All done!

If you're only developing for Android, then you're all done!

If you're also deploying on iOS, you'll need to repeat steps 3 and 4 for iOS.

If you're developing for both iOS and Android, please consider submitting a PR, as upstreaming the change will simplify your developing and make the props available for other PDFTron customers.

Get the answers you need: Support

close

Free Trial

Get unlimited trial usage of PDFTron SDK to bring accurate, reliable, and fast document processing capabilities to any application or workflow.

Select a platform to get started with your free trial.

Unlimited usage. No email address required.