Demystifying Firebase (Part-1)

Introduction

Hey there, fellow developers! 🚀

Welcome to the start of our Firebase journey within React Native CLI apps! Firebase isn't just a tool; it's akin to wielding a magic wand that effortlessly transforms your app into a powerhouse of functionality.

In this series, we're embarking on a quest to unravel the mysteries of Firebase integration, starting from the ground up. So, buckle up and prepare to supercharge your React Native projects with Firebase's incredible capabilities. Ready to dive in? Let's do this!

We'll be utilizing React Native Firebase for this.

Setup React Native App

First things first, let's set up your React Native app. If you encounter any hurdles along the way, refer to the React Native app setup guide here.

React Navigation Setup (Optional)

Following the app setup, configure the React Navigation Library or any other navigation solution of your preference. In case you hit a snag, feel free to check out my previous post for guidance. Link

Creating our Firebase Project

• Head over to the Firebase console and log in to your Google account.
• Upon signing in, create a new project. I'll name mine demystify-firebase.

• Select your preferred options for Google Analytics or stick with the default settings.

• Click on create Project.

• Once the project is created, select it from the console.

• You will be greeted with this dashboard

Creating Our App

• Click on "Add an app," and for now, let's proceed with Android. You may need to repeat these steps for iOS.

• Fill in the required details. The app name can be found in android/app/build.gradle under the namespace.

Note: If you need to phone number auth or google signin, get your debugskeys.

cd android && ./gradlew signingReport

• Download this file and place it in your android/app/ directory. For reference:

• Follow the prompts until completion. No need to follow additional these steps just click "Next."

• In your /android/build.gradle, add the following:

buildscript {
  dependencies {
    // ... other dependencies
    // NOTE: if you are on react-native 0.71 or below, you must not update
    //       the google-services plugin past version 4.3.15 as it requires gradle >= 7.3.0
    classpath 'com.google.gms:google-services:4.4.1'
    // Add me --- /  }
}

In your /android/app/build.gradle, add:

apply plugin: 'com.android.application'
apply plugin: 'com.google.gms.google-services' // <- Add this line

• We are all set here, just rebuild your gradle and start your React Native project. To rebuild gradle, go to the android folder, and run

./gradlew clean

• Restart your app.

If you've made it this far, congratulations! You've successfully set up Firebase with your app.

In the next part, we'll delve into adding Firebase authentication to our app.

Encountered any issues along the way? Drop a comment below, and I'll be glad to assist.

Source: React Native Firebase