PSPDFKitView

PSPDFKitView is a React Native component used to view PDF documents on iOS and Android.
Source:
Example
<PSPDFKitView
     document={DOCUMENT_PATH}
     configuration={{
       showThumbnailBar: PDFConfiguration.ShowThumbnailBar.SCROLLABLE,
       pageTransition: PDFConfiguration.PageTransition.SCROLL_CONTINUOUS,
       scrollDirection: PDFConfiguration.ScrollDirection.VERTICAL,
     }}
     ref={this.pdfRef}
     fragmentTag="PDF1"
     style={{ flex: 1 }}
   />

Extends

  • React.Component

Members

(static) annotationAuthorName :string

Controls the author name that’s set for new annotations. If not set and the user hasn’t specified it before, the user will be asked and the result will be saved. The value set here will be persisted and the user won’t be asked, even if this isn’t set the next time.
Type:
  • string
Source:

(static) annotationContextualMenu :AnnotationContextualMenu

Object to customize the menu shown when selecting an annotation.
Type:
  • AnnotationContextualMenu
Source:

(static) annotationPresets :AnnotationPresetConfiguration

The annotation preset configuration.
Type:
  • AnnotationPresetConfiguration
Source:
See:
Example
annotationPresets={{
  inkPen: {
    defaultThickness: 50,
    minimumThickness: 1,
    maximumThickness: 60,
    defaultColor: '#99cc00',
  },
  freeText: {
    defaultTextSize: 20,
    defaultColor: '#FF0000',
  },
}}

(static) availableFontNames :Array.<string>

Used to specify the available font names in the font picker. Note on iOS: You need to set the desired font family names as UIFontDescriptor.
Type:
  • Array.<string>
Source:
See:

(static) configuration :PDFConfiguration

Configuration object to customize the appearance and behavior of PSPDFKit.
Type:
Source:
See:
  • https://pspdfkit.com/api/react-native/PDFConfiguration.html for available options. Note: On iOS, set the useParentNavigationBar configuration option to true if you're using a navigation plugin such as NavigatorIOS or react-native-navigation. This is because the plugin will manage the navigation bar.

(static) disableAutomaticSaving :boolean

Controls whether or not the document will automatically be saved. Defaults to automatically saving (false).
Type:
  • boolean
Source:

(static) disableDefaultActionForTappedAnnotations :boolean

Controls whether or not the default action for tapped annotations is processed. Defaults to processing the action (false).
Type:
  • boolean
Source:

(static) document :string

The path to the PDF file that should be displayed.
Type:
  • string
Source:

(static) fragmentTag :string

The tag used to identify a single PdfFragment in the view hierarchy. This needs to be unique in the view hierarchy.
Type:
  • string
Source:

(static) hideDefaultToolbar :boolean

Used to show or hide the main toolbar on Android. Defaults to true, showing the toolbar.
Type:
  • boolean
Source:

(static) hideNavigationBar :boolean

Controls whether a navigation bar is created and shown or not. Navigation bar is shown by default (false).
Type:
  • boolean
Source:

(static) imageSaveMode :string

Specifies what is written back to the original image URL when the receiver is saved. If this property is flattenAndEmbed, then this allows for changes made to the image to be saved as metadata in the original file. If the same file is reopened, all previous changes made will remain editable. If this property is flatten, the changes are simply written to the image, and will not be editable when reopened. Available options are: flatten or flattenAndEmbed.
Type:
  • string
Source:

(static) leftBarButtonItems :Array.<string>

Sets the left bar button items. Note: The same button item cannot be added to both the left and right bar button items simultaneously.
Type:
  • Array.<string>
Source:
See:

(static) menuItemGrouping :Array

On iOS, you can specify a custom grouping for the annotation creation toolbar items.
Type:
  • Array
Source:
See:
Example
menuItemGrouping={[
  'pen',
  'freetext',
  { key: 'markup', items: ['highlight', 'underline'] },
  'image',
]}

(static) onAnnotationTapped :function

Callback that’s called when an annotation is tapped. The result contains the InstantJSON of the annotation that was tapped.
Type:
  • function
