Problem with listening to messages OnSnapshot with a React Native Firebase Messaging App

Question

I'm trying to create a React Native messaging app with the firebase SDK. In the chat screen I am trying to listen to updated messages in my firestore database. I'm following a lot of the code shown in this github repository https://github.com/ReactNativeSchool/react-native-firebase-chat-app, but it uses react-native-firebase and I am using the SDK which is causing making it hard for me to find the equivalent code with the firebase SDK. What am I doing wrong in the below code that is giving me the following error when I open the screen:

undefined is not a function (near '...(0,_firebaseConfig.listenToMessages)(threadID).onSnapshot...')

I believe it has to do with me not converting from react-native-firebase to the firebase SDK correctly, but I'm not sure.

Below is my listenToThreads code from the firebaseConfig file where I do all my firebase functions. Below that is the part I commented out that returned the values within that collection.

export const listenToMessages = async (threadID) => {
  return firebase.firestore()
    .collection('threads')
    .doc(threadID)
    .collection('messages');

  // try {
  //   const q = query(collection(db, "threads"), where("tid", "==", threadID));
  //   const doc = await getDocs(q);
  //   const data = doc.docs[0].data();
  //   return data.messages;
  // } catch {
  //   return []; 
  // }
};

and here is my onSnapshot code which I'm running inside a working UseFocusEffect hook.

const unsubscribe = listenToMessages(threadID).onSnapshot(
    querySnapshot => {
      const formattedMessages = querySnapshot.docs.map(doc => {
        return {
            _id: doc.id,
            text: '',
            createdAt: new Date().getTime(),
            user: {}
        };
      });

      setMessages(formattedMessages);
    },
);

return () => {
    unsubscribe();
};

Answer 1

The listenToMessages function should not be async.

It returns a promise rather than the doc you want. ✌️