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

The problem

  • 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

//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

  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 :)

--

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Why prefer GraphQL over REST API

Seriously Strict Script

HTML Paragraphs

Resilient JavaScript with Sanctuary

An example React Native Project Structure

How To Integrate Firebase Authentication With an Expo App

Update: This is a rather old article and it probably doesn’t represent best practices.

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.

More from Medium

Camera feature using React native

React Native — title is missing in Android

How to Create a Scaling Drawer Using React Navigation 6

Open kitchen drawer

Complete guide to using country code picker in your React Native projects