PDFTron React Native

DocumentView

An all-in-one React component for displaying and editing documents of different types such as PDF, docx, pptx, xlsx and various image formats.

Due to the length of the source file, we have included links to the exact lines of the source code where these APIs have been implemented.

Source: DocumentView.js line 1822

Members

Annotation Menu

annotationMenuItems

Defines the menu items that can show when an annotation is selected.

Type: Array<Config.AnnotationMenu>
Optional.
Default Value: Contains all the items.
Source: DocumentView.js line 372
Example
<DocumentView
  annotationMenuItems={[Config.AnnotationMenu.search, Config.AnnotationMenu.share]}
/>

overrideAnnotationMenuBehavior

Defines the menu items that will skip default behavior when pressed. They will still be displayed in the annotation menu, and the function onAnnotationMenuPress will be called where custom behavior can be implemented.

Type: Array<Config.AnnotationMenu>
Optional.
Default Value: Defaults to none.
Source: DocumentView.js line 388
Example
<DocumentView
  overrideAnnotationMenuBehavior={[Config.AnnotationMenu.copy]}
/>

hideAnnotationMenu

Defines annotation types that will not show in the annotation (long-press) menu.

Type: Array<Config.Tools>
Optional.
Default Value: Defaults to none.
Source: DocumentView.js line 434
Example
<DocumentView
  hideAnnotationMenu={[Config.Tools.annotationCreateArrow, Config.Tools.annotationEraserTool]}
/>

Annotations

continuousAnnotationEditing

If true, the active annotation creation tool will remain in the current annotation creation tool. Otherwise, it will revert to the "pan tool" after an annotation is created.

Type: boolean
Optional.
Default Value: true
Source: DocumentView.js line 783
Example
<DocumentView
  continuousAnnotationEditing={true}
/>

selectAnnotationAfterCreation

Defines whether an annotation is selected after it is created. On iOS, this functions for shape and text markup annotations only.

Type: boolean
Optional.
Default Value: true
Source: DocumentView.js line 797
Example
<DocumentView
  selectAnnotationAfterCreation={true}
/>

annotationAuthor

Defines the author name for all annotations created on the current document. Exported xfdfCommand will include this piece of information.

Type: string
Optional.
Source: DocumentView.js line 810
Example
<DocumentView
  annotationAuthor={'PDFTron'}
/>

annotationPermissionCheckEnabled

Defines whether an annotation's permission flags will be respected when it is selected. For example, a locked annotation can not be resized or moved.

Type: boolean
Optional.
Default Value: false
Source: DocumentView.js line 1061
Example
<DocumentView
  annotationPermissionCheckEnabled={true}
/>

annotationsListEditingEnabled

Android only

If document editing is enabled, then this value determines if the annotation list is editable.

Type: boolean
Optional.
Default Value: true
Source: DocumentView.js line 1392
Example
<DocumentView
  annotationsListEditingEnabled={true}
/>

inkMultiStrokeEnabled

If true, ink tool will use multi-stroke mode. Otherwise, each stroke is a new ink annotation.

Type: boolean
Optional.
Default Value: true
Source: DocumentView.js line 1524
Example
<DocumentView
  inkMultiStrokeEnabled={true}
/>

disableEditingByAnnotationType

Defines annotation types that cannot be edited after creation.

Type: Array<Config.Tools>
Optional.
Default Value: Defaults to none.
Source: DocumentView.js line 1587
Example
<DocumentView
  disableEditingByAnnotationType={[Config.Tools.annotationCreateTextSquiggly,
    Config.Tools.annotationCreateEllipse]}
/>

excludedAnnotationListTypes

Defines types to be excluded from the annotation list.

Type: Array<Config.Tools>
Optional.
Default Value: Defaults to none.
Source: DocumentView.js line 1646
Example
<DocumentView
  excludedAnnotationListTypes={[Config.Tools.annotationCreateEllipse,
    Config.Tools.annotationCreateRectangle,
    Config.Tools.annotationCreateRedaction]}
/>

Bookmark

userBookmarksListEditingEnabled

Defines whether the bookmark list can be edited. If the viewer is readonly then bookmarks on Android are still editable but are saved to the device rather than the PDF.

Type: boolean
Optional.
Default Value: true
Source: DocumentView.js line 1433
Example
<DocumentView
  userBookmarksListEditingEnabled={true}
/>

Collaboration

collabEnabled

Defines whether to enable realtime collaboration. If true then currentUser must be set as well for collaboration mode to work. Feature set may vary between local and collaboration mode.

Type: boolean
Optional.
Default Value: false
Source: DocumentView.js line 858
Example
<DocumentView
  collabEnabled={true}
  currentUser={'Pdftron'}
/>

currentUser

Required if collabEnabled is set to true.

Defines the current user. Created annotations will have their title (author) set to this string.

Type: string
Source: DocumentView.js line 873
Example
<DocumentView
  collabEnabled={true}
  currentUser={'Pdftron'}
/>

currentUserName

Defines the current user name. Will set the user name only if collabEnabled is true and currentUser is defined. This should be used only if you want the user's display name to be different than the annotation's title/author (in the case that currentUser is an ID rather than a human-friendly name.)

Type: string
Optional.
Source: DocumentView.js line 892
Example
<DocumentView
  collabEnabled={true}
  currentUser={'Pdftron'}
  currentUserName={'Hello_World'}
/>

replyReviewStateEnabled

Android only.

Defines whether to show an annotation's reply review state.

Type: boolean
Optional.
Default Value: true
Source: DocumentView.js line 1663
Example
<DocumentView
  collabEnabled={true}
  currentUser={'Pdftron'}
  replyReviewStateEnabled={true}
/>

annotationManagerEditMode

Sets annotation manager edit mode when collabEnabled is true.

Mode Description
Config.AnnotationManagerEditMode.Own In this mode, you can edit only your own changes
Config.AnnotationManagerEditMode.All In this mode, you can edit everyone's changes
Type: Config.AnnotationManagerEditMode
Optional.
Default Value: Config.AnnotationManagerEditMode.Own
Source: DocumentView.js line 1684
Example
<DocumentView
  collabEnabled={true}
  currentUser={'Pdftron'}
  annotationManagerEditMode={Config.AnnotationManagerEditMode.Own}
/>

annotationManagerUndoMode

Sets annotation manager undo mode when collabEnabled is true.

Mode Description
Config.AnnotationManagerUndoMode.Own In this mode, you can undo only your own changes
Config.AnnotationManagerUndoMode.All In this mode, you can undo everyone's changes
Type: Config.AnnotationManagerUndoMode
Optional.
Default Value: Config.AnnotationManagerUndoMode.Own
Source: DocumentView.js line 1705
Example
<DocumentView
  collabEnabled={true}
  currentUser={'Pdftron'}
  annotationManagerUndoMode={Config.AnnotationManagerUndoMode.Own}
/>

Custom Behavior

overrideBehavior

Defines actions that will skip default behavior, such as external link click. The function onBehaviorActivated will be called where custom behavior can be implemented, whenever the defined actions occur.

Type: Array<Config.Actions>
Optional.
Default Value: Defaults to none.
Source: DocumentView.js line 449
Example
<DocumentView
  overrideBehavior={[Config.Actions.linkPress]}
/>

Layout

fitMode

Defines the fit mode (default zoom level) of the viewer.

Type: Config.FitMode
Optional.
Default Value: Config.FitMode.FitWidth
Source: DocumentView.js line 726
Example
<DocumentView
  fitMode={Config.FitMode.FitPage}
/>

layoutMode

Defines the layout mode of the viewer.

Type: Config.LayoutMode
Optional.
Default Value: Config.LayoutMode.Continuous
Source: DocumentView.js line 739
Example
<DocumentView
  layoutMode={Config.LayoutMode.FacingContinuous}
/>

Long Press Menu

longPressMenuItems

Defines menu items that can show when long press on text or blank space.

Type: Array<Config.LongPressMenu>
Optional.
Default Value: Contains all the items.
Source: DocumentView.js line 308
Example
<DocumentView
  longPressMenuItems={[Config.LongPressMenu.copy, Config.LongPressMenu.read]}
/>

overrideLongPressMenuBehavior

Defines the menu items on long press that will skip default behavior when pressed. They will still be displayed in the long press menu, and the function onLongPressMenuPress will be called where custom behavior can be implemented.

