Category: tinder clone

Push Notification using React Native and Firebase – Part 1

Push Notification is an important feature in every App. Push notification allows your users to stay up-to-date with latest happenings in your App world. It also allows you to make them use your app on a regular basis. If your app doesn’t have Push Notification, you might make your user install your app, but then, soon they will forget using your app. So, considering the importance of Push Notification, we will learn in this series of article, how to implement Push Notification using React Native and Firebase Cloud Messaging (FCM).

There are various ways to implement Push Notification In React Native, among which,  I have tried following methods :

  1. Push Notification using Exponential framework (expo.io)
  2. Push Notification using One Signal
  3. Push Notification using Firebase Cloud Messaging

Implementing Push Notification using expo.io and One Signal is not hard, but have its own drawbacks. If you develop app with Exponential framework (expo.io), you won’t be able to directly use many available React Native Modules ( unless you eject it, which is again not easy and might make your app unstable ). One Signal doesn’t allow server less Push Notification i.e. If you want to send notification from one app to another, you will have to implement your own server. At present, Firebase Cloud Messaging is the only way to implement server-less Push Notification with React Native.

Implementing Push Notification using React Native and firebase is not easy. But I will ensure, that after reading this article series, it becomes a cake walk for you. So, lets get our hand dirty by doing some Reacty Notiy code.

First thing first, install React Native.

react native init RNF

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.42.3 (most stable at present). You can install specific version of react native using following command :

react-native init --version="0.42.3” RNF

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

npm install react-native-fcm --save

If you are using older version of XCode or React Native, you will have to adjust you react-native-fcm version accordingly, otherwise it will give errors and wont work.

Now, link the react-native-fcm package using the following command :

react-native link react-native-fcm

Now, we need to install the Firebase Cloud Messaging framework. I will use CocoaPods to do that, because I found it best and most efficient way to do that.  Make sure you have Cocoapods version greater than 1.0. Some people say CocoaPods did not work for them, so they did that manually. If you want to do it manually you can download the framework zip file from here https://firebase.google.com/docs/ios/setup#frameworks and follow the steps in the Readme file inside zip.

To install Firebase Cloud Messaging framework using CocoaPods first fire the command

cd ios && pod init

then, open the Podfile and below comment # Pods for RNF ( RNF is my project name, it will be your project name in place of RNF), type

pod ‘Firebase/Messaging’

So, my final Podfile looks like this

# Uncomment the next line to define a global platform for your project
# platform :ios, '10.0'

target 'RNF' do
  # Uncomment the next line if you're using Swift or would like to use dynamic frameworks
  # use_frameworks!

  # Pods for RNF
  pod ‘Firebase/Messaging’  

end

Now, finally run your project by firing the following command

react-native run-ios

If your App runs successfully that means everything is done correctly. That wan’t tough. Was it… ?