Started react native a couple weeks ago, can someone please help me with this error: Invariant Violation: Native module cannot be null

Question

I am working on developing a program that requires CRUD operations using Firebase. I am using Firestore to store my data, and I have a collection called "notifications" that looks like this: https://i.stack.imgur.com/hCe8q.png

Now, what I would like to do is to use a Flatlist to display on the screen different notifications a user receives. I would like to do this such that it updates in realtime whenever a document is added/removed/modified into the collection "notifications".

I am going based off of this example: https://rnfirebase.io/firestore/usage-with-flatlists

I keep running into this error however: Error: Requiring module "node_modules/@react-native-firebase/firestore/lib/index.js", which threw an exception: Invariant Violation: Native module cannot be null.

(Much longer error but I'm pasting the main part)

If anyone could please help me with this I would greatly appreciate it. Thank you.

My code is below:

import { ActivityIndicator, FlatList, Text, SafeAreaView } from "react-native";
import firestore from "@react-native-firebase/firestore";

export default function NotificationScreen() {
  const [loading, setLoading] = useState(true); // Set loading to true on component mount
  const [notifications, setNotifications] = useState([]); // Initial empty array of users

  useEffect(() => {
    const subscriber = firestore()
      .collection("notifications")
      .onSnapshot.forEach((querySnapshot) => {
        const notifications = [];
        querySnapshot.forEach((documentSnapshot) => {
          notifications.push({
            ...documentSnapshot.data(),
            key: documentSnapshot.id,
          });
        });
        setNotifications(notifications);
        setLoading(false);
      });
    return () => subscriber();
  }, []);

  if (loading) {
    return <ActivityIndicator />;
  }

  return (
    <FlatList
      data={notifications}
      renderItem={({ item }) => (
        <SafeAreaView
          style={{
            flex: 1,
          }}
        >
          <Text>Notification ID: {item.id}</Text>
          <Text>Notification time: {item.time}</Text>
        </SafeAreaView>
      )}
    />
  );
}```


  [1]: https://i.stack.imgur.com/Rhpgv.png