[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.

[michalraska]

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>

[mschipperheyn]

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!