PDFTron React Native


Classes

Config
DocumentView
PDFViewCtrl
RNPdftron

Events

Annotation Menu

onAnnotationMenuPress

This function is called when an annotation menu item passed in to overrideAnnotationMenuBehavior is pressed.

Type: function
Optional.
Source: DocumentView.js line 421
Parameters:
Name Type Description
annotationMenu Config.AnnotationMenu

the menu item that has been pressed.
annotations Array<object>

An array of {id: string, pageNumber: number, type: string, screenRect: object, pageRect: object} objects.

id is the annotation identifier and type is one of the Config.Tools constants.

screenRect was formerly called rect.

Both rects are represented with {x1: number, y1: number, x2: number, y2: number, width: number, height: number} objects.
Example
<DocumentView
  onAnnotationMenuPress = {({annotationMenu, annotations}) => {
    console.log('Annotation menu item', annotationMenu, 'has been pressed');
    annotations.forEach(annotation => {
      console.log('The id of selected annotation is', annotation.id);
      console.log('The page number of selected annotation is', annotation.pageNumber);
      console.log('The type of selected annotation is', annotation.type);
      console.log('The screenRect of selected annotation is', annotation.screenRect);
      console.log('The pageRect of selected annotation is', annotation.pageRect);
    });
  }}
/>

Annotations

onAnnotationsSelected

This function is called when an annotation(s) is selected.

Type: function
Optional.
Source: DocumentView.js line 604
Parameters:
Name Type Description
annotations Array<object>

array of annotation data in the format {id: string, pageNumber: number, type: string, screenRect: {x1: number, y1: number, x2: number, y2: number, width: number, height: number}, pageRect: {x1: number, y1: number, x2: number, y2: number, width: number, height: number}}, representing the selected annotations.

type is one of the Config.Tools constants.

screenRect was formerly called rect.
Example
<DocumentView
  onAnnotationsSelected = {({annotations}) => {
    annotations.forEach(annotation => {
      console.log('The id of selected annotation is', annotation.id);
      console.log('It is in page', annotation.pageNumber);
      console.log('Its type is', annotation.type);
    });
  }}
/>

onAnnotationChanged

This function is called if a change has been made to an annotation(s) in the current document.

Note: When an annotation is flattened, it also gets deleted, so both onAnnotationChanged and onAnnotationFlattened are called.

Type: function
Optional.
Source: DocumentView.js line 636
Parameters:
Name Type Description
action string

the action that occurred (add, delete, modify)
annotations Array<object>

array of annotation data in the format {id: string, pageNumber: number, type: string}, representing the annotations that have been changed.

type is one of the Config.Tools constants
Example
<DocumentView
  onAnnotationChanged = {({action, annotations}) => {
    console.log('Annotation edit action is', action);
    annotations.forEach(annotation => {
      console.log('The id of changed annotation is', annotation.id);
      console.log('It is in page', annotation.pageNumber);
      console.log('Its type is', annotation.type);
    });
  }}
/>

onFormFieldValueChanged

This function is called if a change has been made to form field values.

Type: function
Optional.
Source: DocumentView.js line 658
Parameters:
Name Type Description
fields Array<object>

array of field data in the format {fieldName: string, fieldType: string, fieldValue: any}, representing the fields that have been changed
Example
<DocumentView
  onFormFieldValueChanged = {({fields}) => {
    fields.forEach(field => {
      console.log('The name of the changed field is', field.fieldName);
      console.log('The type of the changed field is', field.fieldType);
      console.log('The value of the changed field is', field.fieldValue);
    });
  }}
/>

onAnnotationFlattened

This function is called if an annotation(s) has been flattened in the current document.

Type: function
Optional.
Source: DocumentView.js line 685
Parameters:
Name Type Description
annotations Array<object>

array of annotation data in the format {id: string, pageNumber: number, type: string}, representing the annotations that have been changed.

type is one of the Config.Tools constants

id returned via the event listener can be null.
Example
<DocumentView
  onAnnotationFlattened={({annotations}) => {
          annotations.forEach(annotation => {
            console.log('The id of changed annotation is', annotation.id);
            console.log('It is in page', annotation.pageNumber);
            console.log('Its type is', annotation.type);
          });
        }}
/>

Bookmark

onBookmarkChanged

This function is called if a change has been made to user bookmarks.

Type: function
Optional.
Source: DocumentView.js line 1194
Parameters:
Name Type Description
bookmarkJson string

the list of current bookmarks in JSON format
Example
<DocumentView
  onBookmarkChanged = {({bookmarkJson}) => {
    console.log('Bookmarks have been changed. Current bookmark collection is', bookmarkJson);
  }}
