Guides

Main Toolbar

The main toolbar in ComPDF is designed to be flexible and highly configurable. This guide demonstrates how to define main toolbar options and add completely custom menu items.

This section covers:

• Configuring existing toolbar button items
• Adding more menu options
• Customizing menu options

Default Toobar

The default toolbar contains the following tools.

Android	iOS

Customizing the Toolbar Buttons

You can customize the main toolbar buttons when displaying a PDF using the toolbarLeftItems and toolbarRightItems properties. The following example demonstrates how to configure toolbars differently for each platform, such as hiding menu buttons on iOS and customizing Android toolbar menu items:

<CPDFReaderView
  ref={pdfReaderRef}
  document={samplePDF}
  onIOSClickBackPressed={handleBack}
  configuration={ComPDFKit.getDefaultConfig({
    toolbarConfig: {
      toolbarLeftItems: Platform.OS === "android" ? [
        'back', 'thumbnail'
      ] : [
        'back'
      ],
      toolbarRightItems: Platform.OS === "android" ? [
        'search',
        'bota'
      ] : [
        'search',
        'thumbnail',
        'bota',
        'menu'
      ]
    }
  })}
  />

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

Android	iOS

Available Toolbar Option Types

Toolbar Button Item	Description
back	Displays a close button.
thumbnail	Displays a thumbnail button.
search	Displays a search button.
bota	Displays the outline, bookmarks, and annotations list button.
menu	Displays a menu button.
viewSettings	Opens the settings view to configure scroll direction, display mode, theme color, and other related settings.
documentEditor	Opens the document thumbnail list, allowing users to delete, rotate, or add pages in the view.
documentInfo	Opens the document info view to display basic document details and permissions.
watermark	Opens the watermark editing view to add text and image watermarks and save them as a new document.
security	Opens the security settings view to set document open password and permissions password.
flattened	Flattens annotations in the document; annotations will no longer be editable.
save	Saves the PDF document.
share	Opens the system share feature.
openDocument	Opens the system file picker to open a new PDF document.
custom	Custom menu option.

More Menu

By configuring CPDFToolbarAction.menu in the main toolbar, you can display additional menu options. Clicking on it will display a dialog with more functionality choices. Configure the more menu using availableMenus, following the same configuration method as toolbar buttons.

Here is a configuration example:

Here is a configuration example:

<CPDFReaderView
  ref={pdfReaderRef}
  document={samplePDF}
  onIOSClickBackPressed={handleBack}
  configuration={ComPDFKit.getDefaultConfig({
    toolbarConfig: {
      availableMenus: [
        CPDFToolbarAction.VIEW_SETTINGS,
        CPDFToolbarAction.DOCUMENT_EDITOR,
        CPDFToolbarAction.DOCUMENT_INFO,
        CPDFToolbarAction.WATERMARK,
        CPDFToolbarAction.SECURITY,
        CPDFToolbarAction.FLATTENED,
        CPDFToolbarAction.SAVE,
        CPDFToolbarAction.SHARE,
        CPDFToolbarAction.OPEN_DOCUMENT,
        CPDFToolbarAction.SNIP,
      ]
    }
  })}
  />

Custom Menus

In version 2.6.0 and higher, you can add custom menu options using the customToolbarLeftItems, customToolbarRightItems, and customMoreMenuItems properties.

Two customization methods are provided:

• Modify the icon and title of existing menu options
• Add completely custom menu options

Here is a configuration example:

const customToolbarConfig: CPDFToolbarConfig = {
  customToolbarLeftItems: [
    {
      action: "back"
    },
    {
      action: "custom",                          // Custom button, must be custom
      identifier: "custom_editor_action",        // Custom identifier, required
      icon: "ic_test_edit",                      // Custom icon
    },
  ],
  customToolbarRightItems: [
    {
      action: "bota",
      icon: "ic_test_book",
    },
    {
      action: "custom",
      identifier: "custom_text_search_action",
      icon: "ic_test_search",
    },
    {
      action: "menu",
      icon: "ic_test_more",
    },
  ],
  customMoreMenuItems: [
    {
      action: "viewSettings"
    },
    {
      action: "custom",                          // Custom button, must be custom
      title: "Custom Share",                     // Option name in more menu
      icon: "ic_test_share",                     // Icon in more menu
      identifier: "custom_share",                // Custom menu identifier, required
    }
  ],
};

Parameter Description

Parameter	Description
action	Required parameter, specifies the menu option to customize, refer to CPDFToolbarAction.
identifier	Required parameter (for custom menus only), unique identifier for the custom menu option.
icon	Optional parameter, specifies the icon for the menu option. Supports local resource image names or file paths.
title	Optional parameter, specifies the title text for the menu option. Only takes effect in more menu.

Adding Custom Menu Click Events

Only when using action = custom for custom menu options, you need to handle click events through the onCustomToolbarItemTapped callback:

<CPDFReaderView
  ref={pdfReaderRef}
  document={samplePDF}
  configuration={ComPDFKit.getDefaultConfig({
    toolbarConfig: customToolbarConfig,
  })}
  onIOSClickBackPressed={handleBack}
  onCustomToolbarItemTapped={(identifier) =>{
    if (identifier === 'custom_text_search_action') {
      console.log('Custom Search Action Tapped');
      // Handle custom search operation
    } else if (identifier === 'custom_editor_action') {
      console.log('Custom Editor Action Tapped');
      // Handle custom editor operation
    } else if (identifier === 'custom_share') {
      console.log('Custom Share Action Tapped');
      // Handle custom share operation
    }
  }}
  />

Adding Custom Icons

To customize menu icons, you need to add icon resources separately for Android and iOS platforms:

• Android: Place icon files (such as ic_test_search.png) in the android/app/src/main/res/drawable directory.
• iOS: Add icon files (such as ic_test_search.png) to the ios/Runner/Assets.xcassets asset catalog.