Reading data from Firebase in a React Native Application

Issue

I am trying to write a simple application in react native and attempting to read data from my firebase firestore. Here is my firebase config .js file

import firebase, { initializeApp } from 'firebase/app'
import { getAuth } from 'firebase/auth'
import { getFirestore } from 'firebase/firestore'

const firebaseConfig = {
}

const FIREBASE_APP = initializeApp(firebaseConfig)
const FIREBASE_AUTH = getAuth(FIREBASE_APP)
const FIREBASE_FIRESTORE = getFirestore(FIREBASE_APP);

export { FIREBASE_APP, FIREBASE_AUTH, FIREBASE_FIRESTORE}

In my events screen I am then attempting to read the data (I know I havent written this code yet but can't reference the collection):

import React, { useState, useEffect} from 'react'
import { StyleSheet, Text, View, FlatList, SafeAreaView, ScrollView, Image} from 'react-native'
import { FIREBASE_FIRESTORE, FIREBASE_APP } from '../firebase'

const EventsScreen = () => {

  const headerTitle = 'Events';

  const db = FIREBASE_FIRESTORE.collection('Events')

  return (
    <View style={styles.container}>
        <NavTopBar/>

        <Header title={headerTitle} />

        <SafeAreaView style={styles.content}>
            <ScrollView>
                <View>
                {games.map((game, id) => (
                    <View style={styles.eventCard}>
                        <Text>{game.title}</Text>
                        <View style={styles.eventInfo}>
                            <Image source={getImageSource(game.homeTeam)} style={styles.flag} />
                            <Text>{game.dateStart}</Text>
                            <Image source={getImageSource(game.awayTeam)} style={styles.flag} />

                        </View>
                    </View>
                ))}
                </View>
            </ScrollView>
        </SafeAreaView>
    </View>
  )
}

The error message I get is that FIREBASE_FIRESTORE.collection is not a function (undefined).

I know my firebase credentials are working as I have hooked up the Firebase Auth login, and the package is also downloaded and is in the node_modules/@firebase/firestore file in the app.

Appreciate it is something small but struggling to find the solution. Any help would be appreciated, thank you

Solution

It looks like you're using the (newer) modular API to access Firebase. In that API collection is a top-level function, rather than a method on the Firestore object. So instead of

const db = FIREBASE_FIRESTORE.collection('Events')

Use:

const db = collection(FIREBASE_FIRESTORE, 'Events')

This is a common mistake, so I recommend reading upgrading from the namespaced API to the modular API to learn about the difference, and to then keep the documentation handy - as that has examples for both API syntaxes. My change above is based on this example in the modular API and namespaced API.

Answered By - Frank van Puffelen