Type: Array<Config.LongPressMenu>
Optional.
Default Value: Defaults to none.
Source: DocumentView.js line 324
Example
<DocumentView
  overrideLongPressMenuBehavior={[Config.LongPressMenu.search]}
/>

longPressMenuEnabled

Defines whether to show the popup menu of options when the user long presses on text or blank space on the document.

Type: boolean
Optional.
Default Value: true
Source: DocumentView.js line 359
Example
<DocumentView
  longPressMenuEnabled={true}
/>

Multi-tab

multiTabEnabled

Defines whether viewer will use tabs in order to have more than one document open simultaneously (like a web browser). Changing the document prop value will cause a new tab to be opened with the associated file.

Type: boolean
Optional.
Default Value: false
Source: DocumentView.js line 1003
Example
<DocumentView
  multiTabEnabled={true}
/>

tabTitle

Set the tab title if multiTabEnabled is true.

Type: string
Optional.
Default Value: the file name
Source: DocumentView.js line 1017
Example
<DocumentView
  multiTabEnabled={true}
  tabTitle={'tab1'}
/>

maxTabCount

Sets the limit on the maximum number of tabs that the viewer could have at a time. Open more documents after reaching this limit will overwrite the old tabs.

Type: number
Optional.
Default Value: unlimited
Source: DocumentView.js line 1032
Example
<DocumentView
  multiTabEnabled={true}
  maxTabCount={5}
/>

Navigation

pageStackEnabled

Android only.

Defines whether the page stack navigation buttons will appear in the viewer.

Type: boolean
Optional.
Default Value: true
Source: DocumentView.js line 1336
Example
<DocumentView
  pageStackEnabled={false}
/>

showQuickNavigationButton

Defines whether the quick navigation buttons will appear in the viewer.

Type: boolean
Optional.
Default Value: true
Source: DocumentView.js line 1349
Example
<DocumentView
  showQuickNavigationButton={false}
/>

showNavigationListAsSidePanelOnLargeDevices

Defines whether the navigation list will be displayed as a side panel on large devices such as iPads and tablets.

Type: boolean
Optional.
Default Value: true on Android and false on iOS
Source: DocumentView.js line 1406
Example
<DocumentView
  showNavigationListAsSidePanelOnLargeDevices={true}
/>

Open a Document

document

The path or url to the document. Required.

Type: string
Source: DocumentView.js line 31
Example
<DocumentView
  document={'https://pdftron.s3.amazonaws.com/downloads/pl/PDFTRON_about.pdf'}
/>

password

The password of the document, if any.

Type: string
Optional.
Source: DocumentView.js line 43
Example
<DocumentView
  password={'password'}
/>

customHeaders

Defines custom headers to use with HTTP/HTTPS requests.

Type: object
Optional.
Source: DocumentView.js line 82
Example
<DocumentView
  customHeaders={{headerKey: 'headerValue'}}
/>

readOnly

Defines whether the viewer is read-only. If true, the UI will not allow the user to change the document.

Type: boolean
Optional.
Default Value: false
Source: DocumentView.js line 699
Example
<DocumentView
  readOnly={true}
/>

isBase64String

If true, document prop will be treated as a base64 string. If it is not the base64 string of a pdf file, base64FileExtension is required.

When viewing a document initialized with a base64 string (i.e. a memory buffer), a temporary file is created on Android and iOS.

Type: boolean
Optional.
Default Value: false
Source: DocumentView.js line 842
Example
<DocumentView
  isBase64String={true}
  document={'...'} // base 64 string
/>

defaultEraserType

Sets the default eraser tool type. Value only applied after a clean install.

Eraser Type Description
annotationEraser Erases everything as an object; if you touch ink,

the entire object is erased. hybrideEraser | Erases ink by pixel, but erases other annotation types as objects. inkEraser | Erases ink by pixel only. Android only.

Type: Config.EraserType
Optional.
Source: DocumentView.js line 1543
Example
<DocumentView
  defaultEraserType={Config.EraserType.hybrideEraser}
/>

exportPath

Android only.

Sets the folder path for all save options, this defaults to the app cache path. Example:

Type: string
Optional.
Source: DocumentView.js line 1558
Example
<DocumentView
  exportPath="/data/data/com.example/cache/test"
/>

openUrlPath

Android only.

Sets the cache folder used to cache PDF files opened using a http/https link, this defaults to the app cache path.

Type: string
Optional.
Source: DocumentView.js line 1573
Example
<DocumentView
  openUrlPath="/data/data/com.example/cache/test"
/>

saveStateEnabled

Sets whether to remember the last visited page and zoom for a document if it gets opened again.

Type: boolean
Optional.
Default Value: true
Source: DocumentView.js line 1616
Example
<DocumentView
  saveStateEnabled={false}
/>

openSavedCopyInNewTab

Android only.

Sets whether the new saved file should open after saving.

Type: boolean
Optional.
Default Value: true
Source: DocumentView.js line 1631
Example
<DocumentView
  openSavedCopyInNewTab={false}
/>

Other

autoSaveEnabled

Defines whether document is automatically saved by the viewer.

Type: boolean
Optional.
Default Value: true
Source: DocumentView.js line 945
Example
<DocumentView
  autoSaveEnabled={true}
/>

followSystemDarkMode

Android and iOS 13+ only

Defines whether the UI will appear in a dark color when the system is dark mode. If false, it will use viewer setting instead.

Type: boolean
Optional.
Default Value: true
Source: DocumentView.js line 974
Example
<DocumentView
  followSystemDarkMode={false}
/>

useStylusAsPen

Defines whether a stylus should act as a pen when in pan mode. If false, it will act as a finger.

Type: boolean
Optional.
Default Value: true
Source: DocumentView.js line 987
Example
<DocumentView
  useStylusAsPen={true}
/>

autoResizeFreeTextEnabled

Defines whether to automatically resize the bounding box of free text annotations when editing.

Type: boolean
Optional.
Default Value: false
Source: DocumentView.js line 1377
Example
<DocumentView
  autoResizeFreeTextEnabled={true}
/>

restrictDownloadUsage

Defines whether to restrict data usage when viewing online PDFs.

Type: boolean
Optional.
Default Value: false
Source: DocumentView.js line 1418
Example
<DocumentView
  restrictDownloadUsage={true}
/>

Page

initialPageNumber

Defines the initial page number that viewer displays when the document is opened. Note that page numbers are 1-indexed.

Type: number
Optional.
Source: DocumentView.js line 56
Example
<DocumentView
  initialPageNumber={5}
/>

pageNumber

Defines the currently displayed page number. Different from initialPageNumber, changing this prop value at runtime will change the page accordingly.

Type: number
Optional.
Source: DocumentView.js line 70
Example
<DocumentView
  pageNumber={5}
/>

pageIndicatorEnabled

Defines whether to show the page indicator for the viewer.

Type: boolean
Optional.
Default Value: true
Source: DocumentView.js line 546
Example
<DocumentView
  pageIndicatorEnabled={true}
/>

keyboardShortcutsEnabled

iOS only

Defines whether the keyboard shortcuts of the viewer are enabled.

Type: boolean
Optional.
Default Value: true
Source: DocumentView.js line 576
Example
<DocumentView
  keyboardShortcutsEnabled={false}
/>

pageChangeOnTap

Defines whether the viewer should change pages when the user taps the edge of a page, when the viewer is in a horizontal viewing mode.

Type: boolean
Optional.
Default Value: true
Source: DocumentView.js line 959
Example
<DocumentView
  pageChangeOnTap={true}
/>

Reflow

imageInReflowEnabled

Whether to show images in reflow mode.

Type: boolean
Optional.
Default Value: true
Source: DocumentView.js line 1446
Example
<DocumentView
  imageInReflowEnabled={false}
/>

reflowOrientation

Android only.

Sets the scrolling direction of the reflow control.

Type: Config.ReflowOrientation
Optional.
Default Value: Config.ReflowOrientation.Horizontal
Source: DocumentView.js line 1461
Example
<DocumentView
  reflowOrientation={Config.ReflowOrientation.Vertical}
/>

Scroll

horizontalScrollPos

Defines the horizontal scroll position in the current document viewer.

Type: number
Optional.
Source: DocumentView.js line 1238
Example
<DocumentView
  horizontalScrollPos={50}
/>

verticalScrollPos

Defines the vertical scroll position in the current document viewer.

Type: number
Optional.
Source: DocumentView.js line 1250
Example
<DocumentView
  verticalScrollPos={50}
/>

hideScrollbars

iOS only.

