Wrapping text around an image with React-Native

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.