Source:
Example
onAnnotationTapped={result => {
    if (result.error) {
        alert(result.error);
    } else {
        alert('Tapped on Annotation: ' + JSON.stringify(result));
    }
}}

(static) onAnnotationsChanged :function

Callback that’s called when an annotation is added, changed, or removed. The result contains the type of change, as well as an array of the InstantJSON annotations.
Type:
  • function
Source:
Example
onAnnotationsChanged={result => {
    if (result.error) {
        alert(result.error);
    } else {
        alert('Annotations ' + result.change + ': ' + JSON.stringify(result.annotations));
    }
 }}

(static) onCloseButtonPressed :function

Callback that’s called when the user tapped the close button. If you provide this function, you need to handle dismissal yourself. If you don't provide this function, PSPDFKitView will be automatically dismissed. Only applies when the PSPDFKitView is presented modally.
Type:
  • function
Source:
Example
onCloseButtonPressed={() => {
    // Optionally perform operations and close the modal window.
}}

(static) onCustomAnnotationContextualMenuItemTapped :function

Callback that’s called when a custom annotation menu item is tapped.
Type:
  • function
Source:
Example
onCustomAnnotationContextualMenuItemTapped={result => {
    if (result.error) {
        alert(result.error);
    } else {
        alert('Custom annotation contextual menu item tapped: ' + JSON.stringify(result));
    }
 }}

(static) onCustomToolbarButtonTapped :function

Callback that’s called when a custom toolbar button is tapped.
Type:
  • function
Source:
Example
onCustomToolbarButtonTapped={result => {
    if (result.error) {
        alert(result.error);
    } else {
        alert('Custom bar button item tapped: ' + JSON.stringify(result));
    }
 }}

(static) onDocumentLoadFailed :function

Callback that’s called when the document failed to load.
Type:
  • function
Source:
Example
onDocumentLoadFailed={() => {
    // Document load failed event.
}}

(static) onDocumentLoaded :function

Callback that’s called when the document is loaded in the PSPDFKitView.
Type:
  • function
Source:
Example
onDocumentLoaded={() => {
    // Document loaded event.
}}

(static) onDocumentSaveFailed :function

Callback that’s called when the document fails to save.
Type:
  • function
Source:
Example
onDocumentSaveFailed={result => {
   alert('Document Save Failed: ' + JSON.stringify(result));
   // { error: "Error message" }
}}

(static) onDocumentSaved :function

Callback that’s called when the document is saved.
Type:
  • function
Source:
Example
onDocumentSaved={() => {
    // Document saved event.
}}

(static) onNavigationButtonClicked :function

If showNavigationButtonInToolbar is set to true, this callback will notify you when the back button is tapped.
Type:
  • function
Source:

(static) onStateChanged :function

Callback that’s called when the state of the PSPDFKitView changes.
Type:
  • function
Source:
Example
onStateChanged={result => {
    if (result.error) {
        alert(result.error);
    } else {
        alert('Document State Changed: ' + JSON.stringify(result));
        // {"currentPageIndex":0,
        //  "textSelectionActive":false,
        //  "affectedPageIndex":0,
        //  "target":1013,
        //  "pageCount":21,
        //  "formEditingActive":false,
        //  "annotationCreationActive":false,
        //  "annotationEditingActive":false,
        //  "documentLoaded":true}
    }
 }}

(static) pageIndex :number

Page index of the document that will be shown. Starts at 0.
Type:
  • number
Source:

(static) rightBarButtonItems :Array.<string>

Sets the right bar button items. Note: The same button item cannot be added to both the left and right bar button items simultaneously.
Type:
  • Array.<string>
Source:
See:

(static) selectedFontName :string

Used to specify the current selected font in the font picker. Note on iOS: You need to set the desired font family names as UIFontDescriptor.
Type:
  • string
Source:
See:

(static) showCloseButton :boolean

Specifies whether the close button should be shown in the navigation bar. Disabled by default (false). Only applies when the PSPDFKitView is presented modally. Will call onCloseButtonPressed when tapped if a callback was provided. If onCloseButtonPressed wasn’t provided, PSPDFKitView will automatically be dismissed when modally presented.
Type:
  • boolean
