React native List footer component not showing (funtion component)

Question

I trying to achieve infinite scrolling pagination in react native. I want to render the loading spinner at bottom of the Flat list component when loading. (Note: I'm using Expo for this app)

const renderFooter = () => {
    if (!category.loading) return null;

    return (
      <View style={spinnerStyles.container}>
        <ActivityIndicator animating size="large" color="#0000ff" />
      </View>
    );
  };

  return (
    <View style={styles.container}>
      <FlatList
        columnWrapperStyle={{ justifyContent: "space-between" }}
        numColumns={2}
        data={category.data}
        renderItem={categoryItem}
        keyExtractor={(item) => item._id + item.sub_category}
        onEndReachedThreshold={0}
        listFooterComponent={renderFooter}
        onEndReached={() => loadMore()}
      />
    </View>
  );

The loading spinner not correctly working with the flat list footer. Has anyone run into this issue before, or does anyone have a solution?

Answer 1

Sorry, it's my simple syntax error. It's actually ListFooterComponent not listFooterComponent. Now it's working fine, Thank you.

Answer 2

Instead of calling the refrence, call the function. It should look something like this.

ListFooterComponent={renderFooter()}