How to build a React Native App using Firebase. (Part 1)

Updated May 11: Added Step 5 (CRUD).

Please note that this tutorial assumes you have some JavaScript or React Native experience, this tutorial does not explain each line of the code instead it presents you with the code and gives you an overview of what the code does and points out the important parts of the code. I have made the code as simple as possible, if you have any questions, please do not hesitate to leave a comment.

In this tutorial, we will build a React Native app that uses Firebase Authentication and Realtime Database services, to find out more about Firebase, visit this link.

By the end of Part 4, this is what we would have built. [Facebook login not shown in GIF].

Demo

Now, that we have gotten that out of the way, LET THE CODING BEGIN!

Step 0: Register our app with Firebase and Facebook

Facebook
Follow the instructions at this link to register your app and set it up for Facebook integration. Follow the instructions for The Expo client app.

Firebase
To create a new firebase project, go to your Firebase console, click “Add Project”, type in your project’s name and select your region.

Enable Facebook Login: (taken from https://firebase.google.com/docs/auth/ios/facebook-login)

1. In the Firebase console, open the Authentication section.
2. On the Sign in method tab, enable the Facebook sign-in method and specify the App ID and App Secret you got from Facebook.
3. Then, make sure your OAuth redirect URI (e.g. my-app-12345.firebaseapp.com/__/auth/handler) is listed as one of your OAuth redirect URIs in your Facebook app's settings page on the Facebook for Developers site in the Product Settings > Facebook Login config.
4. On the your Facebook app’s settings page, click ‘Add Product’, select the ‘Facebook Login’ product and click ‘Set Up’.
5. On the left side, click ‘Settings’ under Facebook Login and add your OAuth redirect URI to your app’s Valid OAuth redirect URIs

On the left side, select “Project Overview” and click “Add firebase to your web app” link on the home screen and take note of the config object, this will be later used in our app config file.

Step 1: Getting Started

If this is your first time creating a React Native app, make sure you have Node, npm or yarn installed. For this project, I will be using yarn and create-react-native-app which has been dubbed as the easiest way to start building a new React Native app.

There are many advantages to using CRNA, one being that it allows you to start a project without installing or configuring any tools to build native code — no Xcode or Android Studio installation required and you can install the Expo app on your iOS or Android phone for testing.

Before we begin, we have to globally install the create-react-native-app command line utility using npm or yarn.

Open up your terminal and run one of the commands below depending on whether you are using npm or yarn.

$ npm install -g create-react-native-app
  # or
$ yarn global add create-react-native-app

Now that CRNA is installed, we can create a new project by running the command below:

$ create-react-native-app firebase-auth-app
$ cd firebase-auth-app/

Step 2: Install Dependencies

We will be using the following packages:

• Redux for managing the app’s state
• React-Redux, will be used to connect our app’s components to the redux store.
• Redux Thunk is a middleware for Redux that allows us to write action creators that return a function instead of an action.
• React Native Elements as our UI Toolkit,
• React Native Router Flux for our apps navigation,
• Axios, a promised-based HTTP client for making calls to our API
• React Native Redux Listener, a Redux store enhancer to dispatch common React Native events, we will be using this package to detect change in our network connection
• React Native Loading Spinner Overlay
• Moment.js
• React Native Loading Keyboard Spacer

and of course

• Firebase

Install Dependencies

Before we continue, run the command below to test the app, This will start a development server for you, and print a QR code in your terminal. If you are using the Expo app, you can scan the QR code.

$ yarn start

In Part 2, we will create the app’s directory, redux actions, reducers and api.

Thats all folks!

Related Tutorials

1. Tutorial 1: React Native Redux Boilerplate
2. Tutorial 2: React Native Redux with CRUD operations
3. How to build a React Native App using Firebase. (Part 2) (Backend)
4. How to build a React Native App using Firebase. (Part 3) (Frontend)
5. How to build a React Native App using Firebase. (Part 4)(Facebook Login)
6. How to build a React Native App using Firebase. (Part 5)(CRUD)

Other Tutorials

1. Tutorial 4: How to Build a Laravel 5.4 JWT-Powered Mobile App Authentication API
2. Tutorial 5: How to Build a Laravel 5.4 JWT Authentication API with E-Mail Verification
3. Tutorial 6 & 7: How to Build a Laravel 5.4 Administration Module with Role-based permissions using Entrust package