How to show inline icon in Text? Not at the start or end positions, but inbetween the text in react-native

I know how to show image at the end or start of text in a view, but what I want is to show icon inbetween the text.

Here's a Figma preview image for reference:

In my code I tried to create the above view using row flex, but the icon always moves outside the intended area if I try to increase the image size beyond the text lineHeight.

My Current code (which is not working as specified above):

<Text style={styles.stepTitle}> Open Safari on your iPhone. Tap the options icon{' '} <Text style={{ lineHeight: 24 }}> {/* try increasing / decreasing the image dimensions */} <IconDetailsIcon width={24} height={24} style={{ transform: [{ translateY: 2 }] }} /> </Text> {' '}in the address bar </Text> /* stepTitle: { color: '#CCCCCC', fontSize: 14, lineHeight: 24, fontWeight: '400', }, */

What I want to know is:

If it's possible to show inline image at any position in a text sentence (without absolute positioning gimmick) in react-native.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.