Customizing page navigation in our React Native PDF viewer

After loading a PDF document in Nutrient, you can programmatically interact with it (e.g. scrolling to different pages). All the interaction APIs are available on the [NotificationCenter][notificationcenter].

Changing the current page

A user can change the current page in the UI by swiping on a device. Pages can also be programmatically changed using the pageIndex prop, like so:

<NutrientView
  document={DOCUMENT}
  // Navigate to the page index at index 4.
  pageIndex={4}
  ref={this.pdfRef}
  fragmentTag="PDF1"
  style={{ flex: 1 }}
/>

or by calling the setPageIndex method on the PDFDocument instance:

await this.pdfRef?.current?.getDocument().setPageIndex(4);

Getting the current page

To get the currently visible page index, you need to listen to the NotificationCenter.DocumentEvent.PAGE_CHANGED event, like so:

<NutrientView
  document={DOCUMENT}
  ref={this.pdfRef}
  fragmentTag="PDF1"
  style={{flex: 1}}
  // Register for the `PAGE_CHANGED` event.
  onReady={() => {
    this.pdfRef.current?.getNotificationCenter().subscribe(NotificationCenter.DocumentEvent.PAGE_CHANGED, (payload: NotificationCenter.DocumentPageChangedPayload) => {
      console.log(payload);
    });
  }}
/>