/>

Custom Behavior

onBehaviorActivated

This function is called if the activated behavior is passed in to overrideBehavior

Type: function
Optional.
Source: DocumentView.js line 483
Parameters:
Name Type Description
action Config.Actions

the action which has been activated.
data object

A JSON object that varies depending on the action.

If action is Config.Actions.linkPress, data type is {url: string}.

If action is Config.Actions.stickyNoteShowPopUp, data type is {id: string, pageNumber: number, type: string, screenRect: {x1: number, y1: number, x2: number, y2: number, width: number, height: number}, pageRect: {x1: number, y1: number, x2: number, y2: number, width: number, height: number}}

type is one of the Config.Tools constants,

screenRect was formerly called rect.
Example
<DocumentView
  onBehaviorActivated = {({action, data}) => {
    console.log('Activated action is', action);
    if (action === Config.Actions.linkPress) {
      console.log('The external link pressed is', data.url);
    } else if (action === Config.Actions.stickyNoteShowPopUp) {
      console.log('Sticky note has been activated, but it would not show a pop up window.');
    }
  }}
/>

Import/Export Annotations

onExportAnnotationCommand

This function is called if a change has been made to annotations in the current document. Unlike onAnnotationChanged, this function has an XFDF command string as its parameter. If you are modifying or deleting multiple annotations, then on Android the function is only called once, and on iOS it is called for each annotation.

Known Issues

On iOS, there is currently a bug that prevents the last XFDF from being retrieved when modifying annotations while collaboration mode is enabled.

Type: function
Optional.
Source: DocumentView.js line 933
Parameters:
Name Type Description
action string

the action that occurred (add, delete, modify)
xfdfCommand string

an xfdf string containing info about the edit
annotations array

an array of annotation data. When collaboration is enabled data comes in the format {id: string}, otherwise the format is {id: string, pageNumber: number, type: string}. In both cases, the data represents the annotations that have been changed.

type is one of the Config.Tools constants.
Example
<DocumentView
  onExportAnnotationCommand = {({action, xfdfCommand, annotations}) => {
    console.log('Annotation edit action is', action);
    console.log('The exported xfdfCommand is', xfdfCommand);
    annotations.forEach((annotation) => {
      console.log('Annotation id is', annotation.id);
    if (!this.state.collabEnabled) {
        console.log('Annotation pageNumber is', annotation.pageNumber);
        console.log('Annotation type is', annotation.type);
      }
    });
    }}
    collabEnabled={this.state.collabEnabled}
    currentUser={'Pdftron'}
/>

Layout

onLayoutChanged

This function is called when the layout of the viewer has been changed.

Type: function
Optional.
Source: DocumentView.js line 754
Example
<DocumentView
  onLayoutChanged = {() => {
    console.log('Layout has been updated.');
  }}
/>

Long Press Menu

onLongPressMenuPress

This function is called if the pressed long press menu item is passed in to overrideLongPressMenuBehavior.

Type: function
Optional.
Source: DocumentView.js line 345
Parameters:
Name Type Description
longPressMenu Config.LongPressMenu

the menu item that has been pressed.
longPressText string

the selected text if pressed on text, empty otherwise
Example
<DocumentView
  onLongPressMenuPress = {({longPressMenu, longPressText}) => {
    console.log('Long press menu item', longPressMenu, 'has been pressed');
    if (longPressText !== '') {
      console.log('The selected text is', longPressText);
    }
  }}
/>

Multi-tab

onTabChanged

The function is activated when a tab is changed.

This API is meant for tab-specific changes. If you would like to know when the document finishes loading instead, see the onDocumentLoaded event.

Type: function
Optional.
Source: DocumentView.js line 1743
Parameters:
Name Type Description
currentTab string

The file path of current tab's document
Example
<DocumentView
  multiTabEnabled={true}
  onTabChanged={({currentTab}) => {
    console.log("The current tab is ", currentTab);
  }}
/>

Open a Document

onDocumentLoaded

This function is called when the document finishes loading.

Type: function
Optional.
Source: DocumentView.js line 173
Parameters:
Name Type
path string
Example
<DocumentView
  onDocumentLoaded = {(path) => {
    console.log('The document has finished loading:', path);
  }}
/>

onDocumentError

This function is called when document opening encounters an error.

Type: function
Optional.
Source: DocumentView.js line 189
Parameters:
Name Type
error string
Example
<DocumentView
  onDocumentError = {(error) => {
    console.log('Error occured during document opening:', error);
  }}
/>

Page

onPageChanged

This function is called when the page number has been changed.

Type: function
Optional.
Source: DocumentView.js line 206
Parameters:
Name Type Description
previousPageNumber int

