FlatList component is not showing result

Question

I am working on a task in which I have to implement infinite scroll paging of 600 dummy records to cards I have coded on FlatList render. So far I have implemented logic using FlatList but not successfully. Help is required where I am doing wrong thus not giving result. Here is the component code:

import React, { Component } from "react";
import { StyleSheet, ActivityIndicator, FlatList, View } from "react-native";
import { Card } from "react-native-elements";

class InfiniteScroll extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      data: [],
      dummy: [],
      fetchingStatus: false,
      setOnLoad: false,
    };
    this.page = 0;
    let onEndReached = false;
  }
  componentDidMount() {
    var toput = [];
    for (let i = 0; i < 598; i++) {
      toput.push({
        name: "KHAN MARKET",
        order_no: "ORDER # DBZ-876",
        status: "Order Completed",
        price: "Total: $14.00",
        date: "Dec 19, 2019 2:32 PM",
      });
    }
    this.setState(
      {
        dummy: toput,
      },
      () => {
        console.log(this.state.dummy);
      }
    );
    this.apiCall();
  }

  apiCall = () => {
    var that = this;
    var old = that.page;
    that.page = that.page + 10;
    console.log(" *********** call " + this.page);
    that.setState({ fetchingStatus: true });

    that.setState({
      data: [...this.state.data, ...this.state.dummy.slice(old, that.page)],
      isLoading: false,
      fetchingStatus: false,
      setOnLoad: true,
    });
  };
  BottomView = () => {
    return (
      <View>
        {this.state.fetchingStatus ? (
          <ActivityIndicator
            size="large"
            color="#F44336"
            style={{ marginLeft: 6 }}
          />
        ) : null}
      </View>
    );
  };
  ItemSeparator = () => {
    return (
      <View
        style={{
          height: 0.5,
          width: "100%",
          backgroundColor: "#607D8B",
        }}
      />
    );
  };

  render() {
    return (
      <View>
        {this.state.isLoading ? (
          <ActivityIndicator size="large" />
        ) : (
          <FlatList
            style={{ width: "100%" }}
            keyExtractor={(item, index) => index}
            data={this.state.data}
            ItemSeparatorComponent={this.ItemSeparator}
            onScrollEndDrag={() => console.log(" *********end")}
            onScrollBeginDrag={() => console.log(" *******start")}
            initialNumToRender={8}
            maxToRenderPerBatch={2}
            onEndReachedThreshold={0.1}
            onMomentumScrollBegin={() => {
              this.onEndReached = false;
            }}
            onEndReached={() => {
              if (!this.onEndReached) {
                this.apiCall(); // on end reached
                this.onEndReached = true;
              }
            }}
            renderItem={({ item, index }) => (
              <View>
                <Card>
                  <Text
                    style={{ justifyContent: "flex-start", fontWeight: "bold" }}
                  >
                    {item.name}
                  </Text>

                  <View style={styles.textview}>
                    <Text style={styles.orderno}>{item.order_no}</Text>
                    <Text style={styles.orderstatus}>{item.status}</Text>
                  </View>
                  <Text style={styles.amount}>{item.price}</Text>
                  <View style={styles.textview}>
                    <Text style={styles.orderno}>{item.date}</Text>
                  </View>
                </Card>
              </View>
            )}
            ListFooterComponent={this.BottomView}
          />
        )}
      </View>
    );
  }
}
const styles = StyleSheet.create({
  textview: {
    marginTop: 5,
    flexDirection: "row",
    justifyContent: "space-between",
  },
  orderno: {
    flexDirection: "row",
    justifyContent: "flex-start",
  },
  orderstatus: {
    flexDirection: "row",
    justifyContent: "flex-end",
    color: "green",
  },
  ordercomplete: {
    flexDirection: "row",
    justifyContent: "flex-end",
    color: "red",
  },
  amount: {
    justifyContent: "flex-start",
    marginTop: 5,
  },
});
export default InfiniteScroll;

I will be very thankful if you can provide solution. Thanks

Answer 1

The thing here is that you are seting your dummy data and calling the apiCall next, the dummy data is not updated yet when you call the apiCall, ande the dummy data is shown as an empty array on the apiCall, you just ned to force some await before calling the function, just change from this:

this.setState(
  {
    dummy: toput,
  },
  () => {
    console.log(this.state.dummy);
  }
);
this.apiCall();

to this:

this.setState(
  {
    dummy: toput
  },
  () => {
    this.apiCall();
  }
);

Another thing I notice is that you are using some bad pratices like setting valuse direct on the class instead of using state and some messing with the scope (that = this), I've made some updates/suggestions in you code that may help with readability:

  apiCall = () => {
    const newPage = this.state.page + 10;

    this.setState({
      data: [
        ...this.state.data,
        ...this.state.dummy.slice(this.state.page, newPage)
      ],
      isLoading: false,
      fetchingStatus: false,
      setOnLoad: true,
      page: newPage
    });
  };

I've created a fully working example so you can see some more updates I've made in the code, that may help you as well:

https://codesandbox.io/s/stackoverflow-67166780-321ku?file=/src/App.js