Determines whether scrollbars will be hidden on the viewer.

Type: boolean
Optional.
Default Value: false
Source: DocumentView.js line 1602
Example
<DocumentView
  hideScrollbars={true}
/>

Signature

showSavedSignatures

Defines whether to show saved signatures for re-use when using the signing tool.

Type: boolean
Optional.
Default Value: true
Source: DocumentView.js line 823
Example
<DocumentView
  showSavedSignatures={true}
/>

signSignatureFieldsWithStamps

Defines whether signature fields will be signed with image stamps. This is useful if you are saving XFDF to remote source.

Type: boolean
Optional.
Default Value: false
Source: DocumentView.js line 1047
Example
<DocumentView
  signSignatureFieldsWithStamps={true}
/>

photoPickerEnabled

Android only.

Defines whether to show the option to pick images in the signature dialog.

Type: boolean
Optional.
Default Value: true.
Source: DocumentView.js line 1364
Example
<DocumentView
  photoPickerEnabled={true}
/>

Thumbnails

thumbnailViewEditingEnabled

Defines whether user can modify the document using the thumbnail view (eg add/remove/rotate pages).

Type: boolean
Optional.
Default Value: true
Source: DocumentView.js line 713
Example
<DocumentView
  thumbnailViewEditingEnabled={true}
/>

hideThumbnailFilterModes

Defines filter modes that should be hidden in the thumbnails browser.

Type: Array<Config.ThumbnailFilterMode>
Optional.
Source: DocumentView.js line 1206
Example
<DocumentView
  hideThumbnailFilterModes={[Config.ThumbnailFilterMode.Annotated]}
/>

Toolbar Customization

topToolbarEnabled

Type: boolean
Deprecated: Use the hideTopAppNavBar prop instead.
Optional.
Default Value: true
Source: DocumentView.js line 492

bottomToolbarEnabled

Defines whether the bottom toolbar of the viewer is enabled.

Type: boolean
Optional.
Default Value: true
Source: DocumentView.js line 505
Example
<DocumentView
  bottomToolbarEnabled={false}
/>

hideToolbarsOnTap

Defines whether an unhandled tap in the viewer should toggle the visibility of the top and bottom toolbars. When false, the top and bottom toolbar visibility will not be toggled and the page content will fit between the bars, if any.

Type: boolean
Optional.
Default Value: true
Source: DocumentView.js line 520
Example
<DocumentView
  hideToolbarsOnTap={false}
/>

padStatusBar

Android only

Defines whether the viewer will add padding to take account of the system status bar.

Type: boolean
Optional.
Default Value: false
Source: DocumentView.js line 769
Example
<DocumentView
  padStatusBar={true}
/>

annotationToolbars

Type can be array of Config.DefaultToolbars constants or custom toolbar objects.

Defines custom toolbars. If passed in, the default toolbars will no longer appear. It is possible to mix and match with default toolbars. See example below.

Type: Array<Config.DefaultToolbars> | object
Optional.
Default Value: Defaults to none.
Source: DocumentView.js line 1085
Example
const myToolbar = {
  [Config.CustomToolbarKey.Id]: 'myToolbar',
  [Config.CustomToolbarKey.Name]: 'myToolbar',
  [Config.CustomToolbarKey.Icon]: Config.ToolbarIcons.FillAndSign,
  [Config.CustomToolbarKey.Items]: [Config.Tools.annotationCreateArrow,
     Config.Tools.annotationCreateCallout, Config.Buttons.undo]
};
...
<DocumentView
  annotationToolbars={[Config.DefaultToolbars.Annotate, myToolbar]}
/>

hideDefaultAnnotationToolbars

Defines which default annotation toolbars should be hidden. Note that this prop should be used when annotationToolbars is not defined.

Type: Array<Config.DefaultToolbars>
Optional.
Default Value: Defaults to none.
Source: DocumentView.js line 1109
Example
<DocumentView
  hideDefaultAnnotationToolbars={[Config.DefaultToolbars.Annotate,
    Config.DefaultToolbars.Favorite]}
/>

topAppNavBarRightBar

iOS only

Customizes the right bar section of the top app nav bar. If passed in, the default right bar section will not be used.

Type: Array<Config.Buttons>
Optional.
Source: DocumentView.js line 1124
Example
<DocumentView
  topAppNavBarRightBar={[Config.Buttons.reflowButton, Config.Buttons.outlineListButton]}
/>

bottomToolbar

Only the outline list, thumbnail list, share, view mode, search, and reflow buttons are supported on Android.

Defines a custom bottom toolbar. If passed in, the default bottom toolbar will not be used.

Type: Array<Config.Buttons>
Optional.
Source: DocumentView.js line 1139
Example
<DocumentView
  bottomToolbar={[Config.Buttons.reflowButton, Config.Buttons.outlineListButton]}
/>

hideAnnotationToolbarSwitcher

Defines whether to show the toolbar switcher in the top toolbar.

Type: boolean
Optional.
Default Value: false
Source: DocumentView.js line 1152
Example
<DocumentView
  hideAnnotationToolbarSwitcher={false}
/>

hideTopToolbars

Defines whether to hide both the top app nav bar and the annotation toolbar.

Type: boolean
Optional.
Default Value: false
Source: DocumentView.js line 1165
Example
<DocumentView
  hideTopToolbars={false}
/>

hideTopAppNavBar

Defines whether to hide the top navigation app bar.

Type: boolean
Optional.
Default Value: false
Source: DocumentView.js line 1178
Example
<DocumentView
  hideTopAppNavBar={true}
/>

initialToolbar

Type can be one of the Config.DefaultToolbars constants or the id of a custom toolbar object.

Defines which annotationToolbar should be selected when the document is opened.

Type: Config.DefaultToolbars | string
Optional.
Default Value: Defaults to none.
Source: DocumentView.js line 1510
Example
<DocumentView
  initialToolbar={Config.DefaultToolbars.Draw}
/>

UI Customization

leadingNavButtonIcon

The file name of the icon to be used for the leading navigation button. The button will use the specified icon if it is valid, and the default icon otherwise.

Note: to add the image file to your application, please follow the steps below:

Android
  1. Add the image resource to the drawable directory in example/android/app/src/main/res. For details about supported file types and potential compression, check out here.
demo-android