the previous page number
pageNumber int

the current page number
Example
<DocumentView
  onPageChanged = {({previousPageNumber, pageNumber}) => {
    console.log('Page number changes from', previousPageNumber, 'to', pageNumber);
  }}
/>

onPageMoved

This function is called when a page has been moved in the document.

Type: function
Optional.
Source: DocumentView.js line 1722
Parameters:
Name Type Description
previousPageNumber int

the previous page number
pageNumber int

the current page number
Example
<DocumentView
  onPageMoved = {({previousPageNumber, pageNumber}) => {
    console.log('Page moved from', previousPageNumber, 'to', pageNumber);
  }}
/>

Scroll

onScrollChanged

This function is called when the scroll position has been changed.

Type: function
Optional.
Source: DocumentView.js line 224
Parameters:
Name Type Description
horizontal number

the horizontal position of the scroll
vertical number

the vertical position of the scroll
Example
<DocumentView
  onScrollChanged = {({horizontal, vertical}) => {
    console.log('Current scroll position is', horizontal,
     'horizontally, and', vertical, 'vertically.');
  }}
/>

Text Selection

onTextSearchStart

This function is called immediately before a text search begins, either through user actions, or function calls such as findText.

Type: function
Optional.
Source: DocumentView.js line 1266
Example
<DocumentView
  onTextSearchStart = {() => {
    console.log('Text search has started');
  }}
/>

onTextSearchResult

This function is called after a text search is finished or canceled.

Type: function
Optional.
Source: DocumentView.js line 1304
Parameters:
Name Type Description
found boolean

whether a result is found. If false, it could be caused by not finding a matching result in the document, invalid text input, or action cancellation (user actions or cancelFindText)
textSelection object

the text selection, in the format {html: string, unicode: string, pageNumber: number, quads: [[{x: number, y: number}, {x: number, y: number}, {x: number, y: number}, {x: number, y: number}], ...]}. If no such selection could be found, this would be null

Quads indicate the quad boundary boxes for the selection, which could have a size larger than 1 if selection spans across different lines. Each quad have 4 points with x, y coordinates specified in number, representing a boundary box. The 4 points are in counter-clockwise order, though the first point is not guaranteed to be on lower-left relatively to the box.
Example
<DocumentView
  onTextSearchResult = {({found, textSelection}) => {
    if (found) {
      console.log('Found selection on page', textSelection.pageNumber);
      for (let i = 0; i < textSelection.quads.length; i ++) {
        const quad = textSelection.quads[i];
        console.log('selection boundary quad', i);
        for (const quadPoint of quad) {
          console.log('A quad point has coordinates', quadPoint.x, quadPoint.y);
        }
      }
    }
  }}
/>

UI Customization

onLeadingNavButtonPressed

This function is called when the leading navigation button is pressed.

Type: function
Optional.
Source: DocumentView.js line 157
Example
<DocumentView
  onLeadingNavButtonPressed = {() => {
      console.log('The leading nav has been pressed');
  }}
/>

onToolChanged

This function is called when the current tool changes to a new tool

Type: function
Optional.
Source: DocumentView.js line 1226
Parameters:
Name Type Description
previousTool Config.Tools | string

the previous tool (one of the Config.Tools constants or "unknown tool"), representing the tool before change
tool Config.Tools | string

the current tool (one of the Config.Tools constants or "unknown tool"), representing the current tool
Example
<DocumentView
  onToolChanged = {({previousTool, tool}) => {
    console.log('Tool has been changed from', previousTool, 'to', tool);
  }}
/>

Undo/Redo

onUndoRedoStateChanged

This function is called when the state of the current document's undo/redo stack has been changed.

Type: function
Optional.
Source: DocumentView.js line 1477
Example
<DocumentView
  onUndoRedoStateChanged = {() => {
    console.log("Undo/redo stack state changed");
  }}
/>

Zoom

onZoomChanged

This function is called when the zoom scale has been changed.

Type: function
Optional.
Source: DocumentView.js line 240
Parameters:
Name Type Description
zoom double

the current zoom ratio of the document
Example
<DocumentView
  onZoomChanged = {(zoom) => {
    console.log('Current zoom ratio is', zoom);
  }}
/>

onZoomFinished

This function is called when a zooming has been finished. For example, if zoom via gesture, this is called on gesture release.

Type: function
Optional.
Source: DocumentView.js line 257
Parameters:
Name Type Description
zoom double

the current zoom ratio of the document
Example
<DocumentView
  onZoomFinished = {(zoom) => {
    console.log('Current zoom ratio is', zoom);
  }}
/>