1. Home
  2. Docs
  3. Mobile App
  4. Setup Firebase Cloud Messaging (Push notification)

Setup Firebase Cloud Messaging (Push notification)

This section explain how to set upi the FCM push notification  for both the ios and the android. If you don’t have account with firebase kindly go to https://console.firebase.google.com/u/0/ 

and register for an account. create a new project and navigate to the project settings as shown below

Scroll down and click the button name add app and below i will separate the instructions for android and ios, lets start with the android

 

Android Setup

Choose add Firebase to your android app and follow the form

 

  1. In the android package name , you will need to choose a perfect name for your app which will be use for both the android and ios app, for example crea8social package name is com.procrea8.newcrea8social

So yours can be com.yourcompany.appName

Note no space allowed in the package name

2. In the nick name, input your app name

Click the register app button

Download the config file and save on your PC, will be you use it later

Keep clicking next till the modal disappear

 

Now lets set the Google FCM Api Key in the api plugin settings , but lets get this key from our firebase console, go to firebase console -> your project settings -> and copy the web api key as shown below

 

Now go back to your api settings on your website at admincp -> settings -> integrations -> Api  and set the google fcm key as shown below

Now we are going to our code to copy the config file we download into our code, go back to your VScode editor and navigate to this folder

android -> app 

Paste the config file there as you seen in the image below

 

Rename Project

You need to rename the project to follow our new package name you specify in the firebase console for example com.yourcompany.appname

Install this package  https://github.com/junedomingo/react-native-rename

Run npm install react-native-rename -g  in your cmd

After successful installation of this package run this command

react-native-rename “appname” -b com.yourcompany.appname

Change appname to your app name and let com.yourcompany.appname as specify in the firebase console

 

With this we have successfully set up FCM push notification for android, you can go to  Run your app 

to run your app for android if you want to setup for the iOS, you can continue below

 

iOS Setup

You will need to open this ios/newcrea8social.xcworkspace in XCode , after successful open in Xcode continue with the following

Now lets go back to our firebase console project settings to add new app for iOS this time

Click the add app button -> choose add firebase to your iOS app

Enter your package name as you did in the android section and download the config file , keep it on your PC we will need to add it to the opened XCode project

Now add it to our app through XCode

 

Right click on this folder as shown above and click add files , and choose the GoogleServer-info.plist file you download , it will be better you delete the current GoogleService-info.plist file to prevent duplicate

 

Rename project

As we did for android we need to do for iOS as well but this time it will be done in the xCode and its more easier than the android though with some limitations but don’t worry everything will still work fine

Click on the info.plist file and change the following as shown below