Add Image Watermark

ComPDFKit React Native SDK supports adding image watermarks through a UI dialog. You can configure default watermark styles such as image source, opacity, and rotation angle in CPDFConfiguration.

// Set default image watermark style in configuration
ComPDFKit.getDefaultConfig({
  global: {
    watermark: {
      types: ['text', 'image'],
      image: 'ic_logo',
      opacity: 120,
      rotation: -45      
    }
  }
});

// Open the add watermark dialog via API
await pdfReaderRef.current?.showAddWatermarkView({
  types: ['text', 'image'],
  image: 'ic_logo',
  opacity: 120,  
  rotation: -45,
  opacity: 255,
});

To customize the default image, you need to handle it differently on Android and iOS.

Android

1. Add the image file to your resource directory:

android/app/src/main/res/drawable/ic_logo.png

2. Reference the image by its filename without extension in your code:

image: 'ic_logo'

iOS

1. Import the image file into your project through Xcode.

<img src="./screenshots/guides_rn_3.7.4_1.png" alt="guides_rn_3.7.4_1" style="zoom:50%;" />

2. Reference the image by its filename without extension in your code:

image: 'ic_logo'

Alternative Approach

You can also copy the image to the device’s local storage and pass its file path directly:

// Assume imagePath is the local file path of the image
const imagePath = 'data/user/0/com.compdfkit.reactnative.example/cache/temp/ic_logo.png';

await pdfReaderRef.current?.showAddWatermarkView({
  types: ['text', 'image'], 
  image: imagePath,
  opacity: 120,  
  rotation: -45,
  opacity: 255,
});