Firestore request, using react-native-firebase, is failing

Question

I'm building a simple cross-platform app using Expo and Firebase.

I'm using a managed workflow, since I don't want to touch native code. I've also installed react-native-firebase, since it's the only way I can tap into Firebase's 'App Check' functionality.

I've set up my application exactly per the documentation for Expo and react-native-firebase, however when I try to make a simple request to my Firestore, I get the following error:

Error: You have attempted to use a firebase module that's not installed on your Android project by calling firebase.app()
Ensure you have:
1.) imported the 'io.invertase.firebase.appReactNativeFirebaseAppPackage module in your MainApplication.java
2.) Added the new ReactNativeFirebaseAppPackage() line inside the of the RN 'getPackages()' method list

When setting up my app, I installed @react-native-firebase/app and @react-native-firebase/firestore, I made sure to include react-native-firebase in the plugins on my app.json, and I integrated the google-services.json and GoogleService-info.plist into the root of my project.

So I'm not sure what's going on here. Did I miss a step? Does react-native-firebase not work in managed workflows? Or is react-native-firebase not compatible with Firebase v9? I say this because I'm using the namespace method of retrieving data, rather than the modular:

  useEffect(() => {
    const getDocs = async () => {
      const arr = []
      const snapshot = await firestore().collection("test-collection").get()
      snapshot.forEach((doc) => arr.push(doc.data()))
      setItem(snapshot)
    }
    getDocs()
  },[])

Anyway, here's the whole component responsible for the Firebase call:

App.js

import { useState,useEffect } from 'react'
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import firestore from "@react-native-firebase/firestore"

export default function App() {

  const [item,setItem ] = useState([])

  useEffect(() => {
    const getDocs = async () => {
      const arr = []
      const snapshot = await firestore().collection("test-collection").get()
      snapshot.forEach((doc) => arr.push(doc.data()))
      setItem(snapshot)
    }
    getDocs()
  },[])

  console.log('item',item)

  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

app.json

{
  "expo": {
    "name": "test-app",
    "slug": "test-app",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "userInterfaceStyle": "light",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "googleServicesFile": "./GoogleService-Info.plist",
      "supportsTablet": true,
      "bundleIdentifier": "com.****.testapp"
    },
    "android": {
      "googleServicesFile": "./google-services.json",
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      },
      "package": "com.*****.testapp"
    },
    "web": {
      "favicon": "./assets/favicon.png"
    },
    "plugins": [ "@react-native-firebase/app"],
    "extra": {
      "eas": {
        "projectId": "****"
      }
    }
  }
}

Answer 1

react-native-firebase use native modules and it's required to compile your custom Expo Go Development client with react-native-firebase pre-embedded.

Step-by-Step Guide - https://www.youtube.com/watch?v=id0Im72UN6w

Otherwise, use the official Firebase JavaScript SDK with no native modules.