ReactNative Push Notifications with Firebase for iOS - Ilir HUSHI
ilir hushi, portfolio, resume, full-stack developer, mobile developer, web developer, backend developer, frontend developer
523
post-template-default,single,single-post,postid-523,single-format-standard,ajax_fade,page_not_loaded,,qode_grid_1300,qode-content-sidebar-responsive,qode-theme-ver-13.9,qode-theme-bridge,disabled_footer_bottom,wpb-js-composer js-comp-ver-5.4.7,vc_responsive

ReactNative Push Notifications with Firebase for iOS

ReactNative Push Notifications

ReactNative Push Notifications with Firebase for iOS

What are push notifications?

 

A push notification is a message that pops up on a mobile device. App publishers can send them at any time; users don’t have to be in the app or using their devices to receive them. They can do a lot of things; for example, they can show the latest sports scores, get a user to take an action, such as downloading a coupon, or let a user know about an event, such as a flash sale.

Push notifications look like SMS text messages and mobile alerts, but they only reach users who have installed your app. Each mobile platform has support for push notifications — iOS, Android, Fire OS, Windows and BlackBerry all have their own services. Below I will show how to integrate ReactNative Push Notifications for iOS platforms.

Refer to this article for more informations on push notifications: https://www.urbanairship.com/push-notifications-explained

Steps to integrate in ReactNative Push Notifications for iOS platform

 

First thing first, create the React Native new project that we will configure the Push Notifications.

Now, when you install React Native there are few things that need to be considered to make things work without any error. You should be using XCode 10 (Latest at present) , React Native 0.55 (most stable at present).

Next, we install Firebase Cloud Messaging package for React Native https://github.com/evollu/react-native-fcm

After installing the Firebase Cloud Messaging Package we need to install FCM framework using the CocaPods. To install it we first naviagate inside the “ios” directory found on the “react-push-notifications” project that we just created and we run the command:

So, my PodFile looks like this

And if you already have an existing pod file after adding the line at the Podfile you only have to run the command:

to install the “Firebase/Messaging” framework in the iOS project.

Now we test and run the project:

and if it runs successfully that means everything is implemented correctly.

After then we go to Firebase Console (https://console.firebase.google.com/) and create a new project by clicking ‘Add Project’ button, then entering the project name and hitting the ‘Create Project’ button. In the next screen we need to click ‘Add Firebase to your iOS app’ to create a new app. In the pop up shown we enter the bundle id which we can get from the XCode of the iOS project. Then we will get the screen to download the ‘GoogleService-Info.plist’ which we will drag and drop it on the root iOS app by checking the ‘Copy items if needed’.

Next, we have to go to the developer apple account to create the Authentication key which you can check this video tutorial how to create it and then uploaded it to the Firebase Console: https://youtu.be/HRocERqesHA

After following the instructions as shown in the video, all left to do is some changes on the iOS native code as shown below.

So first we have to add the following code at AppDelegate.m

and then add the code snippet to didFinishLaunchingWithOptions method:

Next, at the AppDelegate.m we add:

So, the AppDelegate.m should look something like this:

And we have to add the code at React Native js files, so the new index.js file looks like this:

We then run the project to see if everything is working. After a successful run we fire a remote test notification from the Firebase Console and if you receive it we are successfully all set 🙂

Having Troubles?

If you run into any issues during the implementation of the push notifications please leave a comment below so I can help you with your issue or have other questions contact me.

%d bloggers like this: