Issue Description
I am facing a challenge in nesting multiple images within a paragraph. If it were just a single line of text, I could have easily used a <View> with flexDirection: 'row'. Since that approach doesn't fit the requirement, I decided to encapsulate all the texts and images within <Text>.
Reference Image
Although my current method allows the images to nest, they are not aligned centrally with the text. I have made several attempts to fix this alignment issue which can be seen in the styles.fix section.
In the highlighted segments, the envelope image aligns with the baseline of the text instead of being vertically centered within each highlighted red box.
https://i.sstatic.net/o9cf4.png
Snippet
import React from 'react';
import { Text, View, SafeAreaView, StyleSheet, Image } from 'react-native';
import Img from './img.png';
export default () => {
return (
<SafeAreaView style={styles.rootContainer}>
<View style={styles.container}>
<Text>
<Text>This paragraph contains an icon here </Text>
<Image style={[styles.img, styles.fix]} source={Img} />
<Text> on the next line as well </Text>
<Image style={[styles.img, styles.fix]} source={Img} />
<Text> and also here </Text>
<Image style={[styles.img, styles.fix]} source={Img} />
<Text> however, the icons are not perfectly centered with the text.</Text>
</Text>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
rootContainer: {
flex: 1,
backgroundColor: '#fff',
},
container: {
margin: 20,
padding: 20,
borderWidth: 1,
borderRadius: 5,
},
img: {
width: 23,
height: 15,
},
fix: {
/**
* `attempted using relative positioning to lower the position but it was unsuccessful`
* top: 10,
* position: 'relative',
*
* `margin adjustment didn't work either as it distorted the icon proportions`
* marginTop: 10,
*
* tried wrapping Image in a View with
* marginTop or relative positioning but the
* outcome resembled the previous two methods
*/
},
});