Customizing the Toolbar in Our React Native Viewer

The main toolbar in PSPDFKit is designed to be flexible and highly configurable. This guide shows how to customize it.

Default Toolbar

The default toolbar contains the following tools.


Customizing the Toolbar Buttons

You can use the leftBarButtonItems or rightBarButtonItems props on iOS and the toolbarMenuItems prop on Android to customize the main toolbar’s buttons when loading the PSPDFKitView. The example below shows how to add the settings button as the left bar button item in the navigation bar (main toolbar) on iOS and how to customize the Android toolbar menu items:

	// Only iOS.
	// Only for Android.

The customized toolbar will look like this:


Additionally, you can use setLeftBarButtonItems(items, viewMode, animated) or setRightBarButtonItems(items, viewMode, animated) on iOS and setToolbarMenuItems(items) on Android to customize the toolbar items after the PSPDFKitView is loaded. The example below shows how the main toolbar’s button items can be updated using a button:

	onPress={async () => {
		var items = ['searchButtonItem', 'readerViewButtonItem'];

		if (Platform.OS == 'ios') {
			// Update the right bar buttons for iOS.
			await this.refs.pdfView.setRightBarButtonItems(
		} else if (Platform.OS == 'android') {
			// Update the toolbar menu items for Android.
			await this.refs.pdfView.setToolbarMenuItems(items);
	title="Update the right bar button items"

The new customized toolbar will look like this:


Available Toolbar Customization Options

Due to platform differences, not all toolbar item options are available on both platforms. Below, you’ll see a table showing the options available on each platform:

Toolber Button Item iOS Android Description
settingsButtonItem Shows settings button item.
annotationButtonItem Shows annotation button item.
thumbnailsButtonItem Shows thumbnails button item.
readerViewButtonItem Shows reader view button item.
searchButtonItem Shows search button item.
bookmarkButtonItem Shows bookmark button item.
printButtonItem Shows print button item.
annotationListButtonItem Shows annotation list button item.
outlineButtonItem Shows outline button item.
shareButtonItem Shows share button item.
closeButtonItem Shows close button item.
documentEditorButtonItem Shows document editor button item.
openInButtonItem Shows open in button item.
emailButtonItem Shows email button item.
messageButtonItem Shows message button item.
brightnessButtonItem Shows brightness button item.
activityButtonItem Shows activity button item.

For more details and sample code, see the ToolbarCustomization.js example from the Catalog example project.

Using Custom Buttons

To add a custom button to the annotation toolbar, please refer to our video tutorial and blog post about how to bridge native iOS code to React Native.