ListEmptyComponent isn't working as (I) expected

Description

The footer component get’s displayed even if the sections prop (of the SectionList) is an empty list and the empty List component never get’s displayed.

Reproduction Steps

I pass down an empty list as a prop (holidays) and start async fetching the data in a parent component. Once the data is fetched I update the parent component’s state and thereby the props to the child that contains the SectionList

Sample Code

footer() {
    return <Text>The End</Text>
  }

  emptyList() {
    return <Text>Fetching</Text>
  }

  render() {
    return (
      <SectionList
        style={styles.container}
        sections={this.props.holidays}
        renderItem={this.renderItem.bind(this)}
        renderSectionHeader={this.renderSectionHeader.bind(this)}
        ListFooterComponent={this.footer.bind(this)}
        ListEmptyComponent={this.emptyList.bind(this)}
      />
    )

Solution

If it’s a bug then it needs to be fixed. Else the documentation have to be update to be clear (I be gladly to help out).

Additional Information

• react-native-cli: 2.0.1
• react-native: 0.44.0
• Platform: iOS
• Development Operating System: macOS
• Build tools: iOS 10.3

[Minishlink]

Oh! I’m sorry I haven’t paid attention enough to your additional information… You’re on React Native v0.44, while ListEmptyComponent has been added in 0.45.1 😃

[BricePissard]

@hramos @Minishlink I dont understand the point B)

If the sections var is set as follow:

const sections = [
  {key:'hello 1', data:[{stuff:'one'}, {stuff:'two'}]},
  {key:'hello 2', data:[{stuff:'one'}, {stuff:'two'}, {stuff:'three'}]},
  {key:'hello 3', data:[{stuff:'one'}, {stuff:'two'}]},
  {key:'hello 4', data:[]}, // <--- This should create an empty row under its header?
  {key:'hello 5', data:[{stuff:'one'}, {stuff:'two'}, {stuff:'three'}, {stuff:'four'}]}
]

Is there a simple (and intuitive) way to have SectionList’s empty rows below of theirs headers? Neither the renderItem attribute nor ListEmptyComponent are triggered to render the empty row. Not working as follow looks like a bug or, at least, looks very confusing…

Otherwise, if the ListEmptyComponent attribute is not made to create empty rows (but only empty list), maybe another new ListEmptyRowComponent attribute could be set to do the job?

The following code can be tested here https://repl.it/N5Vk/46

import React, { Component } from 'react';
import { Text, View, StyleSheet, SectionList, Dimensions } from 'react-native';

var {height, width} = Dimensions.get('window');

export default class App extends Component {
  renderSectionHeader = ({ section }) => {
    return (
      <View style={styles.header}>
        <Text style={styles.headerText}>{section.key}</Text>
      </View>
    )
  }

  renderItem = ({ item }) => {
    return (
      <View style={styles.row}>
        <Text style={styles.rowText}>
          {item.stuff}
        </Text>
      </View>
    )
  }

  footerComponent() {
    return (
      <View style={styles.footer}>
        <Text style={styles.footerText}>
          This is the `SectionList` Footer
        </Text>
      </View>
    )
  }

  emptyListComponent() {
    return (
      <View style={styles.empty}>
        <Text style={styles.emptyText}>
          no data for this row
        </Text>
      </View>
    )
  }

  render() {
    const sections = [
      {key:'hello 1', data:[{stuff:'object one'}, {stuff:'object two'}]},
      {key:'hello 2', data:[{stuff:'object one'}, {stuff:'object two'}, {stuff:'object three'}]},
      {key:'hello 3', data:[{stuff:'object one'}, {stuff:'object two'}]},
      {key:'hello 4', data:[]}, // <--- This should create an empty row through `ListEmptyComponent` just below of its header?
      {key:'hello 5', data:[{stuff:'object one'}, {stuff:'object two'}, {stuff:'object three'}, {stuff:'object four'}]}
    ];
    return (
      <SectionList
        sections={sections}
        style={styles.container}
        renderItem={this.renderItem.bind(this)}
        renderSectionHeader={this.renderSectionHeader.bind(this)}
        stickySectionHeadersEnabled={true}
        ListFooterComponent={this.footerComponent.bind(this)}
        ListEmptyComponent={this.emptyListComponent.bind(this)}
      />
    )
  }
}

const styles = StyleSheet.create({
  container : {width, alignItems: 'center', justifyContent: 'flex-start', paddingTop: 30, backgroundColor: '#ccf0f1'},
  
  header    : {width, backgroundColor:'red'},
  headerText: {width, fontSize: 18, fontWeight: 'bold', textAlign: 'center', color: '#fff'},
  
  row       : {padding: 3, borderBottomWidth: 1, borderBottomColor: '#ccc' },
  rowText   : {fontSize: 13, fontWeight: 'normal', textAlign: 'left', color: '#333'},
  
  empty     : {padding: 3, backgroundColor: 'orange'},
  emptyText : {fontSize: 14, fontWeight: 'bold', textAlign: 'center', color: '#34495e'},
  
  footer    : {width, padding: 24, backgroundColor: 'yellow'},
  footerText: {fontSize: 18, fontWeight: 'bold', textAlign: 'center', color: '#34495e'},
});