---
title: "Customize annotation toolbar in React Native PDF viewer | Nutrient"
canonical_url: "https://www.nutrient.io/guides/react-native/user-interface/toolbars/annotation-toolbar/"
md_url: "https://www.nutrient.io/guides/react-native/user-interface/toolbars/annotation-toolbar.md"
last_updated: "2026-05-18T12:22:04.666Z"
description: "The Nutrient annotation toolbar has been designed to be flexible and highly configurable. This article shows how to customize it."
---

# Customizing the annotation toolbar in our React Native viewer

The Nutrient annotation toolbar has been designed to be flexible and highly configurable. This article shows how to customize it.

## Presentation

You can show or hide the annotation toolbar using the annotation button in the main toolbar.

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

If you want to invoke the annotation toolbar programmatically, you can do so using the `enterAnnotationCreationMode()` and `exitCurrentlyActiveMode()` functions of the PSPDFKit view:

```js

// Show the annotation toolbar.
this.pdfRef.current?.enterAnnotationCreationMode();...

// Hide the annotation toolbar.
this.pdfRef.current?.exitCurrentlyActiveMode();

```

For more details and sample code, see the [`ToolbarCustomization.tsx` example](https://github.com/PSPDFKit/react-native/blob/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).

## Customizing the toolbar buttons

You can use the `menuItemGrouping` prop to customize the annotation tools in the annotation toolbar. The example below shows how to add the free text, markup (highlight and underline), ink, and image annotation tools in the annotation toolbar:

```js

<NutrientView
	document={DOCUMENT}
	menuItemGrouping={[
		'freetext',
		{ key: 'markup', items: ['highlight', 'underline'] },
		'ink',
		'image',
	]}
	ref={this.pdfRef}
	fragmentTag="PDF1"
/>

```

The customized annotation toolbar will look like this:

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

You can see the list of available annotation toolbar tools [here](https://www.nutrient.io/api/react-native/Annotation.html#.Type):

### Using custom buttons

To add a custom button to the annotation toolbar, refer to our [video tutorial and blog post about how to bridge native iOS code to React Native](https://www.nutrient.io/blog/how-to-bridge-native-ios-code-to-react-native/).



### Annotation preset customization

You can customize the default properties of the annotation tools using the `annotationPresets` prop. The example below shows how to set default properties for the ink and free text annotation tools:

```jsx

<NutrientView
	document={exampleDocumentPath}
	annotationPresets={{
		inkPen: {
			defaultThickness: 50,
			minimumThickness: 1,
			maximumThickness: 60,
			defaultColor: '#99cc00',

		},
		line: {
			defaultColor: '#99cc00',

			defaultLineEnd: 'openArrow,openArrow',
			defaultBorderStyle: Annotation.BorderStyle.DASHED_3_3,
		},
		freeText: {
			defaultTextSize: 30,
			defaultColor: '#FF0000',

		},
		measurementDistance: {
			defaultLineEnd: 'circle,circle',
			defaultColor: '#99cc00',

			defaultBorderStyle: 'dashed_1_3',
		},
	}}
	fragmentTag="PDF1"
/>

```

#### Available preset configuration options

The table below links to the configuration options available for each annotation type.

| Annotation type       | Configuration options                      |
| --------------------- | ------------------------------------------ |
| Ink                   | [`AnnotationPresetInk`](https://www.nutrient.io/api/react-native/Annotation.html#.AnnotationPresetInk)                  |
| Free text             | [`AnnotationPresetFreeText`](https://www.nutrient.io/api/react-native/Annotation.html#.AnnotationPresetFreeText)             |
| Shape                 | [`AnnotationPresetShape`](https://www.nutrient.io/api/react-native/Annotation.html#.AnnotationPresetShape)                |
| Line                  | [`AnnotationPresetLine`](https://www.nutrient.io/api/react-native/Annotation.html#.AnnotationPresetLine)                 |
| Markup                | [`AnnotationPresetMarkup`](https://www.nutrient.io/api/react-native/Annotation.html#.AnnotationPresetMarkup)               |
| Stamp                 | [`AnnotationPresetStamp`](https://www.nutrient.io/api/react-native/Annotation.html#.AnnotationPresetStamp)                |
| Note                  | [`AnnotationPresetNote`](https://www.nutrient.io/api/react-native/Annotation.html#.AnnotationPresetNote)                 |
| Redaction             | [`AnnotationPresetRedact`](https://www.nutrient.io/api/react-native/Annotation.html#.AnnotationPresetRedact)               |
| Image                 | [`AnnotationPresetStamp`](https://www.nutrient.io/api/react-native/Annotation.html#.AnnotationPresetStamp)                |
| Measurement area      | [`AnnotationPresetMeasurementArea`](https://www.nutrient.io/api/react-native/Annotation.html#.AnnotationPresetMeasurementArea)      |
| Measurement distance  | [`AnnotationPresetMeasurementDistance`](https://www.nutrient.io/api/react-native/Annotation.html#.AnnotationPresetMeasurementDistance)  |
| Measurement perimeter | [`AnnotationPresetMeasurementPerimeter`](https://www.nutrient.io/api/react-native/Annotation.html#.AnnotationPresetMeasurementPerimeter) |
| Eraser                | [`AnnotationPresetEraser`](https://www.nutrient.io/api/react-native/Annotation.html#.AnnotationPresetEraser)               |

#### Options available for specific platforms

| Option             | Description                                    | Android | iOS |
| ------------------ | ---------------------------------------------- | ------- | --- |
| `blendMode`        | The blend mode of the annotation.              | ❌       | ✅   |
| `borderEffect`     | The border effect of the annotation.           | ❌       | ✅   |
| `maximumThickness` | Maximum annotation thickness.                  | ✅       | ❌   |
| `minimumThickness` | Minimum annotation thickness.                  | ✅       | ❌   |
| `maximumAlpha`     | Maximum possible opacity of the annotation.    | ✅       | ❌   |
| `minimumAlpha`     | Minimum possible opacity of the annotation.    | ✅       | ❌   |
| `minimumFontSize`  | Minimum font size of the free text annotation. | ✅       | ❌   |
| `maximumFontSize`  | Maximum font size of the free text annotation. | ✅       | ❌   |
| `availableFonts`   | Available fonts for the free text annotation.  | ✅       | ❌   |
| `showColorPicker`  | Whether to show the color picker.              | ✅       | ❌   |
---

## Related pages

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