Push Notifications with React Native (iOS) and Firebase Cloud Messaging (FCM)

Image for post
Image for post

Push notifications are an essential and powerful way to communicate with your users and one way to implement them with React Native is by using Firebase Cloud Messaging (FCM).

Note: In order to use FCM you will need to set up a server (I used Django for my routes and PyFCM to make interacting with firebase easier)

At a high level here is how push notifications will work with our setup:

  1. An FCM Token will be created in the app and this will be used to identify a unique user’s device
  2. The FCM Token for the user will be stored on our server
  3. Using the unique FCM token we will create the push notifications on the server
  4. The unique user will be notified with the notification we sent to FCM from the server

Note: You MUST have a PAID Apple Developer account to enable push notifications in your app.

Step 1: Follow the guide here

The above link will guide you on how to set up your project for push notifications.

Step 2: Setup FCM

Make sure you have Cocoapods version > 1.o installed

Install the Firebase/Messaging pod:

cd ios && pod init
pod install Firebase/Messaging

Edit ios/your-project-name/AppDelegate.m:

Get the GoogleService-Info.plist file from your firebase console and place it in /ios/your-project-name

Step 3: Start sending notifications!

Follow the below example to start sending notifications:

For reference here is what some code on your server might look:

Congrats on getting notifications set up. If you got stuck on any of the above steps feel free to leave a comment and I’ll try my best to help.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store