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 of the interaction APIs are available on NutrientView, 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:

<NutrientView
  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 (
      <NutrientView
        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;