Skip to main content
PESDK/React Native/Guides/User Interface

React Native Image Watermark

Learn how to easily configure watermarks for PhotoEditor SDK for React Native.

Watermark

You can configure a watermark image with its relative size and alignment, which is added permanently to the preview and the export.

If adding the watermark is the only editing operation to be performed, configuration.export.force must be enabled to have the watermark applied to the export.

All of the watermark configuration options are accessible using the configuration.watermark option:

const configuration: Configuration = {
watermark: {
watermarkURI: require("../../../assets/watermark.png"),
alignment: AlignmentMode.BOTTOM_LEFT,
size: 0.2,
inset: 0.05,
},
export: {
force: true,
},
};

WARNING: The watermark itself is not processed, so to achieve the effect of transparency, make sure that your input image supports that (use a PNG file with alpha channel).