react-native: [Text] Text doesn't wrap

Hey there @mvnnn, I was able to get this to work by adding a ‘flex: 1’ property to the text element. Hopefully it works in your situation, as well.

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

I tried @a11y1337 's method and it didn’t work for me. I have a situation where I have text sitting in a View along side of another View and the text is running through the parent’s padding and out of the parent’s container:

Markup:

<View style={styles.container}>
    <AlbumCover
        image={album_cover}
        width={smallAlbumCover}
        height={smallAlbumCover}
        borderRadius={6}
    />
    <View style={styles.info}>
        <Text style={styles.title} allowFontScaling={false}>{title}</Text>
        <Text style={styles.author} allowFontScaling={false}>{author}</Text>
    </View>
</View>

Styles:

export default StyleSheet.create({
    container: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    info: {
        flexGrow: 1,
        marginLeft: gutter,
    },
    title: {
        fontSize: 16,
        fontFamily: sansSerifLight,
        color: nearlyBlack,
    },
    author: {
        fontSize: 12,
        fontFamily: sansSerif,
        color: greyishBrown,
    }
});

As I said, I tried all of the the suggestions here and nothing seemed to work. WHAT DID WORK was adding a width: 0 to the info style:

info: {
    width: 0,
    flexGrow: 1,
    marginLeft: gutter,
},

and voilà:

Try add flexWrap: "wrap" to the style of the Text component

After a bit of hard time I’ve found out that adding flexShrink: 1 to text container helped.

@mvnnn You have to add it to your <Text> component, like:

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

@bogdantmm92 - the problem is that it won’t wrap because the flexDirection is row - it just continues flowing in that direction rather than downwards (as it would with column). I fixed this for you in this example on rnplay - thanks for providing an excellent sample! Makes the issue much easier to address

@dabit1 thanks!

Example that works:

Code

<View style={styles.container}>
  <Text style={styles.text}>{text}</Text>
</View>

Styles

export default StyleSheet.create({
  container: {
      flexDirection: 'row',
      alignItems: 'center',
  },
  text: {
    width: 0,
    flexGrow: 1,
    flex: 1,
  }
});

I think this also work

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

Hi all,

Text supports NumberOfLines property, not sure about the case described above, but maybe it can be an option.

<Text numberOfLines={2}/>

All of the above solutions didn’t work for me, I had a fairly complicated view hierarchy, simpler versions always worked as expected.

Also, I was using react-native-web, so coding to react-native standards, using View and Text components as the basis for all rendering. The above did allow me to resolve the issue on Native, but it didn’t resolve it on Web.

The correct solution (for me) was to ensure that I had flex: 1 on ALL ancestors of the Text node that was not wrapping as expected.

So - check your view hierarchy, you can do this in the browser using the Element Inspector (Computed Styles), just walk up from the non-wrapping node and check for display: flex - anything missing flex is missing the corresponding flex: 1.

NB: Text nodes in react-native-web do not pass the flex property to the underlying div/span.

So far @gusgard answer always worked for me but I just faced this issue and despite all of the documented solution no one actually worked except for that one :

I found this gem https://stackoverflow.com/questions/38233789/react-native-view-auto-width-by-text-inside. the accepted answer tells us that 👍

“alignSelf” does the same as ‘display: inline-block’ would in common HTML/CSS and it works very well for me.

I don’t know you but I really didn’t know. Just tested it and it worked like a charm.

this worked for me:

<View style={{flexGrow:1,width:0,flexDirection:"column",justifyContent:"center"}}>
    <Text >{handle_description}</Text>
</View>

@pie6k You saved my day. Many thanks for your sharing!

@IrvanWijaya read this guide which is probably implemented the same way on React Native.

@a11y1337 … that saved me ton of headache! thank you.

@dwilt That helped!