How I got Expo and react-native-firebase working in one project?

The problem

When using Expo with managed workflow, installing react-native-firebase directly is impossible, because Expo doesn’t support native modules. Expo documentation says, that we have two ways:

  • Use Firebase Web JS SDK
  • Use Expo bare workflow
  • When I run my app on Expo client, Firebase Web JS SDK is loaded
  • When I build it using bare react-native, Firebase native SDK is loaded

The Solution

Fortunately, both Web and Mobile Firebase SDK has exactly same API for some modules (for example Firestore). This means we can write whole code once and it should work with both versions.

//firebaseProvider.tsconsole.log('Using Native Firestore Provider');import firestoreNative from '@react-native-firebase/firestore';

export default firestoreNative;
//firebaseProvider.expo.tsconsole.log('Expo - Using Node.js Firestore provider');
import * as firebase from 'firebase'; import 'firebase/firestore';
const firebaseConfig = {
"apiKey": "===<<<YOUR_API_KEY>>>===",
"authDomain": "===<<<PROJECT_ID>>>===.firebaseapp.com",
"projectId": "===<<<PROJECT_ID>>>==="
};
firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();
export default () => db;
import firestore from './firebaseProvider';//example usage
const items = await firestore().collection('items').get();
import analytics from '@react-native-firebase/analytics';//don't track screens for Expo Client - Firebase Web SDK 
//doesn't support it
if (appConstants.appOwnership !== AppOwnership.Expo)
analytics().setCurrentScreen(routeName, routeName);

Project creation and Android build hell

You will probably encounter some problems, when trying to build Expo Bare app with Firebase on Android. They are caused by incompatible Gradle wrapper versions. Expo bare workflow uses react-native-unimodules which require older Gradle versions to build, and react-native-firebase works with newer Gradle versions. This may lead to frustrating build errors.

  1. Create new Bare Workflow expo project:
expo init <<your project name>>
---- then select Bare Workflow (with TypeScript if you prefer) ---
cd <<your project name>>
yarn add @react-native-firebase/app @react-native-firebase/firestore @react-native-firebase/auth firebase
---- For mac/iOS only ----
cd ios && pod install && cd ..
  • Go to android/build.gradle and replace:
    task wrapper(type: Wrapper) with just wrapper
  • Go to android/gradle/wrapper/gradle-wrapper.properties and in distributionUrl replace version 4.10.1 (or any other) with 5.0
  • Check if it builds, run react-native run-android , react-native run-ios (mac only) and expo start .
  • Configure Firebase for your project (see Google and RN-Firebase docs)
  • Try to use solution above :)

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Bartłomiej Klocek

Bartłomiej Klocek

Enthusiast of electronics and all kinds of software development — from web apps to embedded systems. Expo open-source contributor at Software Mansion.