Guides

Viewer

The ComPDF React Native SDK supports a variety of viewer events. Commonly used viewer events include:

Event Name	Description
onPageChanged	Triggered when the user changes pages. Returns the current page index.
onSaveCallback	Triggered when a document save operation is completed. Returns the save result.
onFillScreenChanged	Triggered when the user toggles full-screen mode. Returns whether full-screen is active.
onTapMainDocAreaCallback	Triggered when the user taps the PDF page area.
onPageEditDialogBackPress	Triggered when the user presses the back button in the page edit dialog.
onIOSClickBackPressed	iOS only. Triggered when the user clicks the top-left back button in CPDFReaderWidget.
onSearchBackButtonTapped	Triggered when the user taps the back button in the search view.
onAddWatermarkDialogDismissed	Triggered when the add watermark dialog is dismissed.
onViewCreated	Triggered when the component has been fully created.

To listen for these events, pass the corresponding callback functions when creating a CPDFReaderView. For example:

<CPDFReaderView
  ref={pdfReaderRef}
  document={samplePDF}
  configuration={configuration}
  onIOSClickBackPressed={handleBack}
  onViewCreated={() => {
    // Viewer created
  }}
  onPageChanged={(pageIndex) => {
    // Page changed
  }}
  onSaveDocument={() => {
    // Save document
  }}
  onFullScreenChanged={(isFullScreen) => {
    // Full-screen toggled
  }}
  onTapMainDocArea={() => {
    // User tapped PDF page
  }}
  onPageEditDialogBackPress={() => {
    // Back button in page edit dialog pressed
  }}
  onSearchBackButtonTapped={() => {
    // Search back button tapped
  }}
  onAddWatermarkDialogDismissed={() => {
    // Add watermark dialog dismissed
  }}
/>

onSearchBackButtonTapped is a parameterless callback. Use it to close a custom search bar, clear the current keyword, or reset search results on the React Native side.

onAddWatermarkDialogDismissed is also a parameterless callback. Use it after the watermark panel closes to restore custom controls, refresh watermark-related state, or continue your React Native watermark workflow.