Search code examples
react-nativereact-native-sectionlist

Sectionlist Horizontal with sticky header in React Native?

I've been able to render the Sectionlist in React Native with horizontal={true}, but when I have two problems with the section header.

  1. The header appears as a part of the list, and not above it.
  2. Even with stickySectionHeadersEnabled={true}, the header does not stick and scrolls along with the list.

ExpectedExpected

How it actually appears How it actually appears

Solution

  • horizontal is a prop of ScrollView. Setting horizontal={true} will render every child component of a ScrollView to be horizontally rendered, be it the header or footer or empty component. If you need a layout as what you have drawn under "Expected", you have to make separate View for that.

    It makes sense to make everything horizontally in-line, if you are setting horizontal to true. If a SectionList is rendered horizontal, its sections should come up horizontally. If you don't give section headers in between two sections, how will user differentiate between two sections? If you want to have a section header to start at the top of a new section, that's specific to you and you may have to write your own implementation of that.