Simulate Display: Inline In React Native

- 1 answer

React Native doesn't support the CSS display property, and by default all elements use the behavior of display: flex (no inline-flex either). Most non-flex layouts can be simulated with flex properties, but I'm flustered with inline text.

My app has a container that contains several words in text, some of which need formatting. This means I need to use spans to accomplish the formatting. In order to achieve wrapping of the spans, I can set the container to use flex-wrap: wrap, but this will only allow wrapping at the end of a span rather than the traditional inline behavior of wrapping at word breaks.

The problem visualized (spans in yellow):

enter image description here


Is there a way to get proper wrapping and true inline simulation using flex properties?



You can get this effect by wrapping text elements in other text elements the way you would wrap a span in a div or another element:

  <Text><Text>This writing should fill most of the container </Text><Text>This writing should fill most of the container</Text></Text>       

You can also get this effect by declaring a flexDirection:'row' property on the parent along with a flexWrap: 'wrap'. The children will then display inline:

<View style={{flexDirection:'row', flexWrap:'wrap'}}>

Check out this example.