Wrapping text around an image with React-Native

react native text wrap
react-native text not wrapping ios
react native image and text side by side
react native allow text to wrap
react-native text input wrap text
wrap image react-native
react-native wrap text to next line
react native image inline with text

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!

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.

How to float text around image in react native, I am trying to achieve a very common effect in react native of having text wrap around an image. On the web you would assign a float property  I have a problem wrapping the content of text and image in a View.. What I want:--Image-Text line 1--Image-Text line 2. Basically I have tried to code in this structure with flex style configured to 'wrap'.

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>

How to float text around image in react native - css - html, I am trying to achieve a very common effect in react native of having text wrap around an image. On the web you would assign a float property to the image and​  Wrapping a text means adjusting/wrapping text around an image. In HTML, we can either align the image on the right side of the text, or to the left, or to the center. In CSS, besides these we can also insert the images in a circle or rectangle, etc. and can wrap a text around it. You can also use CSS shape-outside Property depending on the shape of your image. Below examples illustrate the above approach: Example 1: In this example, the image is floating right side of the screen and the text

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:

  1. 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.

  2. 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.

  3. Put your image in IV. Then measure the height of IV in pixels (dpi). Call this height IVh

  4. 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

  5. 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.

  6. 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.

"Floating" an image in text : reactnative, However, you'll see the text block doesn't wrap underneath the icon on the Added a dark mode to my React Native network request logger library which can be a breakdown of the thought process and expo snacks to mess around with). In React Native, we are more strict about it: you must wrap all the text nodes inside of a <Text> component. You cannot have a text node directly under a <View>. // BAD: will raise exception, can't have a text node as child of a <View> < View > Some text </ View > // GOOD < View > < Text > Some text </ Text > </ View >

How to wrap text around an image – Out of the Sandbox, This can be achieved by changing the "text-wrapping" of an image within the rich text editor in the Page or Blog post admin. To edit an image in  You can even flow text around an image placed on the left side of the page and then make the text wrap around a different image placed on the right side. In this instance, the break element <B /> and its one attribute, Clear, come into use.

[Flexbox] How to properly wrap text elements when mixed with , [Flexbox] How to properly wrap text elements when mixed with image elements # @janmonschke Same here - please respond if you found a way around. Check this out https://github.com/sospartan/react-native-iconic-font  Select anywhere outside the image to see how the text has wrapped around the image. Fine-tune text wrapping. If there's too much space between the text and your image, you can set the wrap points manually. Select the picture, and go to Picture Format or Format and select Wrap Text > Edit Wrap Points.

[Text] Text doesn't wrap · Issue #1438 · facebook/react-native · GitHub, How to break text of flexDirection: row view image Hello All, I am using react native 0.28.0. and I am not able to wrap text in chat I am using  Open a document with some images around which you want to wrap text. If you haven’t inserted your image yet, place the cursor where you want it, click Insert > Image, and then choose the location of your image. Next, select the image or object, and then click the Wrap Text icon in the box that appears.

Comments
  • It won't wrap if your flex direction is row. look at this and the examples github.com/facebook/react-native/issues/1438
  • Thanks for your comment! But this is not the problem in my case, I want to wrap it around the image. Like in the second screenshot but the text there just goes behind it.
  • You can use a Text as container instead of the typical View.
  • For me the key difference was using flexDirection: 'row' in the alignment container. A direction of column is the default, in case anyone was wondering.
  • I stopped at In XML, create a RelativeLayout