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 ( <ScrollView> <View style={styles.container}> <Text style={styles.title}>WaterMark Image</Text> <TouchableOpacity onPress={pickImage} style={styles.button}> <Text style={styles.buttonText}>Select Image</Text> </TouchableOpacity>

    {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