React native text going off my screen, refusing to wrap. What to do?

The following code can be found in this live example

I've got the following react native element:

'use strict';var React = require('react-native');var {  AppRegistry,  StyleSheet,  Text,  View,} = React;var SampleApp = React.createClass({  render: function() {    return      (<View style={styles.container}><View style={styles.descriptionContainerVer}><View style={styles.descriptionContainerHor}><Text style={styles.descriptionText} numberOfLines={5} >              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..!</Text></View></View><View style={styles.descriptionContainerVer2}><View style={styles.descriptionContainerHor}><Text style={styles.descriptionText} numberOfLines={5} >Some other long text which you can still do nothing about.. Off the screen we go then.</Text></View></View></View>);  }});AppRegistry.registerComponent('SampleApp', () => SampleApp);

with the following styles:

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'  }});

This results in the following screen:

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.

I don't think I should use width 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 flexbox.

(That was the initial reason why I had flex: 0.8 within the descriptionContainerHor.

What I want to achieve is something like this:

Thank you!