Before you read and look out for the answer of this question, Please read this question, as the current question is just the continuation of it. It was basically a code to display a List of Chat from firestore database. But it was a firebase v8 snippet.

The answer I got from the question was:

import { collection, onSnapshot } from "firebase/firestore";

useEffect(() => {
  const colRef = collection(db, "chats")

  onSnapshot(colRef, (snapshot) => {
    setChats(
      snapshot.docs.map((doc) => ({
        id: doc.id,
        data: doc.data(),
      }))
    )
  });

  return unsubscribe;
}, [])

But I was unable to verify the answer, because as I was using React Native, in the return() part. The code which I was running was not displaying the ChatNames. Most probably it was due to the incorrect syntax. Note: I did not receive any error, the chatName was simply not getting displayed

The following code was in my return() part:

// screens/HomeScreen.js
        {chats.map(({ id, data: { chatName }}) => (
          <CustomChatList /> // I have imported it correctly from '../components/CustomChatList'
        ))}

components/CustomChatScreen.js

import { View, Text } from 'react-native'
import React from 'react'
import { ListItem, Avatar } from 'react-native-elements'

const CustomChatList = ({ id, chatName, enterChat }) => {

  return (
    <ListItem bottomDivider>
        <Avatar rounded source={{ uri : 'https://toppng.com/uploads/preview/roger-berry-avatar-placeholder-11562991561rbrfzlng6h.png'}} />
        <ListItem.Content>
            <ListItem.Title>
                {chatName}
            </ListItem.Title>
            <ListItem.Subtitle numberOfLines={1} ellipsizeMode="tail">
                Lorem Ipsum Dummy Text
            </ListItem.Subtitle>
        </ListItem.Content>
    </ListItem>
  )
}

export default CustomChatList

Also Note: It is showing the ListItem.Subtitle and Avatar correctly.