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.
The related post is
Integration of Firebase SDK
Firebase is the easiest way to integrate Google SignIn in your Application. Please follow the below steps to integrate firebase into your application.
1. 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 newt step.
2. 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.
Integration of Firebase in Android
3. 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 to fill 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. 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. 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. 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.
Integration of Firebase in iOS
After the installation of firebase n 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.
7. 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. 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. 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
Copy the given pod and paste it to the podfile as given below
10. 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
1 | cd ios && pod install && cd .. |
11. 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.
Please add the above code but with some slight changes. Please look at the screenshot below
12. 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
That was how to Integrate Firebase in React Native Android and iOS App. If you have any doubt 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. 🙂
