How to fit an image inside the Text component? - image

Question

I Need to insert an image inside the text so, I do it with the most simple way:
const avatarurl = 'https://upload.wikimedia.org/wikipedia/commons/6/6e/Golde33443.jpg'
<ScrollView>
<View style={styles.articleContent}>
<View style={styles.p}>
<Text style={{backgroundColor:'pink', width: 300, height: 100 }}>
<Image style={{width: 300, height: 50}} source={{uri: avatarurl}}/>
</Text>
</View>
</View>
</ScrollView>
const styles = {
articleContent: {
paddingTop: 50,
paddingLeft: 20,
paddingRight: 20,
borderColor: 'red',
},
p: {
paddingBottom: 15,
flex: 1,
},
textCaption: {
fontSize: 13,
color: 'black',
},
}
Here is the result:
I Don't know why the entire image is not inside the Text. So, I tried one more time with text:
<ScrollView>
<View style={styles.articleContent}>
<View style={styles.p}>
<Text style={{backgroundColor:'pink', width: 300, height: 200}}>
<Text style={styles.textCaption}>Well-known discrete probability distributions used in statistical modeling include</Text>
<Image style={{width: 30, height: 30}} source={{uri: avatarurl}}/>
<Text style={styles.textCaption}> the Poisson distribution, the Bernoulli distribution, the binomial distribution, </Text>
</Text>
<Text style={styles.text}>asdasd asd asd asd asd asdas das das d</Text>
</View>
</View>
</ScrollView>
Ok, the image is not fitting inside the line of the text. I tried some styles like: textAlign, lineHeight. But nothing helps. Is there a way to do this? The image needs to be inside the text:
Like this:
The image may not invade the space of the other line. And the words need to stay in the bottom of the line.

Answer 1

In order to put the image inside the text, you'll have to put the image itself in like this;
<View>
<Text> BIG TITLE </Text>
<Text><Text>Caption text bla bla ajdjj </Text><Image style={{width: 30, height: 30}} source={{uri: avatarurl}}/> More Text bla blah blah blah blahhhhh </Text>
</View>