CODEWITHSUNDEEP
react-nativereact-native-sectionlist
Ruturaj Gole
Ruturaj Gole

Reputation: 91

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

Upvotes: 3

Views: 5254

Answers (2)

Dan Leveille
Dan Leveille

Reputation: 3210

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}.

Upvotes: 1

emdibee
emdibee

Reputation: 192

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.

Upvotes: 1

Related Questions