Edit PDFs in React Native

Content editing

Nutrient React Native SDK enables you to edit text directly in PDF documents using the built-in user interface. Text is grouped by paragraphs, so you can edit multiple lines in a single text box. You can change the text color, the font type, and the font size, and you can move and resize text boxes.

Enabling content editing

To enable content editing, add the CONTENT_EDITING_BUTTON_ITEM toolbar item to the Toolbar object when you configure your NutrientView component:

toolbar={{
    // iOS only.
    rightBarButtonItems: {
      viewMode: Toolbar.PDFViewMode.VIEW_MODE_DOCUMENT,
      animated: true,
      buttons: [
        Toolbar.DefaultToolbarButton.CONTENT_EDITING_BUTTON_ITEM,
      ],
    },
    // Android only.
    toolbarMenuItems: {
      buttons: [
        Toolbar.DefaultToolbarButton.CONTENT_EDITING_BUTTON_ITEM,
      ],
    },
  }}

This will add the content editing button to the right side of the navigation bar for entering content editing mode.

Alternatively, to enable content editing after loading a document, use the enterContentEditingMode API:

this.pdfRef.current?.enterContentEditingMode();

Editing text in a PDF using the built-in UI

To edit text in a PDF using the built-in UI, follow these steps:

1. In the navigation toolbar, tap the Content Editor button.
2. Double-tap within a text box on the page.
3. Add or delete content in the text box.
4. In the keyboard accessory toolbar, change the text color, font type, or font size. This toolbar isn’t available on macOS.
5. In the navigation toolbar, click Done or the Content Editor button to save your changes.

Moving a text box

To move a text box, follow these steps:

1. Tap a text box to select it.
2. Drag the text box to a different location.

Resizing a text box

To resize a text box, follow these steps:

1. Tap a text box to select it.
2. Drag either of the two resize handles on the left or right side.

Supported text editing functionalities

The following text editing functionalities are supported:

• Adding new text and changing existing text using the colors and font types supported by Nutrient iOS SDK or Nutrient Android SDK.
• Adding new text and changing existing text using any font size.
• Adding bold and italic text and changing existing text to bold and italic.
• Selecting text with the native text selection handles or text selection gestures in the software keyboard.
• Selecting and editing text using a hardware keyboard paired with your device.
• Changing the size of a text box.
• Changing the location of a text box.

Limitations

Text editing currently comes with the following limitations:

• You can only edit left-to-right (LTR) text.
• Multistage text input isn’t supported. This is where multiple keystrokes form a single character. This may be used for Chinese, Japanese, and Korean text, as well as diacritics on Latin characters.
• There is no Save As, so documents must use a single, writable data provider.
• You cannot create new text boxes.
• You cannot undo changes while in content editing mode.
• You might not be able to recover text you move outside the page. To recover text moved outside the page, cancel content editing or restore a previous backup of the document.
• Changing text color, font type, or font size isn’t possible on macOS.

Document editing

Nutrient React Native SDK enables you to edit a document programmatically or using the built-in user interface. You can edit documents in the following ways:

• Move, reorder, and rotate pages.
• Add new pages or delete existing ones.
• Merge several PDFs into a single document, or split a PDF into several documents.

Enabling document editing

Document editing is available on the document thumbnail screen. To enable document editing, add the DOCUMENT_EDITOR_BUTTON_ITEM toolbar item to the Toolbar object when you configure your NutrientView component:

toolbar={{
    // iOS only.
    rightBarButtonItems: {
      viewMode: Toolbar.PDFViewMode.VIEW_MODE_DOCUMENT,
      animated: true,
      buttons: [
        Toolbar.DefaultToolbarButton.DOCUMENT_EDITOR_BUTTON_ITEM,
      ],
    },
    // Android only.
    toolbarMenuItems: {
      buttons: [
        Toolbar.DefaultToolbarButton.DOCUMENT_EDITOR_BUTTON_ITEM,
      ],
    },
  }}

To programmatically edit PDF documents, refer to our PDF generation guide.