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

Question

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!

Answer 1

I found solution from below link.

[Text] Text doesn't wrap #1438

<View style={{flexDirection:'row'}}>     <Text style={{flex: 1, flexWrap: 'wrap'}}> You miss fdddddd dddddddd       You miss fdd    </Text> </View> 

Below is the Github profile user link if you want to thank him.

Ally Rippley

---

Edit: Tue Apr 09 2019

As @sudoPlz mentioned in comments it works with flexShrink: 1 updating this answer.

Answer 2

The solution to that issue is flexShrink: 1.

<View     style={{ flexDirection: 'row' }} >     <Text style={{ flexShrink: 1 }}>        Really really long text...    </Text> </View> 

Depending on your set up, you may also also need to add flexShrink: 1 to the <View>'s parent as well, to get this to work, so play with that and you'll make it.

The solution was discovered by Adam Pietrasiak in this thread.