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

<p>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 <code>flex-wrap: wrap</code>, but this will only allow wrapping at the end of a span rather than the traditional inline behavior of wrapping at word breaks.</p>

<p>The problem visualized (spans in yellow):</p>

<p><a href="https://i.stack.imgur.com/CgR94.png" rel="noreferrer"><img src="https://i.stack.imgur.com/CgR94.png" alt="enter image description here"></a></p>

<p>(via <a href="http://codepen.io/anon/pen/GoWmdm?editors=110" rel="noreferrer">http://codepen.io/anon/pen/GoWmdm?editors=110</a>)</p>

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