How can i put a text cap icon in it's first character and last character

Question

I am using @react-pdf/[email protected] libracy to create a my own custom pdf. Now i have need a way to put a text cap icon to it's first and last character. Like this

but the problem is, if i render a svg image inside text, most of the styles are not working, like position, transform ect. Is there any way to get this approach.

<View style={{ flexDirection: "row", marginLeft: "20px", alignItems: "flex-end" }}>
                                    <View style={{ top: -1.5, position: "absolute", left: -2.5 }}>
                                        <Svg
                                            xmlns="http://www.w3.org/2000/svg"
                                            width={6}
                                            height={6}
                                            viewBox="0 0 6 6"
                                            fill="#fff"
                                        >
                                            <Path d="M6 1H1v5" stroke="#9AC440" />
                                        </Svg>
                                    </View>
                                    {/* <Text style={styles.profession}>{personalInfo?.profession}</Text> */}
                                    <Text
                                        style={{
                                            color: "#393B40",
                                            fontSize: "10px",
                                            fontWeight: 600,
                                        }}
                                        hyphenationCallback={(e) => breakName(e)}
                                    >
                                        {"Sr Deputy General Manager, Software Quality Assurance Engineer"}
                                    </Text>
                                    <View
                                        // render={(e) => console.log(e)}
                                        style={{
                                            marginLeft:
                                                getTextWidth(
                                                    "Sr Deputy General Manager, Software Quality Assurance Engineer",
                                                    { fontSize: 10, fontWeight: 600 }
                                                ) || 0,
                                        }}
                                    >
                                        <Svg
                                            xmlns="http://www.w3.org/2000/svg"
                                            width={6}
                                            height={6}
                                            viewBox="0 0 6 6"
                                            fill="#fff"
                                        >
                                            <Path d="M0 5h5V0" stroke="#9AC440" />
                                        </Svg>
                                    </View>
                                </View>

i want a text wrapper image like that.

Answer 1

For anyone facing a similar issue where they need to split a string and display its elements with special markers on both ends, here's a solution I found:

<View
    style={{
        marginLeft: 23,
        marginTop: 18,
        flexDirection: "row",
        flexWrap: "wrap",
    }}
>
    {personalInfo?.profession.split(" ").map((item, i) => {
        const isLastItem = Boolean(
            personalInfo?.profession.split(" ")?.length - 1 === i
        );

        return (
            <View key={i} style={{ flexDirection: "row", alignItems: "center" }}>
                {i == 0 ? (
                    <View style={{ position: "absolute", top: -1, left: -3 }}>
                        <Svg
                            xmlns="http://www.w3.org/2000/svg"
                            width={6}
                            height={6}
                            viewBox="0 0 6 6"
                            fill="#fff"
                        >
                            <Path d="M6 1H1v5" stroke="#9AC440" />
                        </Svg>
                    </View>
                ) : null}
                <Text style={styles.profession}>{item + " "}</Text>
                {isLastItem ? (
                    <View style={{ position: "absolute", bottom: -1, right: -1 }}>
                        <Svg
                            xmlns="http://www.w3.org/2000/svg"
                            width={6}
                            height={6}
                            viewBox="0 0 6 6"
                            fill="#fff"
                        >
                            <Path d="M0 5h5V0" stroke="#9AC440" />
                        </Svg>
                    </View>
                ) : null}
            </View>
        );
    })}
</View>