Проблема с React Native Flatlist, когда данные Firebase не загружаются при открытии и постоянно обновляются

Question

Я создал плоский список в реагировать на нативный, который использует данные Firebase в качестве данных для плоского списка. Моя проблема в том, что мой плоский список не загружает данные, когда я открываю экран с этим плоским списком. После того, как я потяну экран вверх или вниз, он показывает данные в течение секунды, затем немного мигает, а затем вообще не показывает никаких данных. Я застрял с этой проблемой в течение нескольких недель, и любая помощь будет в значительной степени признательна. Весь мой код экрана размещен ниже, включая pullToRefre sh и refre sh, как только он попадет в нижнюю часть экрана.

import React from 'react';
import { View, Text, StyleSheet, FlatList, Image, ActivityIndicator } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import moment from 'moment';
import firebase from "firebase";
import _ from 'lodash';

export default class HomeScreen extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      data: [],
      downloadImage: '../assets/images/temporaryProfilePicture.jpg',
      loading: false,
      error: null,
      fullData: [],
      refreshing: false,
      postNumLoad: 20
    };
  }

  componentDidMount() {
    this.makeRemoteRequest();
  }

  getPosts = () => {
    var list = [];
    firebase.firestore()
      .collection("posts").get().then((querySnapshot) => {
        querySnapshot.forEach(async (doc) => {
          var tempList = doc.data();
          const usersQs = await firebase.firestore().collection("users").where('email', '==', doc.data().email).get();
          usersQs.forEach(doc2 => {
            Object.assign(tempList, {
              "userName": doc2.data().name,
              "avatar": doc2.data().avatar
            });
          });

          list.push(tempList);
        });
        // list.sort(function(a, b) {
        //   var c = b.timestamp;
        //   var d = a.timestamp;
        //   return c - d;
        // });
        this.setState({
          data: list,
          fullData: list
        });
      });

    return new Promise((resolve, reject) => {
      resolve(_.take(this.state.fullData, this.state.postNumLoad));
    });
  };

  makeRemoteRequest = _.debounce(() => {
    this.setState({ loading: true });

    this.getPosts()
      .then(posts => {
        this.setState({
          loading: false,
          data: posts,
          fullData: posts,
          refreshing: false
        });
      })
      .catch(error => {
        this.setState({ error, loading: false, refreshing: false });
      });
  }, 250);

  handleRefresh = () => {
    this.setState({
      refreshing: true
    }, () => {
      this.makeRemoteRequest();
    });
  };

  handleLoadMore = () => {
    this.setState({
      postNumLoad: this.state.postNumLoad + 20
    }, () => {
      this.makeRemoteRequest();
    });
  };

  renderFooter = () => {
    if (!this.state.loading) return null;

    return (
      <View
        style={{
          paddingVertical: 20,
          borderTopWidth: 1,
          borderColor: "#CED0CE"
        }}
      >
        <ActivityIndicator animating size="large" />
      </View>
    );
  };

  renderPost = post => {
    return (
      <View style={styles.feedItem}>
        <Image source={post.avatar} style={styles.avatar} />
        <View style={{ flex: 1 }}>
          <View style={{ flexDirection: "row", justifyContent: "space-between", alignItems: "center" }}>
            <View>
              <Text style={styles.name}>{post.userName}</Text>
              <Text style={styles.timestamp}>{moment(post.timestamp).fromNow()}</Text>
            </View>

            <Ionicons name="ios-more" size={24} color="#73788B" />
          </View>

          <Text style={styles.post}>{post.text}</Text>

          <Image source={post.image && {uri: post.image}} style={styles.postImage} resizeMode="cover" />

          <View style={{ flexDirection: "row" }}>
            <Ionicons name="ios-heart-empty" size={24} color="#73788B" style={{ marginRight: 16 }} />
            <Ionicons name="ios-chatboxes" size={24} color="#73788B" />
          </View>
        </View>
      </View>
    );
  };

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.header}>
          <Text style={styles.headerTitle}>Feed</Text>
        </View>

        <FlatList
          style={styles.feed}
          data={this.state.data}
          renderItem={({ item }) => this.renderPost(item)}
          keyExtractor={item => item.timestamp.toString()}
          showsVerticalScrollIndicator={false}
          ListFooterComponent={this.renderFooter}
          refreshing={this.state.refreshing}
          onRefresh={this.handleRefresh}
          onEndReached={this.handleLoadMore}
          onEndThreshold={100}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#EFECF1"
  },
  header: {
    paddingTop: 40,
    paddingBottom: 16,
    backgroundColor: "#fff",
    alignItems: 'center',
    justifyContent: 'center',
    borderBottomWidth: 1,
    borderBottomColor: "#EBECF4",
    shadowColor: "#454D65",
    shadowOffset: { height: 5 },
    shadowRadius: 15,
    shadowOpacity: 0.2,
    zIndex: 10
  },
  headerTitle: {
    fontSize: 20,
    fontWeight: "500"
  },
  feed: {
    marginHorizontal: 16
  },
  feedItem: {
    backgroundColor: "#fff",
    borderRadius: 5,
    padding: 8,
    flexDirection: "row",
    marginVertical: 8
  },
  avatar: {
    width: 36,
    height: 36,
    borderRadius: 18,
    marginRight: 16
  },
  name: {
    fontSize: 15,
    fontWeight: "500",
    color: "#454D65"
  },
  timestamp: {
    fontSize: 11,
    color: "#C4C6CE",
    marginTop: 4
  },
  post: {
    marginTop: 16,
    fontSize: 14,
    color: "#838899"
  },
  postImage: {
    width: undefined,
    height: 150,
    borderRadius: 5,
    marginVertical: 16
  }
});

Я включил весь свой код с единственной целью, чтобы проблема могла быть где угодно, включая стили, в которых я очень сомневаюсь. Любая помощь будет в значительной степени оценена. Заранее спасибо!