How to Integrate Firebase in React Native Android and iOS App

React Native + Firebase

This is How to Integrate Firebase in React Native Android and iOS App. In this example, you will see step by step guide to add Firebase in your Android and iOS app.

If you are using any of the Firebase features you have to integrate Firebase in your project. Please note we are not talking about the integration of any feature in this post, we will cover the integration of the Firebase SDK in your Android and iOS project after the integration of your Firebase you can go back to the original post to continue.

How to Integrate Firebase SDK in React Native?

Please follow the below steps to integrate firebase into your application:

1. Open Firebase Console

First of all open Firebase console and log in from your Google account. If you have already created any project you can use that one or you can create a new one. If you click on the new project then you will see a small 3 step form. Please fill the form and move to the next step.

2. Create a Firebase Application

After creating the project you can see a home screen with the options to add firebase in IOS, Android or web. We will create the application for both Android and iOS. Let’s start with the Android so click on the Android option.

3. Add Android App Details in Firebase App

After clicking on the Android you will see a step form in which the 1st step is to register your app. Please fill the package name, which can be found in the Yourproject -> android -> app -> src -> main -> AndroidManifest.xml file, App Name is the name of your application and SHA1. Please note SHA1 is shown optional here but I suggest filling it right now as you have to do it letter also. To know more about How to generate Debug / Signing certification SHA-1 visit here. Now hit “Register app”

4. Download and Place google-service.json

In the next step, it will provide you google-service.json to place into your project. Download it and copy the same in Yourproject -> android -> app directory. Press next

5. Make some changes in Android Files

Now in the next step please open the project in Android Studio and add the lines and sync the project according to the instructions. Press Next

6. Run Android App to connect with Firebase

Now we have to run the app so that firebase can set up the connection with our app and can verify the installation

If you have done everything correctly and have inserted the correct SHA1 then you will see a green message to notify successful connection

Here we are done with the installation of Firebase in Android. Now let’s see for iOS.

7. Add iOS App Details in Firebase App

After the installation of Firebase in Android please go back to the home again by clicking Project Overview. You will see a similar screen like the 2nd step. Now click on the iOS to add firebase in the iOS App.

After clicking on the iOS you will see Add Firebase to your iOS App. Please fill the iOS bundle ID and application name, you can skip App StoreID and click “Register App”

8. Download and Place GoogleService-info.plist

You will see the instruction to download and add GoogleService-info.plist into your project

To add this file download the file and open the project in Xcode. Please click on the main project directory (not the project) for the options and click Add Files…

Please select the downloaded file, also check copy items if needed and click Add

After that, you will see the downloaded file in the main folder of your project

9. Make some changes in a pod file

After that, you will see the next step in the firebase console to add 1 line in the pod file. Do remember, for React Native >= 0.60 you don’t have to make a pod file as it is already there in your project. we will just add the given pod

Please noticed in pod section it says “add pods for any other desired Firebase products” which means whenever we want to use any Firebase we can see the pod in the list here and can add that in pod file to use it. For now you can copy the given pod and paste it to the podfile as given below, you can use add any pod in future.

10. Install the pod

As we have added a new pod in the pod file we need to install the pod file again for that open the terminal and run the following command from your project’s main directory, This will install the added pod into our project

cd ios && pod install && cd ..

For any feature if you add any pod later you need to install the pod again using the same command.

11. Make some changes in AppDelegate.m file

After that move to the next step in Firebase console and you will see some additional lines to add in AppDelegate.m. Please note we have to add Objective-C code but with some changes for React Native. Please see the screenshot below.

Add the above code but with some slight changes. Please look at the screenshot below

12. Run iOS App to connect with Firebase

Now we have to run the app so that firebase can set up the connection with our app and can verify the installation

If you have done everything correctly then you will see a green message to notify successful connection

Here we have done with the installation of the Firebase in the iOS app.

Now you can go back to the page where you have come from

• Example of Google Sign In in React Native Android and iOS App

That was how to Integrate Firebase in React Native Android and iOS App. If you have any doubts or you want to share something about the topic you can comment below or contact us here. There will be more posts coming soon. Stay tuned!

Hope you liked it. 🙂