Empowering Mobile Apps: Harnessing React Native Expo with Firebase Integration

Web + Mobile Implementation

React Native Expo Setup

Set Up Your React Native Expo Project

Note: We have options to either set up application on a emulator or a physical device, for this project we are using emulators (Android Studio for android app and xcode for iOS).

1. Use the Expo CLI to create a new project.

2.Kickstart your project to confirm proper setup.

Firebase Web SDK Setup Process

Below are the steps we can use to get started setting up Firebase Web SDK with React Native Expo.  This setup is particularly useful when you want to leverage Firebase services in a project that also targets web platforms. Here’s a step by step guide to achieve this.

Step 1 → Add Firebase to Your Project

Install the Firebase package in your project.

2. Create a Firebase Project by navigating to the    Firebase Console,  and then sign in with your Google account, and create a new Firebase project.

3. In order to add Firebase to Your Web App, navigate to the Firebase Console, click on the web icon to add Firebase to your web app. You'll be provided with a Firebase configuration object.

4. Initialise Firebase in Your Project by creating a new file in the project (e.g., firebase.js) and initialize Firebase using the configuration object you obtained.

Step 2 → Use Firebase Services in Your Project

Now that Firebase is set up, you can start using it’s services in your React Native Expo project. Here's an example of how to use Firebase Authentication:

1. Import the Firebase instance you created in the previous step.

2. Use Firebase Authentication: Here's a simple example of signing in a user with email and password. ( Also make sure to enable Email / Password Authentication in Firebase )

Step 3 → Run Your Project

With Firebase integrated, you can now run your project on both iOS and Android platforms, as well as in the web browser.

React Native Firebase Setup Process ( For Mobile Only )

Step 1 → Install React Native Firebase

First, you need to install the core package and any other Firebase services you plan to use (e.g., Firestore, Authentication).

Step 2 → Create a Firebase Project

1. Go to the [Firebase Console](https://console.firebase.google.com/).

2. Click on "Add project" and follow the prompts to create a new Firebase project.

Step 3 → Register Your App with Firebase

For Android:

1. In the Firebase Console, click on the Android icon to add a new Android app to your project.

2. Enter your app's package name (e.g., `com.example.myapp`). “*You will get it from your app.json file*”.

3. Download the `google-services.json` file and place it in your project's `root` directory.

For iOS:

1. In the Firebase Console, click on the iOS icon to add a new iOS app to your project.

2. Enter your app's bundle ID (e.g., `com.example.myapp`). “*You will get it from your app.json file*”.

3. Download the `GoogleService-Info.plist` file and place it in your project's `root` directory.

Step 4 → Expo Prerequisite

Install Expo dependences

The following is an example app.json to enable the React Native Firebase modules App and Auth.

Step 5 → In this example we will use Email/Password Authentication

Ensure the "Email/Password" sign-in provider is enabled on the [Firebase Console](https://console.firebase.google.com/project/_/authentication/providers).

The createUserWithEmailAndPassword performs two operations; first creating the user if they do not already exist, and then signing them in.

Step 6 → Run the project

With Firebase integrated, you can now run your project on both iOS and Android platforms.