React native text going off my screen, refusing to wrap. What to do?
<p>The following code can be found in <a href="https://rnplay.org/apps/dN8pPA" rel="noreferrer">this live example</a></p>

<p>I've got the following react native element:</p>

<pre><code>'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} = React;

var SampleApp = React.createClass({
  render: function() {
    return      (
  &lt;View style={styles.container}&gt;

        &lt;View style={styles.descriptionContainerVer}&gt;
          &lt;View style={styles.descriptionContainerHor}&gt;
            &lt;Text style={styles.descriptionText} numberOfLines={5} &gt;
              Here is a really long text that you can do nothing about, its gonna be long wether you like it or not, so be prepared for it to go off screen. Right? Right..!
            &lt;/Text&gt;
          &lt;/View&gt;
        &lt;/View&gt;

        &lt;View style={styles.descriptionContainerVer2}&gt;
          &lt;View style={styles.descriptionContainerHor}&gt;
            &lt;Text style={styles.descriptionText} numberOfLines={5} &gt;Some other long text which you can still do nothing about.. Off the screen we go then.&lt;/Text&gt;
          &lt;/View&gt;
        &lt;/View&gt;



  &lt;/View&gt;);
  }
});
AppRegistry.registerComponent('SampleApp', () =&gt; SampleApp);
</code></pre>

<p>with the following styles:</p>

<pre><code>var styles = StyleSheet.create({
  container:{
        flex:1,
    flexDirection:'column',
        justifyContent: 'flex-start',
        backgroundColor: 'grey'
    },
    descriptionContainerVer:{
    flex:0.5, //height (according to its parent)
    flexDirection: 'column', //its children will be in a row
    alignItems: 'center',
    backgroundColor: 'blue',
    // alignSelf: 'center',
  },
  descriptionContainerVer2:{
    flex:0.5, //height (according to its parent)
    flexDirection: 'column', //its children will be in a row
    alignItems: 'center',
    backgroundColor: 'orange',
    // alignSelf: 'center',
  },
  descriptionContainerHor:{
    //width: 200, //I DON\'T want this line here, because I need to support many screen sizes
    flex: 0.3,  //width (according to its parent)
    flexDirection: 'column',    //its children will be in a column
    alignItems: 'center', //align items according to this parent (like setting self align on each item)
    justifyContent: 'center',
    flexWrap: 'wrap'
  },
  descriptionText: {
    backgroundColor: 'green',//Colors.transparentColor,
    fontSize: 16,
    color: 'white',
    textAlign: 'center',
    flexWrap: 'wrap'
  }
});
</code></pre>

<p>This results in the following screen: </p>

<p><a href="https://i.stack.imgur.com/fuFhUl.png" rel="noreferrer"><img src="https://i.stack.imgur.com/fuFhUl.png" alt="Text off screen app"></a></p>

<p><strong>How can I stop the text from going off the screen and keep it confined in the middle of the screen with a width of i.e. 80% of the parent.</strong> </p>

<p>I don't think I should use <code>width</code> because I will be running this on MANY different mobile screens and I want it to be dynamic, so I think I should rely totally on <code>flexbox</code>. </p>

<p>(That was the initial reason why I had <code>flex: 0.8</code> within the <code>descriptionContainerHor</code>.</p>

<p>What I want to achieve is something like this:</p>

<p><a href="https://i.stack.imgur.com/prvLYl.png" rel="noreferrer"><img src="https://i.stack.imgur.com/prvLYl.png" alt="What I want to achieve"></a></p>

<p>Thank you!</p>