Push Notification using React Native and Firebase – Part 3

Welcome to the third part of the tutorial ‘Push Notification using React Native’. In this part we will see how Push Notification can be coded and  can be sent to the  users phone. If you have directly landed on this page, make sure you check the first 2 parts of the tutorial here :

http://nobrok.com/push-notification-using-react-native-and-firebase-part-1

and

http://nobrok.com/push-notification-using-react-native-and-firebase-part-2

So first we have to add the following header file to AppDelegate.m

next we need to add the FIR configuration code snippet to didFinishLaunchingWithOptions method like this

Next, we need to add following method to AppDelegate.m file

So, my final AppDeletgate.m file looks like this :

Now we need to add code to our React Native js files. So, my new index.ios.js file looks like this

The above codes you can also check in documentation of package react-native-fcm

Now, we need to run the application on our mobile. The first time we run, it will ask for the permission to send notification. We need to accept the permission. We need to turn on the debugger console where we will get a FCM Token.

Finally, we need to go to Firebase google console and click on Notification tab on left side and then click on ‘SEND YOUR FIRST MESSAGE’ button. Now, enter the message text, select ‘SingleDevice’ checkbox and enter the ‘FCM registration token’  that we have in the debugger console log. Now, when you click the send message button, you will see the message in you phone in which app is running. 

To understand the above steps please watch the below video :

 

 

2 thoughts on “Push Notification using React Native and Firebase – Part 3”

  1. Thanks for your awsome tutorial
    i got an error after importing the declaration and the methode inside of AppDelegate.m :

    FCMNotificationReceived use of undeclared identifier

    any help ?

Leave a Reply

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