Render 'no content' component when section in SectionList component is empty

Question

See https://facebook.github.io/react-native/docs/sectionlist.html

When one of the Section's is empty (e.a. the data prop is an empty array), I would still like to render the SectionHeader, but also render a component that indicates that the section contains no data.

I know for the FlatList component this is possible using the ListEmptyComponent prop, but how does this work for the SectionList component?

I was hoping for something like this (but it doesn't work):

<SectionList
    style={styles.container}
    renderSectionHeader={({section}) => <SectionHeader title={section.title} />}
    sections={[
      {
        data: Object.values(this.props.teams),
        title: 'Teams',
        renderItem: this._renderTeamItem,
        keyExtractor: item => item.id,
        ListEmptyComponent: this._renderEmpty
      },
      {
        data: Object.values(this.props.invites),
        title: 'Invites',
        renderItem: this._renderInviteItem,
        keyExtractor: item => item.id,
        ListEmptyComponent: this._renderEmpty
      }
    ]}
  />

Answer 1

You could use the renderSectionFooter to display any 'no content' component. Check out the following little example:

<SectionList
   renderSectionFooter={this.renderNoContent}
   section={[
      {data: ['1', '2']},
      {data: []}
   ]}
/>

renderNoContent = ({section}) => {
   if(section.data.length == 0){
      return NO_CONTENT_COMPONENT
   }
   return null
}

Answer 2

I'm little late for the party, but since I just had to do this and I wasted a little more time on it than I'm comfortable admitting, I'll try to wrap everything up.

You can't use SectionList's ListEmptyComponent to achieve this as you do with the FlatList component. ListEmptyComponentis only triggered when the data prop is empty. If however you have any section in the data prop, then ListEmptyComponent won't be triggered.

One of the replies suggests using renderItem and checking inside of it whether section.data.length equals 0. That's nice idea, except that renderItem won't be called for sections that have data.length === 0. So this approach won't work.

What you are left with is either using renderSectionHeaderor renderSectionFooter - which one you decide to use is up to you and your specific use case.

The renderSection*function receives the section and there you are able to check whether the section has a data prop with length > 0. If it doesn't this would be your chance to output an EmptyComponent.

With the specific example in the question it would look something like this:

<SectionList
    style={styles.container}
    renderSectionHeader={({section}) => {
      if (section.data.length === 0) {
        return section.ListEmptyComponent     
      }
      return <SectionHeader title={section.title} />

    }
    sections={[
      {
        data: Object.values(this.props.teams),
        title: 'Teams',
        renderItem: this._renderTeamItem,
        keyExtractor: item => item.id,
        ListEmptyComponent: this._renderEmpty
      },
      {
        data: Object.values(this.props.invites),
        title: 'Invites',
        renderItem: this._renderInviteItem,
        keyExtractor: item => item.id,
        ListEmptyComponent: this._renderEmpty
      }
    ]}
  />

Answer 3

<SectionList
    style={styles.container}
    renderSectionHeader={({section}) => <SectionHeader title={section.title} />}
    sections={[
      {
        data: Object.values(this.props.teams),
        title: 'Teams',
        renderItem: this._renderTeamItem,
        keyExtractor: item => item.id,
        ListEmptyComponent: this._renderEmpty
      },
      {
        data: Object.values(this.props.invites),
        title: 'Invites',
        renderItem: this._renderInviteItem,
        keyExtractor: item => item.id,
        ListEmptyComponent: this._renderEmpty
      }
    ].filter(s => s.data.length > 0)}
  />

try to filter out empty sections :)