How to float text around image in react native

Question

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 follow it with a p tag. .

Here is a RNPlay example I've been working on. I think the method I currently have is a bit hackish, and doesn't properly work since the text does not align with the top of the image and flow down. Is there a proper and clean way to accomplish this?

Answer 1

You can use a Text as container instead of the typical View.

<Text style={{flex: 1}}>
  <Image source={Images.IconExplore} style={{ width: 16, height: 16 }} />
  <Text> Your past has been in control for far too long. It's time to shift to a higher expression of what you are capable of so you can create the life you want to live.</Text>
</Text>

Answer 2

Unfortunately, there is still no easy way to do it, even after the introduction of nested Views inside Text. Surprisingly in the iOS community this seems to be non-trivial.

iphone - How to implement the effect of "float" for image, just like in CSS style https://github.com/Cocoanetics/DTCoreText/issues/438

One idea that comes to mind that would be worth tinkering around with is measuring the text, dimensions and/or character count, and depending on the size of the image, divide the text into two Text components, one that goes to the right/left and the other that goes below the image.

There is this under-promoted React Native library that might help, which allows you to measure the width and height of a Text component based on its content:

https://github.com/alinz/react-native-swiss-knife/blob/master/lib/text/index.ios.js