3

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

2 Answers 2

1

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.

1

That's behaving as intended. horizontal={true} means headers will also be rendered horizontally.

If you want headers to be above the items, you could likely hack it by setting the width of the section header to 0, and place a horizontal header within that element, positioned at the very top, so it overlays over the next element.

According to the ListView documentation, the stickySectionHeadersEnabled prop is not supported when horizontal is set to true. While it doesn't currently say this on the SectionList documentation, I assume it's also true for SectionList.

stickyHeaderIndices

(...) This property is not supported in conjunction with horizontal={true}.

1
  • Incase someone needs a way to have a header on a nested scrollview, say a horizontal scroll inside a vertical. I found you'll need to animate the positioning of the nested scrollview to get 'sticky' behavior. Feb 3, 2021 at 2:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.