Customizing the Annotation Toolbar in Our React Native Viewer

The annotation toolbar in PSPDFKit has been designed to be flexible and highly configurable. This article shows how to customize the annotation toolbar.


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


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

// Show the annotation toolbar.


// Hide the annotation toolbar.

For more details and sample code, see the HiddenToolbar.tsx example from the Catalog example project.

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:

		{ key: 'markup', items: ['highlight', 'underline'] },

The customized annotation toolbar will look like this:


You can see the list of available annotation toolbar tools here:

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.

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:

		inkPen: {
			defaultThickness: 50,
			minimumThickness: 1,
			maximumThickness: 60,
			defaultColor: '#99cc00',
		freeText: {
			defaultTextSize: 30,
			defaultColor: '#FF0000',

Available Preset Configuration Options

The table below shows the configuration options available for each annotation type and platform.

Annotation Type Configuration Options Android iOS
Ink color, fillColor, alpha, thickness, blendMode
Free Text color, fillColor, alpha, fontSize, fontName, fillColor, alpha
Shape color, fillColor, alpha, thickness, borderStyle, borderEffect, blendMode
Line color, alpha, thickness, borderStyle, borderEffect, blendMode, lineEndStyle
Markup color, alpha, blendMode, thickness,
Stamp alpha, blendMode
Note color, alpha, iconName
Redaction color, fillColor, overlayText, repeatOverlayText, outlineColor
Image alpha, blendMode
Measurements color, alpha, thickness, blendMode, scale, precision

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.