[Demystifying Firebase (Part-1)] How to setup Firebase in React Native CLI App.
Tags: reactnative, firebase, javascript, beginners
Published: 2024-04-05 17:31:19

## 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](https://rnfirebase.io/) 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](https://reactnative.dev/docs/environment-setup)


## 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 https://dev.to/suryanshsingh2001/how-to-setup-rnuilibwix-for-a-react-native-cli-project-36f %}

## Creating our firebase project
- Head over to the [Firebase console] (https://console.firebase.google.com/) and log in to your Google account.
- Upon signing in, create a new project. I'll name mine **demystify-firebase**.

![Setup 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ofil2kainejwdpcby11.png)

- Select your preferred options for Google Analytics or stick with the default settings.
![Setup 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ka6w1nz0zgszilpinusi.png)

- Click on create Project.
![Setup 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qthmoxvdyz33d0zk2hx0.png)

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

- You will be greeted with this dashboard


![Firebase Dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6tsah2vnautm47mjnlr4.png)


## 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.

![Add App](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b31x9p2y3gtjd748sn0s.png)

- 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```

![Setup App-1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oson8a1gtx34755sx6wh.png)

- Download this file and place it in your `android/app/`directory
For reference:

![File Structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7jyv9kipfy9er7e82syt.png)

- **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 rebuilt gradle, go to `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](https://rnfirebase.io/)