Source:

(static) showDownloadableFonts :boolean

Used to show or hide the downloadable fonts section in the font picker. Defaults to true, showing the downloadable fonts.
Type:
  • boolean
Source:
See:

(static) showNavigationButtonInToolbar :boolean

When set to true, the toolbar integrated into the PSPDFKitView will display a back button in the top-left corner.
Type:
  • boolean
Source:

(static) style :any

Used to style the React Native component.
Type:
  • any
Source:

(static) toolbar :Toolbar

Toolbar object to customize the toolbar appearance and behaviour.
Type:
Source:

(static) toolbarMenuItems :Array.<string>

Used to customize the toolbar menu items for Android.
Type:
  • Array.<string>
Source:
See:

(static) toolbarTitle :string

Used to specify a custom toolbar title on iOS by setting the title property of the PSPDFViewController. Note: You need to set documentLabelEnabled, useParentNavigationBar, and allowToolbarTitleChange to false in your configuration before setting the custom title.
Type:
  • string
Source:

Methods

(static) addAnnotation(annotation) → {Promise.<boolean>}

Adds a new annotation to the current document.
Parameters:
Name Type Description
annotation object The InstantJSON of the annotation to add.
Deprecated:
  • Since PSPDFKit for React Native 2.12. Use this.pdfRef.current?.getDocument().addAnnotations() instead.
Source:
See:
Returns:
A promise resolving to true if the annotation was added successfully, and false if an error occurred.
Type
Promise.<boolean>
Example
const result = await this.pdfRef.current.addAnnotation(annotationJSON);

(static) addAnnotations(annotations) → {Promise.<boolean>}

Applies the supplied document InstantJSON to the current document.
Parameters:
Name Type Description
annotations object The document InstantJSON to apply to the current document.
Deprecated:
  • Since PSPDFKit for React Native 2.12. Use this.pdfRef.current?.getDocument().addAnnotations() instead. See addAnnotations().
Source:
See:
Returns:
A promise resolving to true if the annotations were added successfully, and false if an error occurred.
Type
Promise.<boolean>
Example
const result = await this.pdfRef.current.addAnnotations(annotationsJSON);

(static) clearSelectedAnnotations() → {Promise.<any>}

Clears all currently selected Annotations.
Source:
Returns:
A promise containing the result of the operation. true if the annotations selection were cleared, false otherwise.
Type
Promise.<any>
Example
const result = await this.pdfRef.current?.clearSelectedAnnotations();

(static) destroyView()

Removes the currently displayed Android Native PdfUiFragment. This function should only be used as a workaround for a bug in react-native-screen that causes a crash when navigation.goBack() is called or a hardware back button is used to navigate back on Android. Calling this function will prevent the crash by removing the fragment from the PdfView before the navigation takes place.
Source:

(static) enterAnnotationCreationMode()

Enters annotation creation mode, showing the annotation creation toolbar.
Source:
Example
this.pdfRef.current.enterAnnotationCreationMode();

(static) exitCurrentlyActiveMode()

Exits the currently active mode, hiding all toolbars.
Source:
Example
this.pdfRef.current.exitCurrentlyActiveMode();

(static) exportXFDF(filePath) → {Promise.<any>}

Exports the annotations from the current document to a XFDF file.
Parameters:
Name Type Description
filePath string The path where the XFDF file should be exported to.
Deprecated:
  • Since PSPDFKit for React Native 2.12. Use this.pdfRef.current?.getDocument().exportXFDF() instead. See exportXFDF().
Source:
Returns:
A promise containing an object with the exported file path and result. true if the xfdf file was exported successfully, and false if an error occurred.
Type
Promise.<any>
Example
const result = await this.pdfRef.current.exportXFDF('path/to/XFDF.xfdf');

(static) getAllAnnotations(typeopt) → {Promise}

Gets all annotations of the given type.
Parameters:
Name Type Attributes Description
type string <optional>
 The type of annotations to get. If not specified or null, all annotation types will be returned.
