Search code examples
react-nativereact-native-sectionlist

How to style React Native SectionList sections


How can I give the same style for each section, without taking into account the section header?

Sections are generated dynamically, after getting an array from the API.

I'm looking for something similar to the following image:

enter image description here


Solution

  • Well, for that people who's looking for the same thing, I've fixed it by styling the first and last child of each section. This means, on the rendererItem={(item, index, section) => ...}, we are able to check if index === section.data.length - 1, this means it's the last child so apply border bottom radius. If index === 0, this means it's the first child of every section, so we apply border top radius.

    I've seen a related post, but it didn't work for me. Also, in my case, my SectionList data is dynamic, I have so many sections, so using FlatList for every section of my SectionList is not optimized.

    Post: Custom section style in sectionList REACT NATIVE