Customizing menus on React Native

When you select one or more annotations by tapping or right-clicking them on a page, Nutrient React Native SDK shows the annotation editing toolbar on Android and a popup menu on iOS. To use this feature, select an annotation and the toolbar or menu will be available by default. Read on to learn how you can customize annotation selection.

Android

iOS

Customizing the annotation selection menu

To insert a custom menu element into the annotation selection menu, add it to the buttons array inside the annotationContextualMenu object when creating your NutrientView component. On Android, the image needs to be specified as a drawable resource, and on iOS, the image needs to be included in your application bundle.

The id is used to uniquely identify the button. Then, when the button is tapped, the onCustomAnnotationContextualMenuItemTapped 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 version="1.0" encoding="utf-8"?>
<resources>
    <item name="custom_annotation_item" type="id"/>
</resources>

The following example demonstrates how to add a custom menu element to the annotation selection toolbar or menu:

<NutrientView
  document={DOCUMENT}
  annotationContextualMenu={{
    buttons: [
      {
        id: 'custom_annotation_item',
        image: 'example_annotation_icon',
        title: 'Custom', // Will be used on iOS. Omit to use image.
      },
    ],
    retainSuggestedMenuItems: true,
  }}
  onCustomAnnotationContextualMenuItemTapped={(result: any) => {
    Alert.alert(
      'Nutrient',
      `Custom annotation menu item tapped: ${JSON.stringify(
        result,
      )}`,
    );
  }}
  ref={this.pdfRef}
  fragmentTag="PDF1"
/>

The customized toolbar or menu will look like the following image, which shows the custom button.

Android	iOS

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

If you wish to show only your custom buttons and hide the suggested Nutrient buttons, you can set the retainSuggestedMenuItems property to false.

Customizing the text selection menu

When you select text in a document, Nutrient shows a text selection menu with actions like copying text and creating text markup annotations. You can customize the items shown in this menu by providing the textSelectionContextualMenu prop when creating your NutrientView component.

To insert a custom menu element into the text selection menu, add it to the buttons array inside the textSelectionContextualMenu object. On Android, the image needs to be specified as a drawable resource, and on iOS, the image needs to be included in your application bundle.

The id is used to uniquely identify the button. Then, when the button is tapped, the onCustomTextSelectionContextualMenuItemTapped 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 version="1.0" encoding="utf-8"?>
<resources>
    <item name="custom_text_item" type="id"/>
</resources>

The configuration works the same way as annotationContextualMenu: Define your custom buttons in the buttons array, and use retainSuggestedMenuItems to control whether the default Nutrient actions should remain visible alongside your custom items.

The following example demonstrates how to customize the text selection menu by mixing built-in menu items with a custom menu element:

<NutrientView
  document={DOCUMENT}
  textSelectionContextualMenu={{
    buttons: [
      Annotation.TextSelectionMenuItem.COPY,
      Annotation.TextSelectionMenuItem.HIGHLIGHT,
      {
        id: 'custom_text_item',
        image: 'example_annotation_icon',
        title: 'Text Action',
      },
    ],
    retainSuggestedMenuItems: false,
  }}
  onCustomTextSelectionContextualMenuItemTapped={(result: any) => {
    Alert.alert(
      'Nutrient',
      `Custom text selection contextual menu item tapped: ${JSON.stringify(
        result,
      )}`,
    );
  }}
  ref={this.pdfRef}
  fragmentTag="PDF1"
/>

For more details and sample code, see the AnnotationPresetCustomization.tsx example(opens in a new tab) from the Catalog example project.