Deprecated:
  • Since PSPDFKit for React Native 2.12. Use this.pdfRef.current?.getDocument().getAnnotations() instead. See getAnnotations().
Source:
See:
Returns:
A promise containing an object with an array of InstantJSON objects.
Type
Promise
Example
const result = await this.pdfRef.current.getAllAnnotations('all');
// result: {'annotations' : [instantJson]}

(static) getAllUnsavedAnnotations() → {Promise}

Gets all unsaved changes to annotations.
Deprecated:
  • Since PSPDFKit for React Native 2.12. Use this.pdfRef.current?.getDocument().getAllUnsavedAnnotations() instead. See getAllUnsavedAnnotations().
Source:
See:
Returns:
A promise containing document InstantJSON.
Type
Promise

(static) getAnnotationFlags(uuid) → {Promise.<Array.<Annotation.Flags>>}

Gets the flags for the specified annotation.
Parameters:
Name Type Description
uuid string The UUID of the annotation to query.
Source:
Returns:
A promise containing the flags of the specified annotation.
Type
Promise.<Array.<Annotation.Flags>>
Example
const flags = await this.pdfRef.current.getAnnotationFlags('bb61b1bf-eacd-4227-a5bf-db205e591f5a');

(static) getAnnotations(pageIndex, typeopt) → {Promise}

Gets all annotations of the given type from the specified page.
Parameters:
Name Type Attributes Description
pageIndex number The page index to get the annotations for, starting at 0.
type string <optional>
 The type of annotations to get. If not specified or null, all annotation types will be returned.
Deprecated:
Source:
See:
Returns:
A promise containing an object with an array of InstantJSON objects.
Type
Promise
Example
const result = await this.pdfRef.current.getAnnotations(3, 'pspdfkit/ink');

(static) getConfiguration() → {Promise.<PDFConfiguration>}

Gets the current PSPDFKitView configuration.
Source:
Returns:
A promise containing a PDFConfiguration object with the document configuration.
Type
Promise.<PDFConfiguration>
Example
const configuration = await this.pdfRef.current.getConfiguration();

(static) getDocument() → {PDFDocument}

Get the current PDF document.
Source:
See:
Returns:
A reference to the document that is currently loaded in the PSPDFKitView component.
Type
PDFDocument
Example
const document = this.pdfRef.current?.getDocument();

(static) getFormFieldValue(fullyQualifiedName) → {Promise.<FormFieldResult>}

Gets the form field value of the supplied form field name.
Parameters:
Name Type Description
fullyQualifiedName string The fully qualified name of the form element.
Source:
Returns:
A promise containing an object with the value, or an error if the form field could not be found.
Type
Promise.<FormFieldResult>
Example
const result = await this.pdfRef.current.getFormFieldValue('myFormElement');
// result: {'myFormElement' : value}
// or
// {'error' : 'Failed to get the form field value.'}

(static) getLeftBarButtonItemsForViewMode(viewModeopt) → {Promise.<Array.<string>>}

Gets the left bar button items for the specified view mode.
Parameters:
Name Type Attributes Description
viewMode string <optional>
 The view mode to query. Options are: document, thumbnails, documentEditor, or null. If null is passed, the bar button items for the current view mode are returned.
Source:
Returns:
A promise containing an array of bar button items, or an error if the items couldn’t be retrieved.
Type
Promise.<Array.<string>>
Example
const leftBarButtonItems = await this.pdfRef.current.getLeftBarButtonItemsForViewMode('document');
// leftBarButtonItems: ['outlineButtonItem', 'searchButtonItem']
// or
// {'error' : 'Failed to get the left bar button items.'}

(static) getMeasurementValueConfigurations() → {Promise.<Array.<MeasurementValueConfiguration>>}

Gets the current PSPDFKitView MeasurementValueConfigurations.
Source:
Returns:
A promise containing an array of MeasurementValueConfiguration objects.
Type
Promise.<Array.<MeasurementValueConfiguration>>
Example
const configurations = await this.pdfRef.current.getMeasurementValueConfigurations();

(static) getRightBarButtonItemsForViewMode(viewModeopt) → {Promise.<Array.<string>>}

