React-native: [ListView] Not sticky sectionHeaders

[yelled3]

according to the docs:

renderSectionHeader function #
(sectionData, sectionID) => renderable
If provided, a sticky header is rendered for this section. The sticky behavior means that it will scroll with the content at the top of the section until it reaches the top of the screen, at which point it will stick to the top until it is pushed off the screen by the next section header.

is it possible to make the ListView sectionHeader appear like a regular row, e.i like regular UITableView?

[ide]

AFAIK no but you could render plain rows to look like headers to get the look you want.

[ccheever]

Maybe the documentation should be updated to let people know they can just use a regular row if they want non-sticky headers? I bet its common for people to want this.

But otherwise, this can probably be closed @brentvatne / @ide ?

If someone is really motivated, she/he could write an application level component that would work just like ListView except with an option to toggle sticky/non-stick headers, and with non-sticky headers, it would just make renderSectionHeader return an empty view always, and insert header sections, which would each contain a single row that was rendered using the old renderSectionHeader method, before each section passed into the component. So I don't think there needs to be any change to core here.

[sahrens]

I don't think this is a major issue for people since you can just render the header as a row, so I'm going to close this out.

[Jpoliachik]

Found this out by accident, but if you put your ListView inside a ScrollView, the headers will not be sticky.

[jasonmerino]

@Jpoliachik Thanks for the tip there. Works like a charm.

[zebulgar]

ugh wish I found @Jpoliachik's comment 15 mins ago! Might be worth noting in the documentation that stickiness doesn't work in a ScrollView

[tomauty]

Putting ListView inside of ScrollView shouldn't be considered a solution. There are big performance implications for very large lists.

[askrzynski]

@MITDelian, stickiness works the same in scrollview as without. It is just the nature of scrollview that table has maximum size and content is not scrolled inside it. This "fix" is rather hack then solution and should be used very carefully because of large lists (as @tomauty explained).

On native iOS this stickiness can be disabled by creating UITableView with "grouped" style and that can only be done in constructor.

[mcampsall]

My app does not have large lists and @Jpoliachik's solution worked a charm, thanks!

[satya164]

How about adding a prop to disable sticky headers? Anyone up for a PR?

[oldo]

@Jpoliachik You are a lifesaver! I have spent hours now trying to work out why my ListView headers weren't sticking... Thank you!!

[austincline09]

If you put a ListView inside of a ScrollView it might help to set scrollEnabled=false for the ListView props. This fixed a scroll hang issue for me