add multiple icons and texts with a single function

[k2-ux]

Describe the bug I want to set the icons and texts with a single function to achieve something like the image attached

Devlopment environment(please complete the following information):

react-native: 0.72.5 react-native-image-marker : 1.1.x Smartphone (please complete the following information):

Device: emulator & device OS: android (for now) Additional context it is something close to a watermark

[JimmyDaddy]

Hello, currently no API can set both image and text watermarks at the same time. You can try setting them in separate steps.

let res = await Marker.markText(textOptions);
res = await Marker.markImage({ backgroundImage: { src: res }, ...imageOptions });

[MoinVnr]

How can i add watermarkImages and watermarkTexts in single function so now I'm able to achieve with different function for markImage and markText. @JimmyDaddy

const overlayedImage = await ImageMarker.markImage({ backgroundImage: { src: data.uri, scale: 1, }, quality: 100, filename: 'ImageMarker', saveFormat: 'png', watermarkImages: [ { src: markerLogo, scale: 8, position: { position: Position.topRight, }, }, ], }); // Overlay Marker Text const overlayedText = await ImageMarker.markText({ backgroundImage: { src: data.uri, scale: 1, }, quality: 100, filename: 'TextMarker', saveFormat: 'png', watermarkTexts: [{ text: ${dateTime}\n${locationAddress}, position: { position: Position.bottomCenter, }, style: { color: '#217157', fontSize: 180, fontName: 'Arial', }, }], }); Aslso try below code but not working so please help with this issue.

let res = await Marker.markText(textOptions); res = await Marker.markImage({ backgroundImage: { src: res }, ...imageOptions });

[MoinVnr]

Hey @JimmyDaddy and @k2-ux I want to set both image and text watermarks at the same time in single fuction so please help me with this issue

[zoobibackups]

import { StyleSheet, Text, View, TextInput, TouchableOpacity, Image, ActivityIndicator, ScrollView, } from 'react-native'; import React, {useState} from 'react'; import {launchImageLibrary} from 'react-native-image-picker'; import Marker, { Position, TextBackgroundType, ImageFormat, ImageMa } from 'react-native-image-marker'; import {RFValue} from 'react-native-responsive-fontsize'; import {hp, wp} from '../constants/scaling';

const WaterMarkImage = () => { const [loading, setLoading] = useState(false); const [show, setShow] = useState(false); const [image, setImage] = useState(null); const [uri, setUri] = useState(''); const [position, setPosition] = useState(Position.center); const [watermarkText, setWatermarkText] = useState('');

async function mark() { console.log("Current Position:", position); setLoading(true); try { const options = { backgroundImage: { src: image, scale: 1, }, watermarkTexts: [ { text: watermarkText, position: { position }, // This should reflect the latest position state style: { color: '#ff00ff', fontSize: RFValue(30), fontName: 'Arial', shadowStyle: { dx: 10, dy: 10, radius: 10, color: '#008F6D', }, textBackgroundStyle: { padding: '10% 10%', type: TextBackgroundType.none, color: '#0FFF00', }, }, }, ], scale: 1, quality: 100, filename: 'test', saveFormat: ImageFormat.png, };

  const result = await Marker.markText(options);
  console.log(result, 'Watermarked image result');
  setUri(`file://${result}`);
  setShow(true);
} catch (error) {
  console.error('Error marking image:', error);
} finally {
  setLoading(false);
}

}

async function pickImage() { const response = await launchImageLibrary({ quality: 0.5, mediaType: 'photo', maxWidth: 2000, maxHeight: 2000, selectionLimit: 1, });

if (response.didCancel) {
  console.log('User cancelled photo picker');
} else if (response.errorCode) {
  console.log('ImagePickerManager Error: ', response.errorMessage);
} else {
  const myUri = response.assets?.[0]?.uri;
  setImage(myUri);
}

}

return (

WaterMark Image Select Image {image && ( <> Add Watermark )} {loading && } {show && uri ? ( ) : null} setPosition(Position.topLeft)} style={styles.positionButton}> Top Left setPosition(Position.topRight)} style={styles.positionButton}> Top Right setPosition(Position.topCenter)} style={styles.positionButton}> Top Center setPosition(Position.bottomLeft)} style={styles.positionButton}> Bottom Left setPosition(Position.bottomRight)} style={styles.positionButton}> Bottom Right setPosition(Position.bottomCenter)} style={styles.positionButton}> Bottom Center

); };

const styles = StyleSheet.create({ container: { flex: 1, padding: 20, justifyContent: 'center', backgroundColor: 'red', }, title: { fontSize: 24, marginBottom: 20, }, button: { backgroundColor: '#007BFF', padding: 15, borderRadius: 5, alignItems: 'center', marginBottom: 10, }, buttonText: { color: '#fff', fontSize: 16, }, imagePreview: { width: '100%', height: 300, borderRadius: 5, resizeMode: 'cover', }, input: { height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 10, paddingHorizontal: 10, }, positionButton: { backgroundColor: 'lightgray', width: wp(40), height: hp(4), justifyContent: 'center', alignItems: 'center', margin: 5, }, });

export default WaterMarkImage; im current working of postion but cannot handle when i click on the seprate buttons when click cannot changed the position