Expo and react-native-firebase

Question

I'm trying to integrate Firebase into my expo app using the react-native-firebase framework which has several advantages over the regular firebase package when it comes to react-native apps.

However, I'm running into difficulties since the instructions say I must add the GoogleService-Info.plist to ios/[YOUR APP NAME]/GoogleService-Info.plist, and expo apps don't have an ios folder from what I understand.

Am I pretty much screwed or is there a solution for this?

Answer 1

I have managed to add react-native-firebase package with expo, below are the steps:

1. Created new expo app using blank template.
2. Installed the react native firebase package and firestore (as I needed to use firestore):

npx expo install @react-native-firebase/app @react-native-firebase/firestore

3. Installed expo dev client:

npx expo install expo-dev-client

4. Then executed command for android: npx expo run:android

5. I have created android and ios apps in google firebase console and downloaded the google-services.json file and GoogleService-Info.plist file and added them to root directory of my project.

6. Configured the app.json the ios and android properties looks like below:

    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "....",
      "googleServicesFile": "./GoogleService-Info.plist"
    },
    "android": {
      ...
      "package": "..",
      "googleServicesFile": "./google-services.json"
    },
    ...
    "plugins": ["@react-native-firebase/app"]
   

7. Then used the firestore in App.js below code can be looked for reference:

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

const firebaseConfig = {
  apiKey: "..",
  authDomain: "..",
  projectId: "..",
  storageBucket: "..",
  messagingSenderId: "..",
  appId: "..",
  databaseURL: "",
};

const app = initializeApp(firebaseConfig);

export default function App() {
  const [text, setText] = useState("Loading...");
  useEffect(() => {
    const fetchData = async () => {
      try {
        const subscriber = getFirestore(app)
          .collection("Users")
          .doc("Sam")
          .onSnapshot((snapshot) => {
            const firstName = snapshot.data().firstname;
            setText(firstName);
          });
        return () => subscriber();
      } catch (error) {
        console.error("Error fetching data:", error);
      }
    };

    fetchData();
  }, []);

  return (
    <View style={styles.container}>
      <Text>{text}</Text>
      <StatusBar style="auto" />
    </View>
  );
}

For reference the versions I'm using are:

"@react-native-firebase/app": "^21.5.0",

"@react-native-firebase/firestore": "^21.5.0",

"expo": "~52.0.7",

"react": "18.3.1",

"react-native": "0.76.2",

Answer 2

Update 02-12-2021

Guys expo's eas-build is now public. You can add custom native codes and use react-native-firebase. Here is the link to a youtube tutorial. The video is short and super easy to follow. Here is the link to the docs

Previous answer

If you are using Firebase using the mobile configuration, it does not work, but it worked smoothly when I tried the web configuration. Here is the youtube tutorial. Watch from 38:20 to set up.

Answer 3

It's in progress --

https://blog.expo.io/using-firebase-in-expo-e13844061832

Using Firebase in Expo And how we plan on adding it to the client 😁 We are super excited to announce that we will be rolling out a suite of Unimodules that will provide you with easy access to native Firebase features! initially you will only be able to use these in a detached ExpoKit App. But over time we will be working to add these to vanilla Expo.

TL;DR
Here are the modules, you will need to detach to add them for now:

• App/Core
• Analytics
• Authentication
• Cloud Firestore
• Cloud Functions
• Instance ID
• Performance Monitor
• Realtime Database
• Cloud Storage
• Remote Config
• Firebase Cloud Messaging
• Remote Notifications
• Dynamic Linking
• Invites
• Crashlytics

Also TL;DR
Here is a boilerplate: https://github.com/EvanBacon/expo-native-firebase

Answer 4

I managed to get a working set of react-native with redux, firestore and expo. See Code example at Github.

But it costs the offline-persistence (see https://github.com/firebase/firebase-js-sdk/issues/436). So from my point of view it costs performance, because i need to be online to get a full working app with firestore and react-native.

Answer 5

The author of this thread: Fresh Detached Expo + RNFirebase not running on Android has managed to get it working with the Detached ExpoKit - so it's not a full ejection and keeps the expo features.

I have asked for the steps he took so we can see about getting something added to our docs and possibly a Detached ExpoKit version of our starter app.

See the expokit detaching docs for information about ExpoKit.

Answer 6

Today, you can't have the Firebase react-native sdk with expo. And this is not planned according to: https://expo.canny.io/feature-requests/p/full-native-firebase-integration.

So you have to play only with the javascript sdk from Firebase.

Cloud Firestore is new, it will be better for the javascript sdk for offline and sync.

Answer 7

As the react-native-firebase documentation says, you need to eject your app if you want to use this library with expo. Be mind that eject action is not reversible. More info here and here and here.

If you use Expo and would like to use this package, you'll need to eject. If you do not want to eject, but wish to make use of features such as Realtime Database (without offline support) & Authentication, you can still use the Firebase Web SDK in your project.