Guides

Add Text Watermark

ComPDF supports two ways to add text watermarks:

Programmatic Approach

Use createTextWatermark with document.createWatermark to create a text watermark. This method is suitable for scenarios where watermarks need to be generated automatically in code.

import {
  CPDFReaderView,
  createTextWatermark,
} from "@compdfkit_pdf_sdk/react_native";

const pdfReaderRef = useRef<CPDFReaderView>(null);

const addTextWatermark = async () => {
  const result = await pdfReaderRef.current?._pdfDocument.createWatermark(
    createTextWatermark({
      textContent: "ComPDF",
      pages: [0, 1, 2, 3],
      textColor: "#FF0000",
      fontSize: 60,
      scale: 1,
      rotation: 0,
      opacity: 1,
      horizontalAlignment: "center",
      verticalAlignment: "center",
    })
  );

  console.log("Add text watermark result:", result);
};

UI Popup Approach

ComPDF React Native SDK also supports adding text watermarks through a UI dialog. You can configure default watermark styles, such as text, color, and font size, in CPDFConfiguration.

// Set default text watermark style in configuration
ComPDFKit.getDefaultConfig({
  global: {
    watermark: {
      types: ['text', 'image'],
      text: 'ComPDF-RN',
      textColor: '#000000',
      textSize: 36,
      rotation: -45,
      opacity: 255,
    }
  }
})

// Open the add watermark dialog via API
await pdfReaderRef.current?.showAddWatermarkView({
  types: ['text', 'image'],
  text: 'ComPDF RN',
  textColor: '#000000',
  textSize: 36,
  rotation: -45,
  opacity: 255,
});