FlatList don't show me any result why?

Question

I'm learning react native and i'm trying to show data in flatlist, but it didn't works i don't know why this is my code :

         <FlatList 
        numColumns={3}
        data={posts}
        horizontal={false}
        renderItem={(item) => 
          <Image 
          style={{width:100, height:100, backgroundColor:"black"}}
          onLoadStart={() => {
            console.log("Loading"); 
          }}
          resizeMode='contain'
          source={{uri: item.imageUri}} />
        }
        />

and the code of my data :

const docRef = doc(db, "posts", auth.currentUser.uid);
        const colRef = collection(docRef, "userPosts");
        const q = query(colRef, orderBy("createAt", "asc"));
        getDocs(q).then((docsSnap) => {

            let posts;

            docsSnap.forEach(doc => {
            // doc.data() is never undefined for query doc snapshots
            const data = doc.data();
            const id = doc.id;
            posts = {id, ...data};
            });              
            ..............the rest of code

Why it didn't works please ?

Answer 1

I am not really sure if you have this error or not
I had this when I am trying to nest flatlist inside a ScrollView,

VirtualizedLists should never be nested inside plain ScrollViews with the same orientation because it can break windowing and other functionality - use another VirtualizedList-backed container instead.

So I think there is a conflict between flatlist and scrollView, try to make it horizontal! replace horizontal={false} with horizontal It worked for me though!

Answer 2

In order to trigger a rerender of your view, you must put the posts in the state. See: https://reactnative.dev/docs/state

If you are using functional components you can simply use the useState() hook like this:

const [posts, setPosts] = useState()

heredocsSnap.forEach(doc => {
  // doc.data() is never undefined for query doc snapshots
  const data = doc.data();
  const id = doc.id;
  setPosts({id, ...data});
});