Question 32721 in React native Question posted in
The official React Native documentation can be found here.

FlatList Not Rendering Items In React Native

React Native Newbie, I’m getting my data as printed in the console, but no list items are being rendered? test is my data within my useState.

Here’s my code:

export default function HomeScreen({ navigation }) {
  const [loading, setLoading] = useState(true);
  const [test, setTest] = useState([]);

  let loadData = async () => {
    const q = query(collection(FIREBASE_FIRESTORE, "test"));
    const qSnap = await getDocs(q);
    let testData = [];
    qSnap.forEach((doc) => {
      let documentData = doc.data();
      documentData.id = doc.id;
      test.push(documentData);
    });
    setTest(testData);
    setLoading(false);
  };

  if (loading) {
    loadData();
    return <ActivityIndicator style={style.indicator} />;
  } else {
    return (
      <View style={style.container}>
        <FlatList
          alwaysBounceVertical={true}
          keyExtractor={(item) => item.id}
          data={test}
          renderItem={({ item }) => (
            <View style={style.cell}>
              <Text style={style.text}>{item.title}</Text>
            </View>
          )}
        />
      </View>
    );
  }
}
Tags:

2

Answers


  1. 0

    Calling the loadData() in the component body is not correct. You should use useEffect to fetch data. Also, you created testData, but you are only pushing to test in your forEach. This should work:

    export default function HomeScreen({ navigation }) {
  const [loading, setLoading] = useState(true);
  const [test, setTest] = useState([]);

  useEffect(() => {
    let loadData = async () => {
      const q = query(collection(FIREBASE_FIRESTORE, "test"));
      const qSnap = await getDocs(q);
      let testData = [];
      qSnap.forEach((doc) => {
        let documentData = doc.data();
        documentData.id = doc.id;
        // test.push(documentData);
        testData.push(documentData);
      });
      setTest(testData);
      setLoading(false);
    };
    loadData();
  }, []);

  if (loading) {
    return <ActivityIndicator style={style.indicator} />;
  } else {
    return (
      <View style={style.container}>
        <FlatList
          alwaysBounceVertical={true}
          keyExtractor={(item) => item.id}
          data={test}
          renderItem={({ item }) => (
            <View style={style.cell}>
              <Text style={style.text}>{item.title}</Text>
            </View>
          )}
        />
      </View>
    );
  }
}
    Login or Signup to reply.
  2. 0 
    import React, { useState, useEffect } from "react";
import { ActivityIndicator, FlatList, Text, View } from "react-native";
import { collection, query, getDocs } from "firebase/firestore";
import { FIREBASE_FIRESTORE } from "../constants/firebase";

const HomeScreen = () => {
  const [loading, setLoading] = useState(true);
  const [testData, setTestData] = useState([]);

  useEffect(() => {
    const fetchTestData = async () => {
      try {
        const q = query(collection(FIREBASE_FIRESTORE, "test"));
        const qSnap = await getDocs(q);
        const fetchedTestData = [];
        qSnap.forEach((doc) => {
          const documentData = doc.data();
          documentData.id = doc.id;
          fetchedTestData.push(documentData);
        });
        setTestData(fetchedTestData);
        setLoading(false);
      } catch (error) {
        console.error(error);
      }
    };
    fetchTestData();
  }, []);

  const renderCell = ({ item }) => (
    <View style={styles.cell}>
      <Text style={styles.text}>{item.title}</Text>
    </View>
  );

  if (loading) {
    return <ActivityIndicator style={styles.indicator} />;
  } else {
    return (
      <View style={styles.container}>
        <FlatList
          alwaysBounceVertical
          keyExtractor={(item) => item.id}
          data={testData}
          renderItem={renderCell}
        />
      </View>
    );
  }
};

const styles = {
  container: {
    flex: 1,
    backgroundColor: "#fff",
  },
  cell: {
    padding: 10,
    borderBottomWidth: 1,
    borderBottomColor: "#ccc",
  },
  text: {
    fontSize: 16,
  },
  indicator: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
};

export default HomeScreen;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search