react-native: [Layout] Text overflow in ListView with flexDirection: 'row'

Hi, I have problem with text overflow in ListView, when ancestor has set style flexDirection: ‘row’:

part of code:

  render: function() {
    return (
      <View style={styles.container}>
        <ListView
          dataSource={this.state.dataSource}
          renderRow={this.renderRow}
        />
      </View>
    );
  },

  renderRow: function (message, sectionID: number, rowID: number) {
    return (
      <View style={{flexDirection: 'row'}}>
        <Image
          source={{
            uri: 'http://icons.iconarchive.com/icons/designbolts/free-male-avatars/128/Male-Avatar-icon.png',
          }}
          style={{flexWrap: 'wrap', width: 32, height:32}}
        />
        <View style={{flexWrap: 'wrap'}}>
          <Text>
            {message}
          </Text>
        </View>
      </View>
    );
  },

How to wrap text? Thanks.

About this issue

Original URL
State: closed
Created 9 years ago
Reactions: 2
Comments: 29 (7 by maintainers)

Most upvoted comments

I solved problem by set flex: 1 to wrapper view of text.

      <View style={{flexDirection: 'row'}}>
        <Image
          source={{
            uri: 'http://icons.iconarchive.com/icons/designbolts/free-male-avatars/128/Male-Avatar-icon.png',
          }}
          style={{width: 32, height:32}}
        />
        <View style={{flex: 1}}>
          <Text>
            {message}
          </Text>
        </View>
      </View>

+48

michalraska on Apr 17, 2015

This issue should not be closed. Basically, if you use flexDirection : ‘row’, text wrapping doesn’t work. There doesn’t seem to be a clear workaround. Using flex : 1 now collapsed your content to nothing/invisible, so that workaround is gone. A very basic layout aspect is now a total time wasting nightmare. Please fix this!

mschipperheyn on Jan 12, 2017

try this on your view container @mschipperheyn I also had this issue, the the following property worked for me flexWrap: 'wrap'

If it doesn’t work ¯_(ツ)_/¯ oh well, just tossing in my 2 cents

valetarton on Feb 8, 2017

If you feel the same pain, please let the team know HERE. I still seem to face the same problem. Also I opened an issue here in case someone can provide a solution specifically to my problem.

SudoPlz on Mar 29, 2016

@brentvatne right, it’s a contrived example, by not using row in the first place this does not happen, but let’s assume I need to use row because I want to do something like @michalraska. I’ve updated the example above and made a drawing to elaborate on it:

2015-06-16 13 04 41

It seems in row 1 the view with the question mark simply keeps growing to the right, thus the containing view never wraps. That’s what I meant by the view immediately beneath the one where flexDirection: 'row' is applied needs to have flexDirection: 'column' applied. Knowing this it’s perfectly fine to avoid it, though finding this out took me some time, I just wonder if this is intended behaviour?

despairblue on Jun 16, 2015

Setting flex: 1 will trigger the underlying text to wrap, but what if you want your view to grow with the text, and then wrap when it reaches the boundary?
wrap-example

sjmueller on Apr 25, 2015

@abhoopathy Why didnt you try hooking that up directly in the RCTTextView.m or something like that … wouldn’t that make it much easier ? Plus also save computation on creating the unnecessary UILabel ?

jawadrehman on Jun 25, 2015

The temporary hack I’m using right now is conditionally adding flex: 1, based on the content length. Of course this is pretty imprecise, and doesn’t take into consideration orientation or variations in device resolution.

sjmueller on Apr 25, 2015