Gets the right bar button items for the specified view mode.
Parameters:
Name Type Attributes Description
viewMode string <optional>
 The view mode to query. Options are: document, thumbnails, documentEditor, or null. If null is passed, the bar button items for the current view mode are returned.
Source:
Returns:
A promise containing an array of bar button items, or an error if the items couldn’t be retrieved.
Type
Promise.<Array.<string>>
Example
const rightBarButtonItems = await this.pdfRef.current.getRightBarButtonItemsForViewMode('document');
// rightBarButtonItems: ['outlineButtonItem', 'searchButtonItem']
// or
// {'error' : 'Failed to get the right bar button items.'}

(static) getToolbar(viewModeopt) → {Promise.<Array.<string>>}

Gets the toolbar for the specified view mode.
Parameters:
Name Type Attributes Description
viewMode string <optional>
 The view mode to query. Options are: document, thumbnails, documentEditor, or null. If null is passed, the toolbar buttons for the current view mode are returned.
Source:
Returns:
A promise containing the toolbar object, or an error if it couldn’t be retrieved.
Type
Promise.<Array.<string>>
Example
const toolbar = await this.pdfRef.current.getToolbar('document');

(static) importXFDF(filePath) → {Promise.<any>}

Imports the supplied XFDF file into the current document.
Parameters:
Name Type Description
filePath string The path to the XFDF file to import.
Deprecated:
  • Since PSPDFKit for React Native 2.12. Use this.pdfRef.current?.getDocument().importXFDF() instead. See importXFDF().
Source:
Returns:
A promise containing an object with the result. true if the xfdf file was imported successfully, and false if an error occurred.
Type
Promise.<any>
Example
const result = await this.pdfRef.current.importXFDF('path/to/XFDF.xfdf');

(static) removeAnnotation(annotation) → {Promise}

Removes an existing annotation from the current document.
Parameters:
Name Type Description
annotation object The InstantJSON of the annotation to remove.
Deprecated:
  • Since PSPDFKit for React Native 2.12. Use this.pdfRef.current?.getDocument().removeAnnotations() instead. See removeAnnotations().
Source:
Returns:
A promise resolving to true if the annotation was removed successfully, and false if the annotation couldn’t be found or an error occurred.
Type
Promise
Example
const result = await this.pdfRef.current.removeAnnotation(instantJSON);

(static) removeAnnotations(annotation) → {Promise}

Removes the supplied document InstantJSON from the current document.
Parameters:
Name Type Description
annotation object The InstantJSON of the annotations to remove.
Deprecated:
  • Since PSPDFKit for React Native 2.12. Use this.pdfRef.current?.getDocument().removeAnnotations() instead. See removeAnnotations().
Source:
Returns:
A promise resolving to true if the annotations were removed successfully, and false if the annotations couldn’t be found or an error occurred.
Type
Promise
Example
const result = await this.pdfRef.current.removeAnnotations(instantJSON);

(static) saveCurrentDocument() → {Promise.<boolean>}

Saves the document that’s currently open.
Deprecated:
  • Since PSPDFKit for React Native 2.12. Use this.pdfRef.current?.getDocument().save() instead. See save().
Source:
Returns:
A promise resolving to true if the document was saved, and false if not.
Type
Promise.<boolean>
Example
const result = await this.pdfRef.current.saveCurrentDocument();

(static) selectAnnotations(annotations) → {Promise.<any>}

Select one or more annotations.
Parameters:
Name Type Description
annotations object An array of the annotations to select in Instant JSON format.
Source:
Returns:
A promise containing the result of the operation. true if the annotations were selected, false otherwise.
Type
Promise.<any>
Example
const result = await this.pdfRef.current?.selectAnnotations(annotations);

(static) setAnnotationFlags(uuid, flags) → {Promise.<boolean>}

Sets the flags of the specified annotation.
Parameters:
Name Type Description
uuid string The UUID of the annotation to update.
flags Array.<Annotation.Flags> The flags to apply to the annotation.
Source:
Returns:
A promise resolving to true if the annotations were added successfully, and false if an error occurred.
Type
Promise.<boolean>
Example
const result = await this.pdfRef.current.setAnnotationFlags('bb61b1bf-eacd-4227-a5bf-db205e591f5a', ['locked', 'hidden']);

