title: Render Error: _firebase.db.collection is not a function. (In '_firebase.db.collection('events'), '_firebase.db.collection' is undefined)
body: <p>I am using firebase, expo and react native for an app. I am very new to firebase and is trying to create a page of events that take information from firebase firestore. However, I keep running into errors while trying to query from my firestore. Below are two code snippets which I believe the errors lie. First is firebase.js where I handle all firebase related code, second is eventspage.js where it lists all events page.</p>
  <p>There is no api key etc from firebase.js as I have intentionally removed them.</p>
  <p><a href="https://i.stack.imgur.com/duu2i.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/duu2i.png" alt="This is a picture of my firestore" /></a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// import all functions needed from the SDKS needed
  import { firebase } from "@react-native-firebase/auth";
  import {initializeApp } from "firebase/app";
  import { getAuth } from "firebase/auth";
  
  
  import {
    getFirestore, collection, getDocs,
    addDoc,
  } from 'firebase/firestore'
  
  
  
  // Initialize Firebase
  const firebaseConfig = {
      apiKey: FIREBASE_APIKEY,
      authDomain: FIREBASE_AUTHDOMAIN,
      projectId: FIREBASE_PROJECTID,
      storageBucket: FIREBASE_STORAGEBUCKET,
      messagingSenderId: FIREBASE_MESSAGINGSENDERID,
      appId: FIREBASE_APPID,
      measurementId: FIREBASE_MEASUREMENTID,
    }
  
  
  
    const app = initializeApp(firebaseConfig)
  
    const db = getFirestore(app);
    const auth = getAuth(app);
  
    export {auth, db}</code></pre>
  </div>
  </div>
  </p>
  <p>Below shows eventspage.js</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { useState, setState } from 'react';
  import { View, Text, StyleSheet, ImageBackground, ScrollView } from 'react-native'
  import Card from '../components/Card';
  import colors from '../config/colors';
  import {MaterialCommunityIcons} from '@expo/vector-icons'
  import { useNavigation } from '@react-navigation/core';
  
  import { firestore, collection, doc, getDoc } from 'firebase/firestore';
  
  import {db} from '../../firebase';
  
  //run: 1
  //swim: 2
  //cycle: 3
  
  function EventsPage(props) {
      const navigation = useNavigation()
  
      const eventRef = db.collection('events').doc('event1');
      const snapshot = eventRef.get();
      snapshot.then(function(querySnapshot) {
          querySnapshot.forEach(function(doc) {
              // doc.data() is never undefined for query doc snapshots
              console.log(doc.id, " =&gt; ", doc.data());
          });
      })
      .catch(function(error) {
          console.log("Error getting documents: ", error);
      });
      
      
      
      
  
      return (
  
          &lt;ScrollView style = {styles.container}&gt;
              &lt;ImageBackground
                  source = {require('../assets/splash-page.jpg')}
                  style = {{width: '100%', height: '100%'}}
                  blurRadius={8}
              &gt;   
              &lt;View style = {styles.closeIcon}&gt;
                  &lt;MaterialCommunityIcons name='arrow-left-bold' color="black" size={35} onPress={() =&gt; {
                          navigation.replace("Connect_me")
                    }} /&gt;
              &lt;/View&gt;
              &lt;View style = {styles.searchIcon}&gt;
                  &lt;MaterialCommunityIcons name='magnify' color="black" size={35} /&gt;
              &lt;/View&gt;
          &lt;Text style = {styles.text}&gt;EVENTS&lt;/Text&gt;
              &lt;View style = {styles.cardContainer}&gt;
              &lt;Card 
                  title={'NIKE RUN'}
                  subTitle={'Just Run Lah!'}
                  image={require('../assets/Nike_KL_Run.jpg')}
                  onPress = {() =&gt; {
                      navigation.replace("EventsListing_1")
                }}
              /&gt;
              
              &lt;/View&gt;
              &lt;/ImageBackground&gt;
              &lt;Text&gt;&lt;/Text&gt;
              &lt;Text&gt;&lt;/Text&gt;
              &lt;Text&gt;&lt;/Text&gt;
              &lt;Text&gt;&lt;/Text&gt; 
              &lt;Text&gt;&lt;/Text&gt;
          &lt;/ScrollView&gt;
          // trolling
      );
  }
  
  const styles = StyleSheet.create({
      text: {
          fontSize: 80,
          textAlign:'center',
          paddingBottom: 20,
          color: colors.primary,
          fontWeight: 'bold',
      },
      container: {
          backgroundColor: 'white',
      },
      cardContainer: {
          width: '95%',
          alignSelf: 'center'
      },
      closeIcon: {
          paddingLeft: 10,
          paddingTop: 30,
      }, 
      searchIcon: {
          paddingLeft: 10,
          paddingTop: 15,
          position: 'relative',
          left: 330,
          bottom: 47
      }
  })
  
  export default EventsPage;</code></pre>
  </div>
  </div>
  </p>
  <p>Please help! If possible, do let me know how to create an events page by querying the data from firestore and displaying them on eventspage.js too! Thanks!</p>