1

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:

enter image description here

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>

enter image description here

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:

enter image description here

The image may not invade the space of the other line. And the words need to stay in the bottom of the line.

Zobia Kanwal
  • 4,085
  • 4
  • 15
  • 38
Vinicius Morais
  • 565
  • 1
  • 5
  • 22
  • 2
    It is completely unclear what you are after here. Do you want an image displayed in-line in the middle of a sentence? Text-image-text? Text on top of the image and if so where? Please edit to clarify. – Jared Smith Mar 11 '19 at 16:51
  • Much, much better. Try your first way (image inside the text tag) with a style of `display:inline;` or if you need to tweak the position further `display:inline-block`. – Jared Smith Mar 11 '19 at 17:57
  • The style in react-native is made by flex-box. Display only support `Flex` or `None`. – Vinicius Morais Mar 11 '19 at 18:09
  • https://stackoverflow.com/questions/34624100/simulate-display-inline-in-react-native – Jared Smith Mar 11 '19 at 21:05

1 Answers1

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>
displayname
  • 1,044
  • 7
  • 12