Ad

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

(via http://codepen.io/anon/pen/GoWmdm?editors=110)

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

Ad

Answer

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:

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

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'}}>
  <Text>one</Text><Text>two</Text><Text>Three</Text><Text>Four</Text><Text>Five</Text>
</View>

Check out this example.

https://rnplay.org/apps/-rzWGg

Ad
source: stackoverflow.com
Ad