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-nativ         


        

Answer 1

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.

Answer 2

my solution below:

<View style={style.aboutContent}>
     <Text style={[styles.text,{textAlign:'justify'}]}>
        // text here                            
     </Text>
</View>

style:

aboutContent:{
    flex:8,
    width:widthDevice-40,
    alignItems:'center'
},
text:{
    fontSize:widthDevice*0.04,
    color:'#fff',
    fontFamily:'SairaSemiCondensed-Medium'
},

result: [

Answer 3

I found solution from below link.

[Text] Text doesn't wrap #1438

<View style={{flexDirection:'row'}}> 
   <Text style={{flex: 1, flexWrap: 'wrap'}}> You miss fffffdffffd ffffdffffffffd 
     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 4

Another solution that I found to this issue is by wrapping the Text inside a View. Also set the style of the View to flex: 1.

Answer 5

you just need to have a wrapper for your <Text> with flex like below;

<View style={{ flex: 1 }}>
  <Text>Your Text</Text>
</View>

Answer 6

I wanted to add that I was having the same issue and flexWrap, flex:1 (in the text components), nothing flex was working for me.

Eventually, I set the width of my text components' wrapper to the width of the device and the text started wrapping. const win = Dimensions.get('window');

      <View style={{
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignSelf: 'center',
        width: win.width
      }}>
        <Text style={{ top: 0, alignSelf: 'center' }} >{image.title}</Text>
        <Text style={{ alignSelf: 'center' }}>{image.description}</Text>
      </View>