Choose X/Y position

[asuri0n]

I would like to be able to add multiple things (texts, images) inside a banner, to chose the exact X/Y position.

I want to achieve something like this

[JimmyDaddy]

PositionOptions supports those formats

positionOptions: {
 X: 10,
 Y: 10,
}
// or
positionOptions: {
 position: Position.topLeft,
}
// or
positionOptions: {
 X: '10%', // relative to the background image's width
 Y: '10%', // relative to the background image's height
}

You can add texts at first, then add images using relative position(Don't support add multiple different type of things within one call for now).

import Marker from "react-native-image-marker"
···
// add text first
const options = {
  backgroundImage: {
    src: require('./images/test.jpg'),
    scale: 1,
  },
  watermarkTexts: [{
    text: 'text text \n multiple line text',
    positionOptions: {
      X: '10%',
      Y: '40%',
    },
    style: {
      ...
    },
  }, {
    text: 'text text 1',
    positionOptions: {
      X: '30%',
      Y: '40%',
    },
    style: {
      ...
    },
  }],
  scale: 1,
  quality: 100,
  filename: 'test',
  saveFormat: ImageFormat.png,
  maxSize: 1000,
};
const res = await ImageMarker.markText(options);

// then add images

const imageOptions = {
 backgroundImage: {
   src: res,
 },
 quality: 100,
 filename: 'final_result',
 saveFormat: ImageFormat.png,
 watermarkImages: [
   {
     src: require('./images/logo.png'),
     position: {
      X: '40%',
      Y: '40%',
     },
   },
   {
     src: require('./images/logo1.png'),
     position: {
      X: '80%',
      Y: '40%',
    },
   },
 ],
};

await ImageMarker.markImage(imageOptions);