Show or hide the UI in our React Native viewer

Nutrient React Native SDK offers a few ways to show or hide the user interface. The following table outlines the supported options.

OptionDescription
automaticThe toolbar and the user interface will show or hide when tapping on the page
automaticBorderPagesLike automatic, but the user interface will show on the first and last page of the document (only supported on Android)
automaticNoFirstLastPageLike automatic, but the user interface will show on the first and last page of the document (only supported on iOS)
alwaysVisibleThe user interface will always be visible
alwaysHiddenThe user interface will always be hidden

The user interface view mode can be changed using the userInterfaceViewMode configuration option. The example below shows how to use the automatic view mode:

<PSPDFKitView
  document={DOCUMENT}
  configuration={{
    userInterfaceViewMode: 'automaticNoFirstLastPage',
  }}
  ref="pdfView"
  fragmentTag="PDF1"
  style={{ flex: 1 }}
/>

Here’s how automatic view mode works:

AndroidiOS