[Text] Text doesn't wrap

[bogdantmm92]

http://puu.sh/i407j/805ec722a0.png
Text doesn't wrap when it's wrapped inside :

msgReceivedAlignContainer: {
    flex: 1,
    flexDirection: 'column',
    alignItems: 'flex-w',
  },

[brentvatne]

@bogdantmm92 - can you post a complete minimal example on rnplay.org please?

[bogdantmm92]

Demo: https://rnplay.org/plays/21GRFQ

[brentvatne]

@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

[bogdantmm92]

Thanks for testing & fixing this so fast! Really appreciate it!

[uc-hus]

How to break text of flexDirection: row view

[peter4k]

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

[mvnnn]

@peter4k That's not works in my case.

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

[peter4k]

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

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

[mvnnn]

@peter4k thanks, I also try this but that's not working inside card so i use "minWidth" and "maxWidth" and that's working great.

[a11y1337]

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>

[janaka120]

I think this also work

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

[dwilt]

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à:

[georgemickael-b]

@dwilt That helped!

[highbass]

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

[Tiger-NG]

thanks a lot, it is great help for me!

[IrvanWijaya]

@dwilt thanks for the solution. By the way what does the flexGrow do? I check it https://facebook.github.io/react-native/docs/layout-props.html there and it give me nothing.

thanks

[dwilt]

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

[vardanmobiloitte]

Hello All,
I am using react native 0.28.0. and I am not able to wrap text in chat I am using react-native-gifted-chat . also I get error if I use maxWidth. Do anyone know workaround of maxWidth

[pavloko]

Hi all,

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

<Text numberOfLines={2}/>

[gusgard]

@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,
  }
});

[pie6k]

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

[maieonbrix]

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.

[yordis]

@pie6k solution is the best subjectively approach but put it on the Text that you want to wrap.

[benevbright]

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

[charleylla]

this worked for me:

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

[nanosoft-vivek]

[dmeehan1968]

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.

[maieonbrix]

@dmeehan1968 your solution solved this problem on one occasion thank you !

There are a lot of solutions to this problem

[Fi2zz]

 <View style={style.textWrap}>
     <Text numberOfLines={your value} >
         Your very very very very very long text content
     </Text>
</View>

style ={
 textWrap:{ 
     width: your_certain_width
  }
}