Change the original layout of a Section
I am using to render multiple sections with a different section header. I am having trouble displaying it the way I want. I would like to have a header at the top and below it, the section items in a grid view.
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 would like to be able to not apply the CSS of the sectionListContainer in the sectionHeader. But I'm not sure if this is possible.
If anyone knows about this, let me know!
Thank!
+3
source to share
1 answer
The solution that worked for us was to force renderSectionHeader to be the width of the entire container, thereby forcing the render items to the next line.
If you update your question to include the content of renderSectionHeader (as NiFi has already asked), I could provide a more detailed answer on how you would update renderSectionHeader.
+1
source to share