HowTo: Alternative way to display placeholder for empty React Native FlatList

If you are in a big hurry and would like to skip some sections, use this.

Table of contents

    * Introduction
    * Popular way to display empty FlatList placeholder
    * Better(native) empty FlatList placeholder

Introduction

If you are a mobile application developer, you will quickly come to the realization that most of the views that you build will have List components driving them. These views can have Lists, in vertical or horizontal orientation or a combination of the 2 of them. This is true whether you are building native or hybrids apps.

In React-Native there are a couple of solutions (ex. ScrollView, SectionList and FlatList) for your ListView requirements and one of the popular options and the one that we will be looking at is FlatList (Note: this tutorial also applies to SectionList)

Popular way to display empty FlatList placeholder

I have used this method personally until recently to manage my List while developing React-Native apps to show a placeholder when the data array supplied to a FlatList is empty.

render() {
    return (
      <View style={styles.container}>
        {this.data.length === 0 && (
          <View
            style={{
              borderWidth: 1,
              height: '50%',
              flex: 1,
              justifyContent: 'center',
              alignItems: 'center',
            }}>
            <Text>No Airport detail available</Text>
          </View>
        )}

        {this.data.length > 0 && (
          <FlatList
          style={{ flex: 1 }}
          data={[]}
          ItemSeparatorComponent={() => this.listSeparator()}
          renderItem={({ item }) => (
            <View style={{ paddingHorizontal: 20, paddingVertical: 10 }}>
              <Text style={{ fontSize: 18, fontWeight: '600' }}>
                {item.name}
              </Text>
              <Text style={{ fontSize: 14, color: 'gray' }}>
                {item.shortName}
              </Text>
            </View>
          )}
        />
        )}

      </View>
    );
  }

This is popular because it is the default way to conditionally display content in React(Native). From the code you can see that we conditionally render the placeholder based on whether the data array is empty or not.

Better(native) empty FlatList placeholder

Event though the conditional option works really well i discovered recently that there is a provided primitive that handles that out of the box, so when the data array is empty it renders your placeholder and when the data comes in eg from the server the FlatList will handle the display internally.

listEmptyComponent = () => (
    <View
      style={{
        borderWidth: 1,
        height: '50%',
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
      }}>
      <Text>No Airport detail available</Text>
    </View>
  );

render() {
    return (
      <View style={styles.container}>
        {this.data.length > 0 && (
          <FlatList
          style={{ flex: 1 }}
          data={[]}
          ListHeaderComponent={() => this.listHeader()}
          ListEmptyComponent={() => this.listEmptyComponent()}
          ItemSeparatorComponent={() => this.listSeparator()}
          renderItem={({ item }) => (
            <View style={{ paddingHorizontal: 20, paddingVertical: 10 }}>
              <Text style={{ fontSize: 18, fontWeight: '600' }}>
                {item.name}
              </Text>
              <Text style={{ fontSize: 14, color: 'gray' }}>
                {item.shortName}
              </Text>
            </View>
          )}
        />
        )}

      </View>
    );
  }

In the FlatList component we supply the aptly named parameter ListEmptyComponent with a function component that will be displayed when the FlaatList is empty.

If you love concise code then this may not appeal to you, because obviously the code is not shorter than the previous method, but an obvious advantage is how it can help clean up the render(), a reason i hope can nudge you towards using it in your code in the near future.

Comments

[Pavel Ermakov]

As per documentation,ListEmptyComponent is the one devs should be using.

[Nnamdi Jibunoh]

@pavel , true i agree. But a lot of people like me don't use it.

[ErkinKurt]

Hey there nice topic! I would like to ask something tho. In your enhanced example, before rendering the flatlist you are checking if the data exist and then you render the flatlist. Isn't it guaranteed that ListEmptyComponent won't be triggered?