React Native: Google Firebase Intro

We go over Google Firebase’s offerings and set up a quick-start template for accessing your Firebase project from React Native.

At Platypus, we’re big fans of Google Firebase.

It streamlines much of the development process, and enables simple, rapid scaling when you’re ready to go from MVP to production.

What is Firebase?

A comprehensive back end solution for your web and mobile apps. With Firebase, Google aims to take as much hassle out of the development process as possible so that you can focus on your app instead of getting different back end services to play together nicely.

You can spend more time getting the front end dialed in just the way you like without worrying about things like spinning up a server, provisioning a database, or configuring a realtime data sync pipeline (provided here by socket.io).

Pretty neat.

What can it do?

Everything. Well, practically everything. Here’s what’s on tap:

• Realtime Database
• Hosting
• Authentication
• File Storage
• Cloud Messaging
• Remote Config
• Test Lab
• Crash Reporting
• Notifications
• App Indexing
• Dynamic Links
• Invites
• AdWords
• AdMob

and more! Seriously, it does practically everything you would ask of a back end setup.

Perhaps more than that, it does them well as the over half a million developers (including big players like Lyft, Venmo, and the New York Times) working with Firebase will attest.

How do I use it?

Like everything else with Firebase, employing it in an app is surprisingly easy.

We’re going to focus on how to integrate Firebase with a React Native application. For information on how to sync up other applications to Firebase, please refer to the documentation.

Step 1: Create a React Native app

In a terminal window open to your folder of choice and invoke the React Native CLI to create a new application named “ReactNativeFirebase”.

react-native init ReactNativeFirebase
cd ReactNativeFirebase

Step 2: Install Firebase

Use NPM to install the official Google Firebase module.

npm install --save firebase

Step 3: Sign in with Google

Head over to https://firebase.google.com.

Use the link in the top right to log in with your Google credentials. If you don’t have a Google account, now would be the time to sign up for one.

Step 4: Create a new project

When you first sign in to Firebase you should be taken to the Console.

At the top it will have a brief welcome message. Bellow that will be a series of thumbnails representing the Firebase projects listed under your account.

We need to set up a new Firebase project for our app, so select the thumbnail with a large “+” sign that says “Add a project”.

A small modal will pop up and prompt you for a name and region for your project. Let’s name this project “ReactNativeFirebase” to keep things consistent and select your region. Then click “Create Project”.

Step 5: Get your project’s credentials

You should be taken to the “Overview” page for your new project.

This serves as the gateway to all of the features that Firebase has to offer. For now, we’re only going to focus on the landing page though.

In the main panel there should be a message welcoming you to Firebase and three circular icons under it. Click on the “Add Firebase to your web app” icon on the right.

A modal with some JavaScript should pop up. More importantly, there will be a variable in the script named “config” that contains things like “apiKey” and “storageBucket”.

Copy the contents of that config variable to the clipboard for later.

Step 6: Add your Firebase credentials to React Native

Create a new file in the application’s root directory called “firebaseConfig.js” and open it in a text editor.

At the top of the file, import the Firebase module.

Now just bellow that, initialize Firebase with your config values.

Finally, open up the index.ios.js and/or index.android.js file and import firebaseApp from the firebaseConfig.js file.

That’s it. The app is now all set up to use your Firebase project.

By using the firebaseApp name space you can access services like:

• Authentication: firebaseApp.auth()
• Realtime Database: firebaseApp.database()
• Cloud Storage: firebaseApp.storage()

Six steps to add a fully functional back end to your React native application. It doesn’t get any easier than that.

Next time we’ll build on this code to set up a React Native application that uses Firebase for authentication and data storage in a realtime database.

GitHub Gists and Repo

All of the GitHub Gists for this tutorial can be found here and the repo is here.