Wrapping text around an image with React-Native - word-wrap

Question

I try to create a View with an Image and a Text component that wraps around the Image component.
My styling:
textContainer: {
flexDirection: 'row',
},
text: {
flex: 10,
},
image: {
flex:1,
height: 180,
width: 150,
margin: 10,
borderColor: '#ccc',
borderWidth: 1,
}
My component:
<ScrollView style={styles.contentContainer} >
{this.props.content.title_1 ? <Text style={styles.title}>{this.props.content.title_1}</Text> : null}
<View style={styles.textContainer}>
{this.props.content.text_1 ? <Text style={styles.text}>{this.props.content.text_1}</Text> : null}
{this.props.content.image_1 ? <Image width={null} height={null} style={styles.image} source={this.props.content.image_1} /> : null}
</View>
</ScrollView>
This is what the result: (not wrapping at all haha)
In the image beneath here, I quickly hacked the little image into the text. But I can't get the text to be wrapped around..
I hope anyone can help me in the right direction!

Answer 1

This is really hard but there is one weird way to do this.. Try the following. It worked for me but place I am doing this is too deep in the other views.:
<Text>
<View style={{width:400, height:100, flex:1, flexDirection:'row'}}>
<Image source={require('')}/>
<Text>Your Content Here</Text>
</View>
</Text>
Good luck. Please put a comment letting us know if it worked.

Answer 2

On android you cannot place a View inside Text, but you can place an Image, here is an example:
<Text>
<Image source="" />
<Text> Insert your text here </Text>
</Text>

Answer 3

Although this is an old post, I'll add this because I have recently had this problem and found a totally different approach that works for me. I don't have the code to hand (I can get it if anyone wants it), but the principle was this:
Requirement: to have a picture in the top left corner of the screen that takes up about half the screen width, with text starting to the right of it and then continuing beneath it for the whole width of the screen.
In XML, create a RelativeLayout containing an ImageView (IV) on the left and a TextView (TVA), set to wrap content, on the right. Then create another TextView (TVB) to sit below the Relative Layout. TVA is for the text beside the image and TVB for the text beneath it.
Put your image in IV. Then measure the height of IV in pixels (dpi). Call this height IVh
Put some of your text in TVA. As long as there is enough text to wrap over several lines, it doesn't really matter how much. Then measure the height of TVA in pixels. Call this height TVh
Compare IVh with TVh. If IVh=TVh then you have just the right amount of text to sit alongside your image. If TVh = IVh x 2 then you have twice as much text as you should have. And so on.
Adjust the number of words accordingly and put the right number into TVA, replacing what was there, then put the rest of the text in TVB.
You will need to play with margins and padding to allow an adequate margin around the image. Also, in steps 3 and 4 after you have put your image into ImageView or your text into TextView, you will need a delay before measuring the heights, to allow the display to be created - otherwise the measurement will be done too soon, before there is anything on the screen, and will return a height of zero. I found 200 milliseconds quite adequate and it's too fast for the user to notice a delay.