React-native: [ListView] Doesn't render section headers when section has no rows

[pglotov]

I'm not sure why empty sections are designed to not be rendered at all. The code which bypasses empty sections is in ListView.render() as follows

...
    for (var sectionIdx = 0; sectionIdx < allRowIDs.length; sectionIdx++) {
      var sectionID = dataSource.sectionIdentities[sectionIdx];
      var rowIDs = allRowIDs[sectionIdx];
      if (rowIDs.length === 0) {
        continue;
      }
...

I suggest removing rowIDs.length === 0 check. Or adding a property to indicate if empty sections should have header rendered.

[facebook-github-bot]

Hey pglotov, thanks for reporting this issue!

React Native, as you've probably heard, is getting really popular and truth is we're getting a bit overwhelmed by the activity surrounding it. There are just too many issues for us to manage properly.

• If you don't know how to do something or something is not working as you expect but not sure it's a bug, please ask on StackOverflow with the tag react-native or for more real time interactions, ask on Discord in the #react-native channel.
• If this is a feature request or a bug that you would like to be fixed, please report it on Product Pains. It has a ranking feature that lets us focus on the most important issues the community is experiencing.
• We welcome clear issues and PRs that are ready for in-depth discussion. Please provide screenshots where appropriate and always mention the version of React Native you're using. Thank you for your contributions!

[satya164]

Why would you want to render section headers for empty sections?

[pglotov]

Say there is a list of objects by category. Category may have no objects in it, but it needs to be present in the list since the category header component may have a button to add an object. When category is first created it is empty, so there would be no way to add objects to it if it is not rendered.

Another example is when a section can be collapsed or expanded. If section is collapsed there are no rows in it, but it still should be rendered for it to be possible to expand it.

[pglotov]

Also it looks like if someone wouldn't want to render empty sections they can do it in cloneWithRowsAndSections() call by not including empty section keys in sectionIdentities.

[pglotov]

I have some code, should i make a PR?

[satya164]

@pglotov Sounds reasonable. Sure.

[sasavranic]

Hello,
I'm still unable to show empty sections. I set "enableEmptySections" to true in ListView component.
I have:

data[today] = [{obj1}, {obj2}, ...]
data[tomorrow] = []

tomorrow is not displayed

[nathan-k]

I know this issue is old, but if anyone else runs into this problem, make sure to include sectionHeaderHasChanged when creating the ListView DataSource:

this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2, sectionHeaderHasChanged: (s1, s2) => s1 !== s2})