Simulate display: inline in React Native
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
You can only nest text nodes without using flex to get the desired effect. Like this: https://facebook.github.io/react-native/docs/text
<Text style={{fontWeight: 'bold'}}>
I am bold
<Text style={{color: 'red'}}>
and red
</Text>
</Text>
I haven't found a proper way to inline text blocks with other content. Our current "hackish" workaround is to split every single word in a text string into its own block so flexWrap wraps properly for each word.