(static) setFormFieldValue(fullyQualifiedName, value) → {Promise.<boolean>}

Sets the form field value of the supplied form field name.
Parameters:
Name Type Description
fullyQualifiedName string The fully qualified name of the form element. When using form elements such as radio buttons, the individual elements can be accessed by appending the index to the fully qualified name, for example choiceElement.0 and choiceElement.1.
value string The new string value of the form element. For button form elements, pass selected or deselected. For choice form elements, pass the index of the choice to select, for example 1.
Source:
Returns:
A promise resolving to true if the value was set successfully, and false if an error occurred.
Type
Promise.<boolean>
Example
const result = await this.pdfRef.current.setFormFieldValue('Name_Last', 'Appleseed');

(static) setLeftBarButtonItems(items, viewModeopt, animatedopt)

Sets the left bar button items for the specified view mode. Note: The same button item cannot be added to both the left and right bar button items simultaneously.
Parameters:
Name Type Attributes Description
items Array.<string> The list of bar button items.
viewMode string <optional>
 The view mode for which the bar buttons should be set. Options are: document, thumbnails, documentEditor, or null. If null is passed, the bar button items for all the view modes are set.
animated boolean <optional>
 Specifies whether changing the bar buttons should be animated.
Source:
See:
Example
const result = await this.pdfRef.current.setLeftBarButtonItems(
   ['searchButtonItem', 'thumbnailsButtonItem'],
   'document',
   true);

(static) setMeasurementValueConfigurations(configurations)

Sets the measurement value configurations for the PSPDFKitView.
Parameters:
Name Type Description
configurations Array.<MeasurementValueConfiguration> The array of MeasurementValueConfiguration objects that should be applied to the document.
Source:
Example
const scale: MeasurementScale = {
   unitFrom: Measurements.ScaleUnitFrom.INCH,
   valueFrom: 1.0,
   unitTo: Measurements.ScaleUnitTo.INCH,
   valueTo: 2.54
 };

 const measurementValueConfig: MeasurementValueConfiguration = {
   name: 'Custom Scale',
   scale: scale,
   precision: Measurements.Precision.FOUR_DP
 };

 const configs = [measurementValueConfig];
 await this.pdfRef.current?.setMeasurementValueConfigurations(configs);

(static) setRightBarButtonItems(items, viewModeopt, animatedopt)

Sets the right bar button items for the specified view mode. Note: The same button item cannot be added to both the left and right bar button items simultaneously.
Parameters:
Name Type Attributes Description
items Array.<string> The list of bar button items.
viewMode string <optional>
 The view mode for which the bar buttons should be set. Options are: document, thumbnails, documentEditor, or null. If null is passed, the bar button items for all the view modes are set.
animated boolean <optional>
 Specifies whether changing the bar buttons should be animated.
Source:
See:
Example
const result = await this.pdfRef.current.setRightBarButtonItems(
   ['searchButtonItem', 'thumbnailsButtonItem'],
   'document',
   true);

(static) setToolbar(toolbar)

Sets the Toolbar object to customize the toolbar appearance and behaviour.
Parameters:
Name Type Description
toolbar Toolbar The toolbar object.
Source:
Example
const toolbar = {
		// iOS
		rightBarButtonItems: {
		  viewMode: Toolbar.PDFViewMode.VIEW_MODE_DOCUMENT,
		  animated: true,
		  buttons: ['searchButtonItem', 'readerViewButtonItem']
		},
		// Android
		toolbarMenuItems: {
		  buttons: ['searchButtonItem', 'readerViewButtonItem']
	  },
	}
	this.pdfRef.current.setToolbar(toolbar);

(static) setToolbarMenuItems(toolbarMenuItems)

Customizes the visible toolbar menu items for Android.
Parameters:
Name Type Description
toolbarMenuItems Array.<string> The list of bar button items.
Source:
See:
Example
const result = await this.pdfRef.current.setToolbarMenuItems(['searchButtonItem', 'readerViewButtonItem']);