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.

iOS	Android

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:

<PSPDFKitView
	document={DOCUMENT}
	// Only iOS.
	leftBarButtonItems={['settingsButtonItem']}
	rightBarButtonItems={[
		'searchButtonItem',
		'thumbnailsButtonItem',
		'annotationButtonItem',
	]}
	// Only for Android.
	toolbarMenuItems={[
		`annotationButtonItem`,
		'settingsButtonItem',
		'searchButtonItem',
		'thumbnailsButtonItem',
	]}
	ref="pdfView"
	fragmentTag="PDF1"
/>

The customized toolbar will look like this:

iOS	Android

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:

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

		if (Platform.OS == 'ios') {
			// Update the right bar buttons for iOS.
			await this.refs.pdfView.setRightBarButtonItems(
				items,
				'document',
				false,
			);
		} 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:

iOS	Android

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:

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.