I'm using to render multiple sections with a different section header. I'm having some trouble to display it the way I want. I would like to have my header at the top and under it, items of the section as a grid.

This is what I have right now

With this code:

<SectionList
        contentContainerStyle={styles.sectionListContainer}
        renderItem={this.renderItem}
        keyExtractor={this.getKey}
        renderSectionHeader={this.renderSectionHeader}
        shouldItemUpdate={this.shouldItemUpdate}
        sections={[
          { data: mostViewedArray, key: "most_viewed", title: "Most viewed" },
          { data: recentlyArray, key: "recently", title: "Recently" }
        ]}
      />



const styles = StyleSheet.create({
   sectionListContainer: {
     flex: 1,
     flexDirection: "row",
     flexWrap: "wrap",
     justifyContent: "space-between"
   }
});

So I'd like to be able to not apply the css of sectionListContainer to sectionHeader. But I'm not sure it is possible.

If anyone has any idea about it, let me know!

Thanks!

I'm using to render multiple sections with a different section header. I'm having some trouble to display it the way I want. I would like to have my header at the top and under it, items of the section as a grid.

This is what I have right now

With this code:

<SectionList
        contentContainerStyle={styles.sectionListContainer}
        renderItem={this.renderItem}
        keyExtractor={this.getKey}
        renderSectionHeader={this.renderSectionHeader}
        shouldItemUpdate={this.shouldItemUpdate}
        sections={[
          { data: mostViewedArray, key: "most_viewed", title: "Most viewed" },
          { data: recentlyArray, key: "recently", title: "Recently" }
        ]}
      />



const styles = StyleSheet.create({
   sectionListContainer: {
     flex: 1,
     flexDirection: "row",
     flexWrap: "wrap",
     justifyContent: "space-between"
   }
});

So I'd like to be able to not apply the css of sectionListContainer to sectionHeader. But I'm not sure it is possible.

If anyone has any idea about it, let me know!

Thanks!

• javascript
• css
• react-native
• react-native-flatlist

• 1 Could you post the contents of renderSectionHeader? Is there some problem with using separate style definitions for the headers and the items as is done here? From the posted code, it appears you are not doing that. – NiFi Commented Apr 11, 2017 at 22:36

1 Answer 1

A solution that worked for us, was to force the renderSectionHeader to have the width of the entire container, thereby forcing the render items to the next row.

If you update your question to include the content of renderSectionHeader (as already asked by NiFi), I could provide a more detailed answer on how you would update renderSectionHeader.