title: React native text going off my screen, refusing to wrap. What to do?
body: <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>