Guides

Create Text and Images

The ComPDF React Native SDK provides convenient APIs for creating text and image content.

Create Text

This method inserts a new text area on a specified page. It creates a text box within the page coordinate system and writes the provided text content into it. The coordinate origin (0, 0) is located at the bottom-left corner of the page.

Parameters:

• pageIndex: The index of the target page where the text will be inserted, starting from 0.
• content: The text content to insert.
• offset: The position of the text area’s bottom-left corner in the PDF page coordinate system (unit: points).
• maxWidth: The maximum width of the text area. Text will wrap automatically if it exceeds this width. If null, the width is unrestricted.
• attr: Text attributes such as font size, color, alignment, etc. Defaults to the standard CPDFEditorTextAttr configuration.

Example:

await pdfReaderRef.current?._pdfDocument.createNewTextArea({
  pageIndex: 0,
  content: "Hello, ComPDF!",
  offset: { x: 100, y: 700 },
  maxWidth: 200,
  attr: {
    fontSize: 30,
    fontColor: "#2A2F2F",
    fontColorAlpha: 255,
    alignment: CPDFAlignment.LEFT,
    familyName: "Times",
    styleName: "Bold",
  },
});

Note: In version 2.6.0, this feature is currently supported only on Android. iOS support will be added in future releases.

Create Image

This method inserts a new image area on a specified page. It creates an image box within the page coordinate system. The coordinate origin (0, 0) is located at the bottom-left corner of the page.

Parameters:

• pageIndex: The index of the target page where the image will be inserted, starting from 0.
• imageData: The image data to insert. Supported formats include:
  • File path: CPDFImageData.fromPath('/path/to/image.png')
  • Base64: CPDFImageData.fromBase64('iVBORw0KGgo...')
  • Asset: CPDFImageData.fromAsset('assets/images/logo.png')
  • URI (Android only): CPDFImageData.fromUri('content://...')
• offset: The position of the image area’s bottom-left corner in the PDF page coordinate system (unit: points).
• width: The width of the image area. The height will be calculated automatically based on the image’s aspect ratio. If null, the original image width is used.

Example:

// From file path
const imageData = CPDFImageData.fromPath(uri);
await pdfReaderRef.current?._pdfDocument.createNewImageArea({
  pageIndex: 0,
  offset: { x: 100, y: 400 },
  width: 300,
  imageData: imageData,
});

// From Base64
const base64String = 'iVBORw0KGgoAAAANSUhEU...'; // truncated for brevity
await pdfReaderRef.current?._pdfDocument.createNewImageArea({
  pageIndex: 0,
  offset: { x: 100, y: 400 },
  width: 200,
  imageData: CPDFImageData.fromBase64(base64String)
});

// From asset
await pdfReaderRef.current?._pdfDocument.createNewImageArea({
  pageIndex: 0,
  offset: { x: 100, y: 400 },
  width: 200,
  imageData: CPDFImageData.fromAsset('sign/signature_1.png')
});

Note: In version 2.6.0, this feature is currently supported only on Android. iOS support will be added in future releases.

Auto-Creation of Text Input & Image Picker

In content editing mode, tapping on a PDF page will automatically create a text input box or pop up an image picker for quick content insertion. In version 2.6.0, you can disable this feature using the following configuration:

ComPDFKit.getDefaultConfig({
  readerViewConfig: {
    enableCreateEditTextInput: false,
    enableCreateImagePickerDialog: false,
  },
})