2. Now you can use the image in the viewer. For example, if you add `button_close.png` to drawable, you could use `'button_close'` in leadingNavButtonIcon.
iOS
  1. After pods has been installed, open the .xcworkspace file for this application in Xcode (in this case, it's example.xcworkspace), and navigate through the list below. This would allow you to add resources, in this case, an image, to your project.
  • "Project navigator"
  • "example" (or the app name)
  • "Build Phases"
  • "Copy Bundle Resources"
  • "+".
demo-ios

2. Now you can use the image in the viewer. For example, if you add `button_open.png` to the bundle, you could use `'button_open.png'` in leadingNavButtonIcon.
Type: string
Optional.
Source: DocumentView.js line 129
Example
let iosNav = 'ic_close_black_24px.png';
let androidNav = 'ic_arrow_back_white_24dp';
<DocumentView
  leadingNavButtonIcon={Platform.OS === 'ios' ? iosNav : androidNav}
/>

showLeadingNavButton

Defines whether to show the leading navigation button.

Type: boolean
Optional.
Default Value: true
Source: DocumentView.js line 142
Example
<DocumentView
  showLeadingNavButton={true}
/>

disabledElements

Defines buttons to be disabled for the viewer.

Type: Array<Config.Buttons>
Optional.
Default Value: Defaults to none.
Source: DocumentView.js line 282
Example
<DocumentView
  disabledElements={[Config.Buttons.userBookmarkListButton]}
/>

disabledTools

Defines tools to be disabled for the viewer.

Type: Array<Config.Tools>
Optional.
Default Value: Defaults to none.
Source: DocumentView.js line 295
Example
<DocumentView
  disabledTools={[Config.Tools.annotationCreateLine, Config.Tools.annotationCreateRectangle]}
/>

documentSliderEnabled

Defines whether the document slider of the viewer is enabled.

Type: boolean
Optional.
Default Value: true
Source: DocumentView.js line 533
Example
<DocumentView
  documentSliderEnabled={false}
/>

downloadDialogEnabled

Android only.

Defines whether the download dialog should be shown.

Type: boolean
Optional.
Default Value: true
Source: DocumentView.js line 561
Example
<DocumentView
   downloadDialogEnabled={true}
/>

hideViewModeItems

Defines view mode items to be hidden in the view mode dialog.

Type: Array<Config.ViewModePickerItem>
Optional.
Default Value: Defaults to none.
Source: DocumentView.js line 1321
Example
<DocumentView
  hideViewModeItems={[
    Config.ViewModePickerItem.Crop,
    Config.ViewModePickerItem.Rotation,
    Config.ViewModePickerItem.ColorMode
  ]}
/>

tabletLayoutEnabled

Android only.

Defines whether the tablet layout should be used on tablets. Otherwise uses the same layout as phones.

Type: boolean
Optional.
Default Value: true
Source: DocumentView.js line 1493
Example
<DocumentView
  tabletLayoutEnabled={true}
/>

rememberLastUsedTool

Android only.

Defines whether the last tool used in the current viewer session will be the tool selected upon starting a new viewer session.

Type: boolean
Optional.
Default Value: true
Source: DocumentView.js line 1759
Example
<DocumentView
  rememberLastUsedTool={true}
/>

Zoom

zoom

Zoom factor used to display the page content.

Type: number
Optional.
Source: DocumentView.js line 269
Example
<DocumentView
  zoom={1}
/>

Methods

Annotation Tools

setToolMode

Sets the current tool mode.

Source: DocumentView.js line 2026
Parameters:
Name Type Description
toolMode Config.Tools

the tool mode to set.
Returns:
Type
Promise<void>
Example
this._viewer.setToolMode(Config.Tools.annotationCreateFreeHand).then(() => {
  // done switching tools
});

commitTool

Commits the current tool, only available for multi-stroke ink and poly-shape.

Source: DocumentView.js line 2044
Returns:
Name Type Description
committed Promise<(void|boolean)> true if either ink or poly-shape tool is committed, false otherwise
Example
this._viewer.commitTool().then((committed) => {
  // committed: true if either ink or poly-shape tool is committed, false otherwise
});

Annotations

flattenAnnotations

Flattens the forms and (optionally) annotations in the current document.

Source: DocumentView.js line 2189
Parameters:
Name Type Description
formsOnly boolean

Defines whether only forms are flattened. If false, all annotations will be flattened.
Returns:
Type
Promise<void>
Example
// flatten forms and annotations in the current document.
this._viewer.flattenAnnotations(false);

deleteAnnotations

Deletes the specified annotations in the current document.

Source: DocumentView.js line 2216
Parameters:
Name Type Description
annotations Array<object>

Defines which annotation to be deleted. Each element is in the format {id: string, pageNumber: int}
Returns:
Type
Promise<void>
Example
// delete annotations in the current document.
this._viewer.deleteAnnotations([
    {
        id: 'annotId1',
        pageNumber: 1,
    },
    {
        id: 'annotId2',
        pageNumber: 2,
    }
]);

setFlagForFields

Sets a field flag value on one or more form fields.

Source: DocumentView.js line 2255
Parameters:
Name Type Description
fields Array<string>

list of field names for which the flag should be set
flag Config.FieldFlags

flag to be set
value boolean

value to set for flag
Returns:
Type
Promise<void>
Example
this._viewer.setFlagForFields(['First Name', 'Last Name'], Config.FieldFlags.ReadOnly, true);

getField

Get type and value information of a field using its name.

Source: DocumentView.js line 2281
Parameters:
Name Type Description
fieldName string

name of the field
Returns:
Name Type Description
field Promise<(void|object)> an object with information keys: fieldName, fieldValue (undefined for fields with no values) and fieldType(one of button, checkbox, radio, text, choice, signature and unknown), or undefined if such field does not exist
Example
this._viewer.getField('someFieldName').then((field) => {
  if (field !== undefined) {
    console.log('field name:', field.fieldName);
    console.log('field value:', field.fieldValue);
    console.log('field type:', field.fieldType);
  }
});

openAnnotationList

Displays the annotation tab of the existing list container. If this tab has been disabled, the method does nothing.

Source: DocumentView.js line 2297
Returns:
Type
Promise<void>
Example
this._viewer.openAnnotationList();

setValuesForFields

Sets field values on one or more form fields.

Note: the old function setValueForFields is deprecated. Please use this one instead.

Source: DocumentView.js line 2331
Parameters:
Name Type Description
fieldsMap object

map of field names and values which should be set
Returns:
Type
Promise<void>
Example
this._viewer.setValuesForFields({
  'textField1': 'Test',
  'textField2': 1234,
  'checkboxField1': true,
  'checkboxField2': false,
  'radioButton1': 'Yes',
  'radioButton2': 'No'
});

setFlagsForAnnotations

Sets flags for specified annotations in the current document. The flagValue controls whether a flag will be set to or removed from the annotation.

Note: the old function setFlagForAnnotations is deprecated. Please use this one.

Source: DocumentView.js line 2396
Parameters:
Name Type Description
annotationFlagList Array<object>

A list of annotation flag operations. Each element is in the format {id: string, pageNumber: int, flag: One of Config.AnnotationFlags constants, flagValue: boolean}
Returns:
Type
Promise<void>
Example
//  Set flag for annotations in the current document.
this._viewer.setFlagsForAnnotations([
    {
        id: 'annotId1',
        pageNumber: 1,
        flag: Config.AnnotationFlags.noView,
        flagValue: true
    },
    {
        id: 'annotId2',
        pageNumber: 5,
        flag: Config.AnnotationFlags.lockedContents,
        flagValue: false
    }
]);

selectAnnotation

Selects the specified annotation in the current document.

Source: DocumentView.js line 2415
Parameters:
Name Type Description
id string

the id of the target annotation
pageNumber integer

the page number where the targe annotation is located. It is 1-indexed.
Returns:
Type
Promise<void>
Example
// select annotation in the current document.
this._viewer.selectAnnotation('annotId1', 1);

setPropertiesForAnnotation

Sets properties for specified annotation in the current document, if it is valid.

Note: the old function setPropertyForAnnotation is deprecated. Please use this one.

Source: DocumentView.js line 2480
Parameters:
Name Type Description
annotationId string

the unique id of the annotation
pageNumber integer

the page number where annotation is located. It is 1-indexed
propertyMap object

an object containing properties to be set. Available properties are listed below.

Properties in propertyMap:

Name Type Markup exclusive Example
rect object no {x1: 1, y1: 2, x2: 3, y2: 4}
contents string no "contents"
subject string yes "subject"
title string yes "title"
contentRect object yes {x1: 1, y1: 2, x2: 3, y2: 4}
customData object no {key: value}
strokeColor object no {red: 255, green: 0, blue: 0}
Returns:
Type
Promise<void>
Example
// Set properties for annotation in the current document.
this._viewer.setPropertiesForAnnotation('Pdftron', 1, {
  rect: {
    x1: 1.1,    // left
    y1: 3,      // bottom
    x2: 100.9,  // right
    y2: 99.8    // top
  },
  contents: 'Hello World',
  subject: 'Sample',
  title: 'set-prop-for-annot',
  customData: {
    key1: 'value1',
    key2: 'value2',
    key3: 'value3'
  },
  strokeColor: {
    "red": 255,
    "green": 0,
    "blue": 0
  }
});

getPropertiesForAnnotation

Gets properties for specified annotation in the current document, if it is valid.

Source: DocumentView.js line 2512
Parameters:
Name Type Description
annotationId string

the unique id of the annotation
pageNumber integer

the page number where annotation is located. It is 1-indexed
Returns:
Name Type Description
propertyMap Promise<(void|object)> the non-null properties of the annotation

Name Type Markup exclusive Example
rect object no {x1: 1, y1: 1, x2: 2, y2: 2, width: 1, height: 1}
contents string no "Contents"
subject string yes "Subject"
title string yes "Title"
contentRect object yes {x1: 1, y1: 1, x2: 2, y2: 2, width: 1, height: 1}
strokeColor object no {red: 255, green: 0, blue: 0}
Example
// Get properties for annotation in the current document.
this._viewer.getPropertiesForAnnotation('Pdftron', 1).then((properties) => {
  if (properties) {
    console.log('Properties for annotation: ', properties);
  }
})

setDrawAnnotations

Sets whether all annotations and forms should be rendered. This method affects the viewer and does not change the document.

Unlike setVisibilityForAnnotation, this method is used to show and hide all annotations and forms in the viewer.

Source: DocumentView.js line 2532
Parameters:
Name Type Description
drawAnnotations boolean

whether all annotations and forms should be rendered
Returns:
Type
Promise<void>
Example
this._viewer.setDrawAnnotations(false);

setVisibilityForAnnotation

Sets visibility for specified annotation in the current document, if it is valid. Note that if drawAnnotations is set to false in the viewer, this function would not render the annotation even if visibility is true.

Source: DocumentView.js line 2554
Parameters:
Name Type Description
annotationId string

the unique id of the annotation
pageNumber integer

the page number where annotation is located. It is 1-indexed
visibility boolean

whether the annotation should be visible
Returns:
Type
Promise<void>
Example
this._viewer.setVisibilityForAnnotation('Pdftron', 1, true);

setHighlightFields

Enables or disables highlighting form fields. It is disabled by default.

Source: DocumentView.js line 2569
Parameters:
Name Type Description
highlightFields boolean

whether form fields should be highlighted
Example
this._viewer.setHighlightFields(true);

getAnnotationAtPoint

Gets an annotation at the (x, y) position in screen coordinates, if any.

Source: DocumentView.js line 2603
Parameters:
Name Type Description
x integer

the x-coordinate of the point
y integer

the y-coordinate of the point
distanceThreshold double

maximum distance from the point (x, y) to the annotation for it to be considered a hit (in dp)
minimumLineWeight double

For very thin lines, it is almost impossible to hit the actual line. This specifies a minimum line thickness (in screen coordinates) for the purpose of calculating whether a point is inside the annotation or not (in dp)
Returns:
Name Type Description
annotation Promise<(void|object)> the annotation found in the format of {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
this._viewer.getAnnotationAtPoint(167, 287, 100, 10).then((annotation) => {
  if (annotation) {
    console.log('Annotation found at point (167, 287) has id:', annotation.id);
  }
})

getAnnotationListAt

Gets the list of annotations at a given line in screen coordinates. Note that this is not an area selection. It should be used similar to getAnnotationAtPoint, except that this should be used when you want to get multiple annotations which are overlaying with each other.

Source: DocumentView.js line 2636
Parameters:
Name Type Description
x1 integer

x-coordinate of an endpoint on the line
y1 integer

y-coordinate of an endpoint on the line
x2 integer

x-coordinate of the other endpoint on the line, usually used as a threshold
y2 integer

y-coordinate of the other endpoint on the line, usually used as a threshold
Returns:
Name Type Description
annotations Promise<(void|Array<object>)> list of annotations at the target line, each in the format of {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
this._viewer.getAnnotationListAt(0, 0, 200, 200).then((annotations) => {
  for (const annotation of annotations) {
    console.log('Annotation found at line has id:', annotation.id);
  }
})

getAnnotationsOnPage

Gets the list of annotations on a given page.

Source: DocumentView.js line 2663
Parameters:
Name Type Description
pageNumber integer

the page number where annotations are located. It is 1-indexed
Returns:
Name Type Description
annotations Promise<(void|Array<object>)> list of annotations on the target page, each in the format of {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
this._viewer.getAnnotationsOnPage(2).then((annotations) => {
  for (const annotation of annotations) {
    console.log('Annotation found on page 2 has id:', annotation.id);
  }
})

getCustomDataForAnnotation

Gets an annotation's customData property.

Source: DocumentView.js line 2690
Parameters:
Name Type Description
annotationId string

the unique id of the annotation
pageNumber integer

the page number where annotation is located. It is 1-indexed
key string

the unique key associated with the customData property
Returns:
Name Type Description
value Promise<(void|string)> the customData property associated with the given key
Example
this._viewer.setPropertiesForAnnotation("annotation1", 2, {
  customData: {
    data: "Nice annotation"
  }
}).then(() => {
  this._viewer.getCustomDataForAnnotation("annotation1", 2, "data").then((value) => {
    console.log(value === "Nice annotation");
  })
})

Bookmark

importBookmarkJson

Imports user bookmarks into the document. The input needs to be a valid bookmark JSON format.

Source: DocumentView.js line 2079
Parameters:
Name Type Description
bookmarkJson string

needs to be in valid bookmark JSON format, for example {"0": "Page 1"}. The page numbers are 1-indexed
Returns:
Type
Promise<void>
Example
this._viewer.importBookmarkJson("{\"0\": \"Page 1\", \"3\": \"Page 4\"}");

openBookmarkList

Displays the bookmark tab of the existing list container. If this tab has been disabled, the method does nothing.

Source: DocumentView.js line 2095
Returns:
Type
Promise<void>
Example
this._viewer.openBookmarkList();

Canvas

getCanvasSize

Returns the canvas size of current document viewer.

Source: DocumentView.js line 3016
Returns:
Type Description
Promise<(void|object)>
Name Type Description
width number current width of canvas
height number current height of canvas
Example
this._viewer.getCanvasSize().then(({width, height}) => {
  console.log('Current canvas width is:', width);
  console.log('Current canvas height is:', height);
});

Coordinate

convertScreenPointsToPagePoints

Converts points from screen coordinates to page coordinates in the viewer.

Source: DocumentView.js line 3090
Parameters:
Name Type Description
points Array<object>

list of points, each in the format {x: number, y: number}. You could optionally have a pageNumber: number in the object. Without specifying, the page system is referring to the current page
Returns:
Name Type Description
convertedPoints Promise<(void|Array<object>)> list of converted points in page system, each in the format {x: number, y: number}. It would be empty if conversion is unsuccessful
Example
// convert (50, 50) and (100, 100) from screen system to page system,
// on current page and page 1 respectively
this._viewer.convertScreenPointsToPagePoints([{x: 50, y: 50}, {x: 100, y:100, pageNumber: 1}])
 .then((convertedPoints) => {
   convertedPoints.forEach(point => {
    console.log(point);
   })
 });

convertPagePointsToScreenPoints

Converts points from page coordinates to screen coordinates in the viewer.

Source: DocumentView.js line 3116
Parameters:
Name Type Description
points Array<object>

list of points, each in the format {x: number, y: number}. You could optionally have a pageNumber: number in the object. Without specifying, the page system is referring to the current page
Returns:
Name Type Description
convertedPoints Promise<(void|Array<object>)> list of converted points in screen system, each in the format {x: number, y: number}. It would be empty if conversion is unsuccessful
Example
// convert (50, 50) on current page and (100, 100) on page 1 from page system to screen system
this._viewer.convertPagePointsToScreenPoints([{x: 50, y: 50}, {x: 100, y:100, pageNumber: 1}])
 .then((convertedPoints) => {
   convertedPoints.forEach(point => {
    console.log(point);
   })
 });

getPageNumberFromScreenPoint

Returns the page number that contains the point on screen.

Source: DocumentView.js line 3135
Parameters:
Name Type Description
x number

the x-coordinate of the screen point
y number

the y-coordinate of the screen point
Returns:
Name Type Description
pageNumber Promise<(void|number)> the page number of the screen point
Example
this._viewer.getPageNumberFromScreenPoint(10.0,50.5).then((pageNumber) => {
  console.log('The page number of the screen point is', pageNumber);
});

Document

getDocumentPath

Returns the path of the current document. If isBase64String is true, this would be the path to the temporary pdf file converted from the base64 string in document.

Source: DocumentView.js line 2008
Returns:
Name Type Description
path Promise<(void|string)> the document path.
Example
this._viewer.getDocumentPath().then((path) => {
  console.log('The path to current document is: ' + path);
});

saveDocument

Saves the current document. If isBase64String is true, this would be the base64 string encoded from the temporary pdf file, which is created from the base64 string in document.

Source: DocumentView.js line 2237
Returns:
Name Type Description
filePath Promise<(void|string)> the location of the saved document, or the base64 string of the pdf in the case of base64
Example
this._viewer.saveDocument().then((filePath) => {
  console.log('saveDocument:', filePath);
});

Import/Export Annotations

importAnnotationCommand

Imports remote annotation command to local document.

Source: DocumentView.js line 2119
Parameters:
Name Type Argument Default Description
xfdfCommand string

the XFDF command string
initialLoad boolean <optional>
 false

whether this is for initial load.
Returns:
Type
Promise<void>
Example
const xfdfCommand = '<?xml version="1.0" encoding="UTF-8"?>' +
 '<xfdf xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve">' +
 '<add><circle style="solid" width="5" color="#E44234" opacity="1" ' +
 'creationdate="D:20201218025606Z" flags="print" date="D:20201218025606Z" ' +
 'name="9d0f2d63-a0cc-4f06-b786-58178c4bd2b1" page="0" ' +
 'rect="56.4793,584.496,208.849,739.369" title="PDF" /></add><modify /><delete />' +
 '<pdf-info import-version="3" version="2" xmlns="http://www.pdftron.com/pdfinfo" /></xfdf>';
this._viewer.importAnnotationCommand(xfdfCommand);

importAnnotations

Imports XFDF annotation string to the current document.

Source: DocumentView.js line 2145
Parameters:
Name Type Description
xfdf string

annotation string in XFDF format for import
Returns:
Type
Promise<void>
Example
const xfdf = '<?xml version="1.0" encoding="UTF-8"?>\n' +
 '<xfdf xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve">\n\t<annots>\n\t\t' +
 '<circle style="solid" width="5" color="#E44234" opacity="1" ' +
 'creationdate="D:20190729202215Z" flags="print" date="D:20190729202215Z" page="0" ' +
 'rect="138.824,653.226,236.28,725.159" title="" /></annots>\n\t<pages>\n\t\t' +
 '<defmtx matrix="1.333333,0.000000,0.000000,-1.333333,0.000000,1056.000000" />\n\t</pages>' +
 '\n\t<pdf-info version="2" xmlns="http://www.pdftron.com/pdfinfo" />\n</xfdf>';
this._viewer.importAnnotations(xfdf);

exportAnnotations

Extracts XFDF from the current document.

Source: DocumentView.js line 2171
Parameters:
Name Type Description
options object

key: annotList, type: array. If specified, annotations with the matching id and pageNumber will be exported; otherwise, all annotations in the current document will be exported.
Returns:
Name Type Description
xfdf Promise<(void|string)> annotation string in XFDF format
Examples

Without options:

this._viewer.exportAnnotations().then((xfdf) => {
  console.log('XFDF for all annotations:', xfdf);
});

With options:

// annotList is an array of annotation data in the format {id: string, pageNumber: int}
const annotations = [{id: 'annot1', pageNumber: 1}, {id: 'annot2', pageNumber: 3}];
this._viewer.exportAnnotations({annotList: annotations}).then((xfdf) => {
  console.log('XFDF for 2 specified annotations', xfdf);
});

Multi-tab

closeAllTabs

Closes all tabs in a multi-tab environment.

Source: DocumentView.js line 2861
Returns:
Type
Promise<void>
Example
// Do this only when DocumentView has multiTabEnabled = true
this._viewer.closeAllTabs();

openTabSwitcher

Opens the tab switcher in a multi-tab environment.

Source: DocumentView.js line 2877
Returns:
Type
Promise<void>
Example
// Do this only when DocumentView has multiTabEnabled = true
this._viewer.openTabSwitcher();

Navigation

handleBackButton

Handles the back button in search mode. Android only.

Source: DocumentView.js line 2350
Returns:
Name Type Description
handled Promise<(void|boolean)> whether the back button is handled successfully
Example
this._viewer.handleBackButton().then((handled) => {
  if (!handled) {
    BackHandler.exitApp();
  }
});

Other

exportAsImage

Export a PDF page to image format defined in Config.ExportFormat.

Unlike RNPdftron.exportAsImage, this is a viewer method and should only be called after the document has been loaded or else unexpected behaviour can occur. This method uses the PDF that is associated with the viewer, and does not take a local file path to the desired PDF.

Source: DocumentView.js line 3575
Parameters:
Name Type Description
pageNumber int

the page to be converted; if the value does not refer to a valid page number, the file path will be undefined
dpi double

the output image resolution
exportFormat Config.ExportFormat

image format to be exported to
Returns:
Name Type Description
path Promise<(void|string)> the temp path of the created image, user is responsible for clean up the cache
Example
this._viewer.exportToImage(1, 92, Config.ExportFormat.BMP).then((path) => {
  console.log('export', path);
});

showCrop

Displays the page crop option. Android only.

Source: DocumentView.js line 3655
Returns:
Type
Promise<void>
Example
this._viewer.showCrop();

showViewSettings

Displays the view settings.

Requires a source rect in screen co-ordinates. On iOS this rect will be the anchor point for the view. The rect is ignored on Android.

Source: DocumentView.js line 3694
Parameters:
Name Type Description
rect map

The rectangular area in screen co-ordinates with keys x1 (left), y1 (bottom), y1 (right), y2 (top). Coordinates are in double format.
Returns:
Type
Promise<void>
Example
this._viewer.showViewSettings({'x1': 10.0, 'y1': 10.0, 'x2': 20.0, 'y2': 20.0});

showAddPagesView

Displays the add pages view.

Requires a source rect in screen co-ordinates. On iOS this rect will be the anchor point for the view. The rect is ignored on Android.

Source: DocumentView.js line 3732
Parameters:
Name Type Description
rect map

The rectangular area in screen co-ordinates with keys x1 (left), y1 (bottom), y1 (right), y2(top). Coordinates are in double format.
Returns:
Type
Promise<void>
Example
this._viewer.showAddPagesView({'x1': 10.0, 'y1': 10.0, 'x2': 20.0, 'y2': 20.0});

shareCopy

Displays the share copy view.

Requires a source rect in screen co-ordinates. On iOS this rect will be the anchor point for the view. The rect is ignored on Android.

Source: DocumentView.js line 3784
Parameters:
Name Type Description
rect map

The rectangular area in screen co-ordinates with keys x1 (left), y1 (bottom), y1 (right), y2 (top). Coordinates are in double format.
flattening boolean

Whether the shared copy should be flattened before sharing.
Returns:
Type
Promise<void>
Example
this._viewer.shareCopy({'x1': 10.0, 'y1': 10.0, 'x2': 20.0, 'y2': 20.0}, true);

openOutlineList

Displays the outline tab of the existing list container. If this tab has been disabled, the method does nothing.

Source: DocumentView.js line 3819
Returns:
Type
Promise<void>
Example
this._viewer.openOutlineList();

openLayersList

On Android it displays the layers dialog, while on iOS it displays the layers tab of the existing list container. If this tab has been disabled or there are no layers in the document, the method does nothing.

Source: DocumentView.js line 3835
Returns:
Type
Promise<void>
Example
this._viewer.openLayersList();

openNavigationLists

Displays the existing list container. Its current tab will be the one last opened.

Source: DocumentView.js line 3849
Returns:
Type
Promise<void>
Example
this._viewer.openNavigationLists();

Page

getPageCount

Gets the current page count of the document.

Source: DocumentView.js line 2061
Returns:
Name Type Description
pageCount Promise<(void|number)> the current page count of the document
Example
this._viewer.getPageCount().then((pageCount) => {
  console.log('pageCount', pageCount);
});

getPageCropBox

Gets the crop box for specified page as a JSON object.

Source: DocumentView.js line 2711
Parameters:
Name Type Description
pageNumber integer

the page number for the target crop box. It is 1-indexed
Returns:
Name Type Description
cropBox Promise<(void|object)> an object with information about position (x1, y1, x2 and y2) and size (width and height)
Example
this._viewer.getPageCropBox(1).then((cropBox) => {
  console.log('bottom-left coordinate:', cropBox.x1, cropBox.y1);
  console.log('top-right coordinate:', cropBox.x2, cropBox.y2);
  console.log('width and height:', cropBox.width, cropBox.height);
});

setCurrentPage

Sets current page of the document.

Source: DocumentView.js line 2731
Parameters:
Name Type Description
pageNumber integer

the page number to be set as the current page; 1-indexed
Returns:
Name Type Description
success Promise<(void|boolean)> whether the setting process was successful
Example
this._viewer.setCurrentPage(4).then((success) => {
  if (success) {
    console.log("Current page is set to 4.");
  }
});

getVisiblePages

Gets the visible pages in the current viewer as an array.

Source: DocumentView.js line 2751
Returns:
Name Type Description
visiblePages Promise<(void|Array<number>)> a list of visible pages in the current viewer
Example
this._viewer.getVisiblePages().then((visiblePages) => {
  for (const page of visiblePages) {
    console.log('page', page, 'is visible.')
  }
});

gotoPreviousPage

Go to the previous page of the document. If on first page, it will stay on first page.

Source: DocumentView.js line 2771
Returns:
Name Type Description
success Promise<(void|boolean)> whether the setting process was successful (no change due to staying in first page counts as being successful)
Example
this._viewer.gotoPreviousPage().then((success) => {
  if (success) {
    console.log("Go to previous page.");
  }
});

gotoNextPage

Go to the next page of the document. If on last page, it will stay on last page.

Source: DocumentView.js line 2791
Returns:
Name Type Description
success Promise<(void|boolean)> whether the setting process was successful (no change due to staying in last page counts as being successful)
Example
this._viewer.gotoNextPage().then((success) => {
  if (success) {
    console.log("Go to next page.");
  }
});

gotoFirstPage

Go to the first page of the document.

Source: DocumentView.js line 2810
Returns:
Name Type Description
success Promise<(void|boolean)> whether the setting process was successful
Example
this._viewer.gotoFirstPage().then((success) => {
  if (success) {
    console.log("Go to first page.");
  }
});

gotoLastPage

Go to the last page of the document.

Source: DocumentView.js line 2829
Returns:
Name Type Description
success Promise<(void|boolean)> whether the setting process was successful
Example
this._viewer.gotoLastPage().then((success) => {
  if (success) {
    console.log("Go to last page.");
  }
});

showGoToPageView

Opens a go-to page dialog. If the user inputs a valid page number into the dialog, the viewer will go to that page.

Source: DocumentView.js line 2845
Returns:
Type
Promise<void>
Example
this._viewer.showGoToPageView();

getPageRotation

Gets the rotation value of all pages in the current document.

Source: DocumentView.js line 3034
Returns:
Name Type Description
pageRotation Promise<(void|number)> the rotation degree of all pages, one of 0, 90, 180 or 270 (clockwise).
Example
this._viewer.getPageRotation().then((pageRotation) => {
  console.log('The current page rotation degree is' + pageRotation);
});

rotateClockwise

Rotates all pages in the current document in clockwise direction (by 90 degrees).

Source: DocumentView.js line 3049
Returns:
Type
Promise<void>
Example
this._viewer.rotateClockwise();

rotateCounterClockwise

Rotates all pages in the current document in counter-clockwise direction (by 90 degrees).

Source: DocumentView.js line 3064
Returns:
Type
Promise<void>
Example
this._viewer.rotateCounterClockwise();

showRotateDialog

Android only.

Displays a rotate dialog. This dialog allows users to rotate pages of the opened document by 90, 180 and 270 degrees. It also displays a thumbnail of the current page at the selected rotation angle.

Source: DocumentView.js line 3713
Returns:
Type
Promise<void>
Example
this._viewer.showRotateDialog();

Reflow

isReflowMode

Returns whether the viewer is currently in reflow mode.

Source: DocumentView.js line 3749
Returns:
Name Type Description
inReflow Promise<(void|boolean)> whether the viewer is in reflow mode
Example
this._viewer.isReflowMode().then((inReflow) => {
  console.log(inReflow ? 'in reflow mode' : 'not in reflow mode');
});

toggleReflow

Allows the user to programmatically enter and exit reflow mode.

Source: DocumentView.js line 3764
Returns:
Type
Promise<void>
Example
this._viewer.toggleReflow();

Rendering Options

setProgressiveRendering

Sets whether the control will render progressively or will just draw once the entire view has been rendered.

Source: DocumentView.js line 3156
Parameters:
Name Type Description
progressiveRendering boolean

whether to render progressively
initialDelay number

delay before the progressive rendering timer is started, in milliseconds
interval number

delay between refreshes, in milliseconds
Returns:
Type
Promise<void>
Example
// delay for 10s before start, and refresh every 1s
this._viewer.setProgressiveRendering(true, 10000, 1000);

setImageSmoothing

Enables or disables image smoothing. The rasterizer allows a trade-off between rendering quality and rendering speed. This function can be used to indicate the preference between rendering speed and quality.

Source: DocumentView.js line 3174
Parameters:
Name Type Description
imageSmoothing boolean

whether to enable image smoothing
Returns:
Type
Promise<void>
Example
this._viewer.setImageSmoothing(false);

setOverprint

Enables or disables support for overprint and overprint simulation. Overprint is a device dependent feature and the results will vary depending on the output color space and supported colorants (i.e. CMYK, CMYK+spot, RGB, etc).

Source: DocumentView.js line 3192
Parameters:
Name Type Description
overprint Config.OverprintMode

the mode of overprint
Returns:
Type
Promise<void>
Example
this._viewer.setOverprint(Config.OverprintMode.Off);

Scroll

getScrollPos

Returns the horizontal and vertical scroll position of current document viewer.

Source: DocumentView.js line 2992
Returns:
Type Description
Promise<(void|object)>
Name Type Description
horizontal number current horizontal scroll position
vertical number current vertical scroll position
Example
this._viewer.getScrollPos().then(({horizontal, vertical}) => {
  console.log('Current horizontal scroll position is:', horizontal);
  console.log('Current vertical scroll position is:', vertical);
});

Signature

getSavedSignatures

Gets a list of absolute file paths to PDFs containing the saved signatures.

Source: DocumentView.js line 3871
Returns:
Name Type Description
signatures Promise<(void|Array<string>)> an array of string containing the absolute file paths; if there are no saved signatures, the value is an empty array
Example
this._viewer.getSavedSignatures().then((signatures) => {
  if (signatures.length > 0) {
    signatures.forEach((signature) => {
      console.log(signature);
    });
  }
})

getSavedSignatureFolder

Retrieves the absolute file path to the folder containing the saved signatures. For Android, to get the folder containing the saved signature JPGs, use getSavedSignatureJpgFolder.

Source: DocumentView.js line 3892
Returns:
Name Type Description
path Promise<(void|string)> the absolute file path to the folder
Example
this._viewer.getSavedSignatureFolder().then((path) => {
  if (path != null) {
    console.log(path);
  }
})

getSavedSignatureJpgFolder

Android only.

Retrieves the absolute file path to the folder containing the saved signature JPGs. For Android, to get the folder containing the saved signature PDFs, use getSavedSignatureFolder.

Source: DocumentView.js line 3915
Returns:
Name Type Description
path Promise<(void|string)> the absolute file path to the folder
Example
this._viewer.getSavedSignatureJpgFolder().then((path) => {
  if (path != null) {
    console.log(path);
  }
})

Text Selection

startSearchMode

Search for a term and all matching results will be highlighted.

Source: DocumentView.js line 3248
Parameters:
Name Type Description
searchString string

the text to search for
matchCase boolean

indicates if it is case sensitive
matchWholeWord boolean

indicates if it matches an entire word only
Returns:
Type
Promise<void>
Example
this._viewer.startSearchMode('PDFTron', false, false);

exitSearchMode

Finishes the current text search and remove all the highlights.

Source: DocumentView.js line 3263
Returns:
Type
Promise<void>
Example
this._viewer.exitSearchMode();

findText

Searches asynchronously, starting from the current page, for the given text. PDFViewCtrl automatically scrolls to the position so that the found text is visible.

Source: DocumentView.js line 3284
Parameters:
Name Type Description
searchString string

the text to search for
matchCase boolean

indicates if it is case sensitive
matchWholeWord boolean

indicates if it matches an entire word only
searchUp boolean

indicates if it searches upward
regExp boolean

indicates if searchString is a regular expression
Returns:
Type
Promise<void>
Example
this._viewer.findText('PDFTron', false, false, true, false);

cancelFindText

Cancels the current text search thread, if exists.

Source: DocumentView.js line 3299
Returns:
Type
Promise<void>
Example
this._viewer.cancelFindText();

openSearch

Displays a search bar that allows the user to enter and search text within a document.

Source: DocumentView.js line 3314
Returns:
Type
Promise<void>
Example
this._viewer.openSearch();

getSelection

Returns the text selection on a given page, if any.

Source: DocumentView.js line 3351
Parameters:
Name Type Description
pageNumber number

the specified page number. It is 1-indexed
Returns:
Name Type Description
selection Promise<(void|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
this._viewer.getSelection(2).then((selection) => {
  if (selection) {
    console.log('Found selection on page', selection.pageNumber);
    for (let i = 0; i < selection.quads.length; i ++) {
      const quad = selection.quads[i];
      console.log('selection boundary quad', i);
      for (const quadPoint of quad) {
        console.log('A quad point has coordinates', quadPoint.x, quadPoint.y);
      }
    }
  }
});

hasSelection

Returns whether there is a text selection in the current document.

Source: DocumentView.js line 3368
Returns:
Name Type Description
hasSelection Promise<(void|boolean)> whether a text selection exists
Example
this._viewer.hasSelection().then((hasSelection) => {
  console.log('There is a selection in the document.');
});

clearSelection

Clears any text selection in the current document.

Source: DocumentView.js line 3383
Returns:
Type
Promise<void>
Example
this._viewer.clearSelection();

getSelectionPageRange

Returns the page range (beginning and end) that has text selection on it.

Source: DocumentView.js line 3410
Returns:
Type Description
Promise<(void|object)>
Name Type Description
begin number the first page to have selection, -1 if there are no selections
end number the last page to have selection, -1 if there are no selections
Example
this._viewer.getSelectionPageRange().then(({begin, end}) => {
  if (begin === -1) {
    console.log('There is no selection');
  } else {
    console.log('The selection range is from', begin, 'to', end);
  }
});

hasSelectionOnPage

Returns whether there is a text selection on the specified page in the current document.

Source: DocumentView.js line 3431
Parameters:
Name Type Description
pageNumber number

the specified page number. It is 1-indexed
Returns:
Name Type Description
hasSelection Promise<(void|boolean)> whether a text selection exists on the specified page
Example
this._viewer.hasSelectionOnPage(5).then((hasSelection) => {
  if (hasSelection) {
    console.log('There is a selection on page 5 in the document.');
  }
});

selectInRect

Selects the text within the given rectangle region.

Source: DocumentView.js line 3450
Parameters:
Name Type Description
rect object

the rectangle region in the format of {x1: number, x2: number, y1: number, y2: number}
Returns:
Name Type Description
selected Promise<(void|boolean)> whether there is text selected
Example
this._viewer.selectInRect({x1: 0, y1: 0, x2: 200.5, y2: 200.5}).then((selected) => {
        console.log(selected);
});

isThereTextInRect

Returns whether there is text in given rectangle region.

Source: DocumentView.js line 3469
Parameters:
Name Type Description
rect object

the rectangle region in the format of {x1: number, x2: number, y1: number, y2: number}
Returns:
Name Type Description
hasText Promise<(void|boolean)> whether there is text in the region
Example
this._viewer.isThereTextInRect({x1: 0, y1: 0, x2: 200, y2: 200}).then((hasText) => {
        console.log(hasText);
});

selectAll

Selects all text on the page.

Source: DocumentView.js line 3484
Returns:
Type
Promise<void>
Example
this._viewer.selectAll();

Thumbnails

openThumbnailsView

Display a page thumbnails view.

This view allows users to navigate pages of a document. If thumbnailViewEditingEnabled is true, the user can also manipulate the document, including add, remove, re-arrange, rotate and duplicate pages.

Source: DocumentView.js line 3804
Returns:
Type
Promise<void>
Example
this._viewer.openThumbnailsView();

Toolbar

setCurrentToolbar

Sets the current annotationToolbars for the viewer.

Source: DocumentView.js line 3675
Parameters:
Name Type Description
toolbar Config.DefaultToolbars | string

the toolbar to enable. Should be one of the Config.DefaultToolbars constants or the id of a custom toolbar object.
Returns:
Type
Promise<void>
Example
this._viewer.setCurrentToolbar(Config.DefaultToolbars.Insert).then(() => {
  // done switching toolbar
});

UI Customization

setColorPostProcessMode

Sets the color post processing transformation mode for the viewer.

Source: DocumentView.js line 3208
Parameters:
Name Type Description
colorPostProcessMode Config.ColorPostProcessMode

color post processing transformation mode
Example
this._viewer.setColorPostProcessMode(Config.ColorPostProcessMode.NightMode);

setColorPostProcessColors

Sets the white and black color for the color post processing transformation.

Source: DocumentView.js line 3230
Parameters:
Name Type Description
whiteColor object

the white color for the color post processing transformation, in the format {red: number, green: number, blue: number}. alpha could be optionally included (only Android would apply alpha), and all numbers should be in range [0, 255]
blackColor object

the black color for the color post processing transformation, in the same format as whiteColor
Example
const whiteColor = {"red": 0, "green": 0, "blue": 255};
const blackColor = {"red": 255, "green": 0, "blue": 0};
this._viewer.setColorPostProcessColors(whiteColor, blackColor);

Undo/Redo

undo

Undo the last modification.

Source: DocumentView.js line 3590
Returns:
Type
Promise<void>
Example
this._viewer.undo();

redo

Redo the last modification.

Source: DocumentView.js line 3605
Returns:
Type
Promise<void>
Example
this._viewer.redo();

canUndo

Checks whether an undo operation can be performed from the current snapshot.

Source: DocumentView.js line 3623
Returns:
Name Type Description
canUndo Promise<(void|boolean)> whether it is possible to undo from the current snapshot
Example
this._viewer.canUndo().then((canUndo) => {
  console.log(canUndo ? 'undo possible' : 'no action to undo');
});

canRedo

Checks whether a redo operation can be perfromed from the current snapshot.

Source: DocumentView.js line 3641
Returns:
Name Type Description
canRedo Promise<(void|boolean)> whether it is possible to redo from the current snapshot
Example
this._viewer.canRedo().then((canRedo) => {
  console.log(canRedo ? 'redo possible' : 'no action to redo');
});

Viewer Options

setPageBorderVisibility

Sets whether borders of each page are visible in the viewer, which is disabled by default.

Source: DocumentView.js line 3500
Parameters:
Name Type Description
pageBorderVisibility boolean

whether borders of each page are visible in the viewer
Example
this._viewer.setPageBorderVisibility(true);

setPageTransparencyGrid

Enables or disables transparency grid (check board pattern) to reflect page transparency, which is disabled by default.

Source: DocumentView.js line 3516
Parameters:
Name Type Description
pageTransparencyGrid boolean

whether to use the transparency grid
Example
this._viewer.setPageTransparencyGrid(true);

setDefaultPageColor

Sets the default page color of the viewer.

Source: DocumentView.js line 3532
Parameters:
Name Type Description
defaultPageColor object

the default page color, in the format {red: number, green: number, blue: number}, each number in range [0, 255]
Example
this._viewer.setDefaultPageColor({red: 0, green: 255, blue: 0}); // green color

setBackgroundColor

Sets the background color of the viewer.

Source: DocumentView.js line 3548
Parameters:
Name Type Description
backgroundColor object

the background color, in the format {red: number, green: number, blue: number}, each number in range [0, 255]
Example
this._viewer.setBackgroundColor({red: 0, green: 0, blue: 255}); // blue color

Zoom

getZoom

Returns the current zoom scale of current document viewer.

Source: DocumentView.js line 2894
Returns:
Name Type Description
zoom Promise<(void|number)> current zoom scale in the viewer
Example
this._viewer.getZoom().then((zoom) => {
  console.log('Zoom scale of the current document is:', zoom);
});

setZoomLimits

Sets the minimum and maximum zoom bounds of current viewer.

Source: DocumentView.js line 2913
Parameters:
Name Type Description
zoomLimitMode Config.ZoomLimitMode

defines whether bounds are relative to the standard zoom scale in the current viewer or absolute
minimum double

the lower bound of the zoom limit range
maximum double

the upper bound of the zoom limit range
Returns:
Type
Promise<void>
Example
this._viewer.setZoomLimits(Config.ZoomLimitMode.Absolute, 1.0, 3.5);

zoomWithCenter

Sets the zoom scale in the current document viewer with a zoom center.

Source: DocumentView.js line 2931
Parameters:
Name Type Description
zoom double

the zoom ratio to be set
x int

the x-coordinate of the zoom center
y int

the y-coordinate of the zoom center
Returns:
Type
Promise<void>
Example
this._viewer.zoomWithCenter(3.0, 100, 300);

zoomToRect

Zoom the viewer to a specific rectangular area in a page.

Source: DocumentView.js line 2949
Parameters:
Name Type Description
pageNumber int

the page number of the zooming area (1-indexed)
rect object

The rectangular area with keys x1 (left), y1 (bottom), y1 (right), y2 (top). Coordinates are in double
Returns:
Type
Promise<void>
Example
this._viewer.zoomToRect(3, {'x1': 1.0, 'y1': 2.0, 'x2': 3.0, 'y2': 4.0});

smartZoom

Zoom to a paragraph that contains the specified coordinate. If no paragraph contains the coordinate, the zooming would not happen.

Source: DocumentView.js line 2968
Parameters:
Name Type Description
x int

the x-coordinate of the target coordinate
y int

the y-coordinate of the target coordinate
animated boolean

whether the transition is animated
Returns:
Type
Promise<void>
Example
this._viewer.smartZoom(100, 200, true);

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);
  }}
/>