Introduction
Sending push notifications is one of the best ways to keep users engaged with your app. But, implementing push notifications into an iOS app is quite difficult because of several iOS versions and changes in XCode and Swift. There were several notifications we used to use that are not present in the current versions of iOS now, which creates confusion.
Keeping it in mind, we have come up with a push notification guide that will help you to implement push notifications in an iOS app.
So, are you seeking to start coding with us? Then, scroll down!
Steps to Implement Push Notifications in an iOS App
There are four steps you need to follow, and the steps are as follow:
Step 1: Firebase Configuration
Step 2:Create an APN Certificate in the Apple Developer account and connect it to the Firebase project
Step 3: React Native Push Notifications Coding Integration
Step 4: Testing
Now, let’s see each step in detail.
Step 1: Firebase Configuration
We start by logging into https://console.firebase.google.com and starting a new project. Then, build a new project.
Then, add an iOS app.
After this, download the “GoogleService-Info.plist”.
Open your iOS Project in Xcode. Right-click on the project to add GoogleService.info.plist file into your root folder (PROJECTNAME/ios) of your project.
Step 2: Create an APN Certificate in the Apple Developer account and connect it to the Firebase project.
Now, follow the steps by opening the link https://rnfirebase.io/messaging/usage/ios-setup to create the APN Key on the account of Apple Developer and link the .p8 credential to the firebase iOS project.
In Xcode, add the capabilities “background modes” and “Push notifications” for the project.
Once that is done, enable “Apple Push Notification Service (APNs)” and register a key in your Apple Developer account.
After this, under the APN authentication key section upload the .p8 file in the iOS project. Next, enable the push notification service under the identifier.
Step 3: React Native Push Notifications Coding Integration
The code changes required in the project for push notifications to be effective are as follows.
- Include the following packages from the terminal:
Yarn add @react-native-firebase/app
Yarn add @react-native-firebase/messaging
Yarn add @react-native-community/push notifications-ios
Yarn add react-native push notifications
- Add the marked in green code lines in the pod files.
pod ‘firebase/Messaging’
pod ‘RNFBApp’, :path => ‘../node_modules/@react-native-firebase/app’
pod ‘RNFBMessaging’, :path => ‘../node_modules/@react-native-firebase/messaging
- Go to the ioS project folder in the terminal and type the command “pod install”.
- Now, make the required changes associated with “AppDelegate.h” and “AppDelegate.h” according to the information provided in the link https://github.com/react-native-push-notification-ios/push-notification-ios. These required changes are included in the package mentioned above “@react-native-community/push notifications-ios”.
- Now, make the required changes associated with “AppDelegate.h” and “AppDelegate.m” according to the link https://github.com/zo0r/react-native-push-notification-ios/push-notification. These changes are present in the package mentioned above “react native push notifications”.
- Add import <Firebase.h> in the “AppDelegate.h” file. Ensure that you are adding the import statements on the “AppDelegate.m” file above the import of “#ifdef” as shown below
- Add “[FIRApp configure];” in the “AppDelegate.m” file’s “DidFinishLAunchingWithOPtions” method.
- Then, in the project’s root directory, add the following packages to the App.js file.
Import messaging from @react-native-firebase/messaging;
Import PushNotification from “react-native-push-notification”;
Import PushnotificationIOS from “@react-native-community/push notifications-ios”;
- Add the following 2 methods in the App.js
async requestUserPermission() {
await messaging().requestPermission();
}
async getToken() {
const fcmToken = await firebase.messaging().getToken();
if (fcmToken) {
// user has a device token set it into store
await AsyncStorage.setItem(‘fcmToken’,fcmToken);
}
else{
NotificationService.error(constant.error, ‘Could not get the FCM token’);
}
}
- Add the following code in the “componentDidMount’ method.
this.getToken();
PushNotification.configure({
// (optional) Called when Token is generated (iOS)
onRegister: function (token) {
messaging().subscribeToTopic(“all”);
console.log(“TOKEN:”, token);
},
// (required) Called when a remote is received or opened, or local notification is opened
onNotification: function (notification) {
console.log(“NOTIFICATION:”, notification);
//This condition is for identifying the local notification and remote notification.
//If this condition is not present, it would go into infinit loop
// Consider only the remote notification
if(notification.title != undefined && notification .message != undefined)
PushNotification.localNotification(notification);
notification.finish(PushNotificationIOS.FetchResult.NoData);
},
// (optional) Called when Registered Action is pressed and invokeApp is false, if true onNotification will be called (iOS)
onAction: function (notification) {
console.log(“ACTION:”, notification.action);
console.log(“NOTIFICATION:”, notification);
// process the action
},
// (optional) Called when the user fails to register for remote notifications. Typically occurs when APNS is having issues, or the device is a simulator. (iOS)
onRegistrationError: function (err) {
NotificationService.error(constant.error, err.message);
},
senderID: ‘XXXXXXXXXXX’,
// IOS ONLY (optional): default: all – Permissions to register.
permissions: {
alert: true,
badge: true,
sound: true,
},
// Should the initial notification be popped automatically
// default: true
popInitialNotification: true,
/**
* (optional) default: true
* – Specified if permissions (ios) and token (ios) will requested or not,
* – if not, you must call PushNotificationsHandler.requestPermissions() later
* – if you are not using remote notification or do not have Firebase installed, use this:
* requestPermissions: Platform.OS === ‘ios’
*/
requestPermissions: true,
});
this.requestUserPermission();
messaging().setBackgroundMessageHandler(async remoteMessage => {
//This handler is called when notification is delivered in the background.
//Handle the background notification here
console.log(‘Message handled in the the background!’, remoteMessage);
});
Note: Replace the senderID value “XXXXXXXXXXXX” with the actual “senderiD”. This is available on Google Firebase Console, as shown below:
In the above-mentioned code, you must understand a few things:
- PushNotification.configure is the method that is utilized to set the settings when the APP first loads.
- When a device is successfully registered with the firebase messaging Service, the event “onRegister” is triggered. We must subscribe to any topics in the firebase messaging system here. We can use topics when we want to send notifications to several devices.
- When the device gets a notification from the Firebase, the event “onnotification” is called.
- when the application is open and active
- when the application is closed but still running in the background
- when the application is terminated
- We finally call the function that obtains the important permission for displaying the notification at the conclusion of “componentDidMount”
- The “gettoken” method was also called in “componentDidMount”. The FCM token that we receive in the “onRegister” function does not work, which is the reason. The FCM token is the token that is returned by the “firebase.messaging().getToken” method.
Step 4: Testing
We can use the Firebase console to send react native push notifications. Choose the cloud messaging option from the side menu. Then, click “Send your first message”
You will appear on this screen after clicking the button where you can enter the title and body of the test notification. Once the notification’s text has been entered, click “Send test message“.
Now, type the FCM token of the device, on which you wish to send a push notification.
Here, add the notification and tap on the “Test” button.
fcmToken = await firebase.messaging().getToken();
console.log(‘fcm Token: ‘, fcmToken);
Then, all of a sudden, you get a push notification on your iOS app.

Final Words
We are done now! We hope you have enjoyed our push notification guide. So, if you are going to implement React Native push notifications into an iOS or Android app, follow this blog. Moreover, if you want to create push notifications within a couple of minutes, don’t forget to visit WonderPush, the best push notification provider.