React Native: How to apply ListView's contentContainerStyle to renderRow() to create grid while having renderHeader()?

Question

I am trying to follow this: ListView grid in React Native but with renderHeader() as well. When I have both renderHeader() and renderRow() with the

contentContainerStyle={{flexDirection: 'row', flexWrap: 'wrap'}}

, the whole ListView is affected, shifts left, and the renderRow() disappears.

But when I take out the renderHeader(), it creates the grid of renderRow() perfectly without any issues. So how can I go about using ListView's contentContainerStyle only to affect renderHeader() to create the grid, and also have renderHeader() as well?

return (
  <View style={{flex: 1}}>
    <ListView
      contentContainerStyle={{flexDirection: 'row', flexWrap: 'wrap'}}
      dataSource={this.state.dataSource}
      renderRow={this.renderRow.bind(this)}
      renderHeader={this.renderHeader.bind(this)}
    />
  </View>
);

Thank you in advance!

@ColinRamsay What may be the issue? – Jo Ko Jul 22 '16 at 18:20 — Jo Ko, Jul 22 '16 at 18:20

score 1 · Answer 1 · answered Sep 11 '16 at 18:13

At the moment, ListView sticks everything in a <ScrollView contentContainerStyle>{renderHeader}{renderRow}{renderRow}{renderFooter}</ScrollView> view structure. Keeping that in mind will help explain the formatting issues you see.

I think the best option at the moment, is to mark your header's style with {width: Dimensions.get('window').width}, to ensure that it uses up a full row (or whatever the width of your <ListView>.

I'm still having issues with this as I use {alignSelf: 'center'} on my ListView contents, and so the size of the header will affect/change the alignment of the renderRow contents too. But if you're not doing that, you shouldn't have any issue with it.

React Native: How to apply ListView's contentContainerStyle to renderRow() to create grid while having renderHeader()?

1 Answers1