How To Integrating Firebase with iOS in React Native

Firebase iOS setup in react-native:

Firebase is a Googleʼs mobile application development platform that helps you build, improve, and grow your app so here we are going to explain “How To Integrating Firebase with iOS in React Native“.

itechinsiders - creating firebase project
www.itechinsiders.com

Adding Firebase credentials to your iOS app:

Basically, we are use firebase for getting real-time data or when we want to do authentication, database, etc. also firebase comes with push notification, analytics, crash reports and much more, thatʼs why every developer would love to integrate it to his app. so letʼs start with adding firebase to our project for getting firebase device token to send a notification in iOS

Create a project on Firebase:

Go to Firebase Console and add your project, Now got to firebase console then in side menu click the gear icon then right-click select the project setting then general tab then add an app, now the screen is look

itechinsiders - creating firebase project
www.itechinsiders.com

Please click on iOS:

  • After click iOS, a screen is appeared in which Enter your application details then click on ‘Register app’.
  • The ‘iOS bundle ID’ must match your local iOS bundle ID.
  • You get it to form your Xcode, open your Xcode click on the name of the project then target project then general tab, the screen looks like.
itechinsiders - creating firebase project
  • The register app screen looks like.
itechinsiders - creating firebase project
www.itechinsiders.com
  • After clicking the ‘app register’ the next screen is opened, where we able to download GoogleService-Info.plist, download this file and put it on the root of your project, this file contains all information related to firebase authentication, place the file in the root of your iOS app at ios/[YOUR APP NAME]/GoogleService-Info.plist
itechinsiders - creating firebase project
www.itechinsiders.com
  • Again click on next, this part contains the pod file code and way of setup pod, the screen looks.
itechinsiders - creating firebase project
www.itechinsiders.com
  • Now again click on the Next button, this step contains the code of appDelegte.m file in both languages swift and obj c opened screen looks like.
itechinsiders - creating firebase project
www.itechinsiders.com
  • Now project setup with firebase is completed, letʼs go to the next step.

Adding Path Setup for Firebase library to your iOS app:

Click on the project then build setting then find header search path and Added ‘$(SRCROOT)/ Firebase’ to Framework Search Paths and Heder Search Paths.

Adding a Firebase library to your iOS app:

The command for installing the library:

npm install --save react-native-firebase

Then need to link the library with our react-native project(if your react-native version is less than 0.60):

react-native link react-native-firebase

Adding Firebase pod to your iOS app:

Pod file code:

First delete the podlock file and pod folder then paste these code

 pod 'Firebse'
 pod 'Firebse/Anlytics'
 pod 'Firebse/Auth' pod 'Firebse/Core'
 pod 'Firebse/Messging' ,

Or

pod 'RNFirebse', :path => '../node_modules/rect-ntive-firebse/ios/ RNFirebse.podspec'

After this runs the command

Go to within iOS folder and type
pod install

Setup Xcode for iOS app:

Adding GoogleService-Info.plist in Xcode, for this, you need to right-click on the name of the project looks something like.

itechinsiders - add in firebase iOS react native
www.itechinsiders.com
  • Now we open the next screen, where you need to go to that place where GoogleService-Info.plist file is available, now select it and click on add button, the screen looks something like.
itechinsiders - add in firebase iOS react native
www.itechinsiders.com
  • In my project, its already added so it is hidden. Now you need to open the library folder and check for RNFirebse library if it not added here then, we follow the below step to dd it manually if it added here then no need to do this step.
  • Open Xcode -> right-click on name of project->select the option add files, screen looks.
itechinsiders - add in firebase iOS react native
www.itechinsiders.com
  • Add the Xcode project if already itʼs not added in your Xcode -> library, Then, open a new screen which looks like.
itechinsiders - add in firebase iOS react native
www.itechinsiders.com
  • And one more important thing is please click on RNFirebse.xcodeproj and click on Build Phses-> Link Binary With Libraries, now check if the FirebseCore.frmework file is already added or not if added then fine, if not added then click on + button and add these frameworks, which looks like.
itechinsiders - add in firebase iOS react native
www.itechinsiders.com

Now Xcode setup is completed, if all thing going good then please go to the file where you want to access the firebase token and the import these lines.

Initialize the firebase service in AppDelegate.m iOS app:

To do this, open the AppDelegte file within your project /ios/{projectNme}/AppDelegte.m. First, we open the AppDelegte.m file then At the top of the file import the
Firebase module:

@import Firebse;
  • Within the didFinishLaunchingWithOptions method, add
    the configure method:
(BOOL)appliction:(UIApplication *)appliction
 didFinishLunchingWithOptions:(NSDictionry )lunchOptions {
 if ([FIRApp defultApp] == nil) {
 [FIRApp configure]; //add this line.
}

Code setup in iOS app:

import firebse from 'react-native-firebase';
var fcmToken; componentWillMount() { firebase.messaging().getToken().then((token) => {
 fcmToken = token
 console.log('fcmToken', fcmToken)
}); 
}

Please note:

That every time you change appʼs bundle Id whether it be iOS or Android. You will have to add a new pp in your firebase project with a new bundle Id and download the new file again.

Expected Issues:

  • Then when I try to build ‘RNFirebseUtil.h’ throws the ‘Firebase.h’ not found: error(because of header search path not set correctly).
  • “FirebseCore/FirebseCore.h” file not found from “Firebase.h”(bcoz of framework not added).
  • One more thing to check: Push notification must be on from capabilities of a project(add in firebase iOS login)
itechinsiders - add in firebase iOS login
www.itechinsiders.com

here you can find the sending notification in android

and you can find my post on medium as well click here please follow me on medium as well.

So our topic “How To Integrating Firebase with iOS in React Native”

and if any other issue then please comment

Happy Coding Guyz

Related Post

Leave a Reply

Your email address will not be published. Required fields are marked *