React native SectionList layout

Question

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!

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.