---
title: "Customize toolbar in React Native PDF Viewer | Nutrient SDK"
canonical_url: "https://www.nutrient.io/guides/react-native/user-interface/toolbars/main-toolbar/"
md_url: "https://www.nutrient.io/guides/react-native/user-interface/toolbars/main-toolbar.md"
last_updated: "2026-05-15T19:10:05.060Z"
description: "Learn how to flexibly configure and customize the main toolbar in Nutrient for both iOS and Android with our comprehensive guide."
---

# Customizing the toolbar in our React Native viewer

The main toolbar in Nutrient 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 under the `Toolbar` object to customize the main toolbar’s buttons when loading the [`NutrientView`](https://www.nutrient.io/api/react-native/NutrientView.html). 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:

```js

<NutrientView
	document={DOCUMENT}
	toolbar={{
		// iOS only.
		leftBarButtonItems: {
			viewMode: 'document',
			animated: true,
			buttons: ['settingsButtonItem'],
		},
		// iOS only.
		rightBarButtonItems: {
			viewMode: 'document',
			animated: true,
			buttons: [
				'searchButtonItem',
				'thumbnailsButtonItem',
				'annotationButtonItem',
			],
		},
		// Android only.
		toolbarMenuItems: {
			buttons: [
				'annotationButtonItem',
				'settingsButtonItem',
				'searchButtonItem',
				'thumbnailsButtonItem',
			],
		},
	}}
	ref={this.pdfRef}
	fragmentTag="PDF1"
/>

```

The customized toolbar will look like what’s shown below.

| iOS                                                                                                                                 | Android                                                                                                                                     |
| ----------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
|  |  |

Additionally, you can use `setToolbar(toolbar)` to set the `leftBarButtonItems` or `rightBarButtonItems` on iOS and `toolbarMenuItems` on Android to customize the toolbar items after the [`NutrientView`](https://www.nutrient.io/api/react-native/NutrientView.html) is loaded. The example below shows how the main toolbar’s button items can be updated using a button:

```js

<Button
	onPress={async () => {
		// Update the right bar buttons for iOS and toolbar buttons for Android.
		const toolbar = {
			// iOS only.
			rightBarButtonItems: {
				viewMode: 'document',
				animated: true,
				buttons: ['searchButtonItem', 'readerViewButtonItem'],
			},
			// Android only.
			toolbarMenuItems: {
				buttons: ['searchButtonItem', 'readerViewButtonItem'],
			},
		};
		await this.pdfRef.current?.setToolbar(toolbar);
	}}
	title="Update the right bar button items"
/>

```

The new customized toolbar will look like the following image.

| iOS                                                                                                                                  | Android                                                                                                                                      |
| ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------- |
|  |  |

## Available toolbar customization options

View the list of available toolbar button items in the [NutrientView API reference](https://www.nutrient.io/api/react-native/Toolbar.html#.DefaultToolbarButton).

For more details and sample code, see the [`ToolbarCustomization.tsx` example](https://github.com/PSPDFKit/react-native/tree/master/samples/Catalog/examples/ToolbarCustomization.tsx) from the [Catalog example project](https://www.nutrient.io/guides/react-native/prebuilt-solutions/example-projects.md#pspdfkit-catalog).

### Using custom buttons

To add a custom button to the main toolbar, you can include custom button objects inside the same `leftBarButtonItems` or `rightBarButtonItems` props on iOS and the `toolbarMenuItems` prop on Android, inside the `Toolbar` object. On iOS, the `image` needs to be included in your application bundle, and on Android, it needs to be specified as a drawable resource.

The `id` is used to uniquely identify the button when it’s tapped and the `onCustomToolbarButtonTapped` callback is triggered. This can be any value; however, on Android, the `id` also needs to be specified as a resource item inside your application’s `ids.xml` file:

```xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <item name="custom_action" type="id"/>
</resources>

```

```jsx

<NutrientView
	document={DOCUMENT}
	toolbar={{
		// iOS only.
		leftBarButtonItems: {
			viewMode: 'document',
			animated: true,
			buttons: [
				'settingsButtonItem',
				{
					image: 'customImage.png',
					id: 'myCustomButton',
				}
			],
		},
		// iOS only.
		rightBarButtonItems: {
			viewMode: 'document',
			animated: true,
			buttons: ['searchButtonItem'],
		},
		// Android only.
		toolbarMenuItems: {
			buttons: [
				'thumbnailsButtonItem',
				{
					image: 'example_toolbar_icon',
					id: 'custom_action',
					title: 'Android title',

				}
			],
		},
	}}
	onCustomToolbarButtonTapped={(event) => {
    	Alert.alert('Nutrient', `Custom button tapped: ${JSON.stringify(event)}`);
	}}
	ref={this.pdfRef}
	fragmentTag="PDF1"
/>

```

The customized toolbar will look like the following image, showing the custom button.

| iOS                                                                                                                                 | Android                                                                                                                                     |
| ----------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
|  |  |

When the custom button is tapped, the `onCustomToolbarButtonTapped` callback will be called with the `id` you supplied during creation. The stock `Nutrient` buttons will execute their default actions without triggering the `onCustomToolbarButtonTapped` callback.
---

## Related pages

- [Customizing the annotation toolbar in our React Native viewer](/guides/react-native/user-interface/toolbars/annotation-toolbar.md)