How To Set Up Firebase with React Native and Expo

Learn how to set up Firebase with React Native to take your projects to the next level!

React and Firebase (Picture Credit: Level Up)

So you’ve finished learning React Native, and you want to take your projects to the next level. You could add sign-in with Google or Facebook or store data in a database with Firebase. However, for beginners to React Native and Expo, it can look intimidating and hard just to set up Firebase. However, it’s actually very easy and simple, especially with React Native Expo. In this tutorial, I will break down every step of the way as I show you how to set up Firebase and add it to any React Native app built with Expo.

Prerequisites

• A computer
• Node.js
• Prior React Native/Expo knowledge
• A Google account

Step 1: Installing Firebase

Since we’re using Expo, installing Firebase is SUPER easy. To install Firebase, simply run this command in your project directory.

expo install firebase

If you did everything right, you should see something similar to this:

Step 2: Configuring Firebase

Once you’ve installed Firebase, let’s connect it to our project. Also, make sure you’ve made a Firebase project at https://firebase.google.com/.

In the root folder of your React project, create a firebase.js file. In this file, we’ll add our Firebase project credentials to allow it to communicate with our React project (you can obtain these by creating a new project in the Firebase console linked above and following the instructions; here is a quick tutorial).

Now that we’ve made our file, let’s import the Firebase package we installed earlier.

import * as firebase from 'firebase';

The reason we used the as keyword in the import statement was because the default import with firebase is the *, and so to make it a little easier to use in our project, we imported it as firebase instead of * ;

Great! We’ve imported Firebase, so now it’s time to add our credentials. To do that, we’re going to use the .initializeApp() method. Your code should look something similar to this:

const app = firebase.initializeApp({
     apiKey: "AIzaSyBsp1kn1fm1Yq9HdyV4iEgZFJYNdFlFtbY",
     authDomain: "social-media-dev-db845.firebaseapp.com",
     projectId: "social-media-dev-db845",
     storageBucket: "social-media-dev-db845.appspot.com",
     messagingSenderId: "379640171639",
     appId: "1:379640171639:web:6f41b2190d33766ddc0a72",
});

Now, let’s export app so we can use it in our app.

export default app;

There we have it! We have successfully set up Firebase in our project!

Step 3: Using Firestore

Now that we’ve connected Firebase to our app, we can start using Firebase features. One of the most popular ones is Firestore, a server-less database by Firebase. It’s very easy to set up and use, so let’s see how we can go about setting it up.

First, we’ll have to import the Firestore package:

import "firebase/firestore";

Now, let’s export Firestore so we can use it in our project.

We’ll create a variable called fireDBand export it.

export const fireDB = app.firestore();

Congratulations! You have learned how to successfully set up Firebase and Firestore in your React Native project. You can now import firebase from firebase.js and use it exactly like you would in any React app (read the documentation here)! f you have any questions, don’t hesitate to reach out in the comments!

Like what you read? Sign up for our newsletter below.