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 && (
      <>
        <Image source={{uri: image}} style={styles.imagePreview} />
        <TextInput
          style={styles.input}
          placeholder="Enter watermark text"
          value={watermarkText}
          onChangeText={setWatermarkText}
        />
        <TouchableOpacity onPress={mark} style={styles.button}>
          <Text style={styles.buttonText}>Add Watermark</Text>
        </TouchableOpacity>
      </>
    )}

    {loading && <ActivityIndicator size="large" color="#0000ff" />}
    {show && uri ? (
      <Image source={{uri: uri}} style={styles.imagePreview} />
    ) : null}
  </View>

  <View
    style={{flexDirection: 'row', flexWrap: 'wrap', alignItems: 'center'}}>
    <TouchableOpacity
      onPress={() => setPosition(Position.topLeft)}
      style={styles.positionButton}>
      <Text>Top Left</Text>
    </TouchableOpacity>
    <TouchableOpacity
      onPress={() => setPosition(Position.topRight)}
      style={styles.positionButton}>
      <Text>Top Right</Text>
    </TouchableOpacity>
    <TouchableOpacity
      onPress={() => setPosition(Position.topCenter)}
      style={styles.positionButton}>
      <Text>Top Center</Text>
    </TouchableOpacity>
    <TouchableOpacity
      onPress={() => setPosition(Position.bottomLeft)}
      style={styles.positionButton}>
      <Text>Bottom Left</Text>
    </TouchableOpacity>
    <TouchableOpacity
      onPress={() => setPosition(Position.bottomRight)}
      style={styles.positionButton}>
      <Text>Bottom Right</Text>
    </TouchableOpacity>
    <TouchableOpacity
      onPress={() => setPosition(Position.bottomCenter)}
      style={styles.positionButton}>
      <Text>Bottom Center</Text>
    </TouchableOpacity>
  </View>
</ScrollView>

);
};

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