Customizing page navigation in our React Native PDF viewer

After loading a PDF document in PSPDFKit, you can programmatically interact with it (e.g. scrolling to different pages). All of the interaction APIs are available on PSPDFKitView, which is the core PDF viewer.

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:

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

Getting the current page

To get the currently visible page index, you need to listen to the onStateChanged event, like so:

export default class App extends Component<{}> {
  constructor(props) {
    super(props);
    this.state = {
      currentPageIndex: 0,
    };
  }

  render() {
    return (
      <PSPDFKitView
        document={DOCUMENT}
        ref="pdfView"
        fragmentTag="PDF1"
        style={{flex: 1}}
        // Listen to the `onStateChanged` event.
        onStateChanged={event => {
          // Update the state’s current page index.
          this.setState({
            currentPageIndex: event.currentPageIndex,
          });
        }}
      />
    );
  }
}

...
// Get the current page index.
const currentPageIndex = this.state.currentPageIndex;