Antes de leer y buscar la respuesta de esta pregunta, lea esta pregunta , ya que la pregunta actual es solo la continuación de la misma. Básicamente era un código para mostrar una lista de chat de la base de datos de firestore. Pero era un fragmento de firebase v8.

La respuesta que obtuve de la pregunta fue:

 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; }, [])

Pero no pude verificar la respuesta, porque como estaba usando React Native, en la parte return() . El código que estaba ejecutando no mostraba los ChatNames. Lo más probable es que se deba a una sintaxis incorrecta. Nota: no recibí ningún error, el nombre del chat simplemente no se mostraba

El siguiente código estaba en mi parte return() :

 // 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

También tenga en cuenta: muestra ListItem.Subtitle y Avatar correctamente.