WHAT IS A PUSH NOTIFICATION? AND WHY IT MATTERS?
Push notification is a message that pops up on your mobile device even when you are not using the app. For app publishers, it is a gateway to speak directly with app users. Examples include getting a notification when a transaction is performed or getting a new offer from your online retailer – these notifications pop up only for Apps that are previously installed on the device.
According to a survey, implementing push notification improves app engagement by 88%. Push notification was introduced to attract users to return to an application. The survey mentioned that the retention rate of an app increased by 4 to 10x.
This blog will guide you to implement push notification using Firebase in React Native for iOS devices.
Requirements:
- React Native Project
- Xcode Version >= 10.x
- Apple Developer license
- Physical iOS device

Following are the important steps to be performed:
STEP 1. CREATE CERTIFICATE NEEDED FOR PUSH NOTIFICATION
iOS: To start using push notification with iOS device following certificates are mandatory:
- Login to https://developer.apple.com/
- Go to Certificate ID’s and profiles
- Go to Identifiers
- Select app Id’s
- Click on + to create new app id
- Enter name of your App
- Enter Bundle ID(same as XCode bundle Identifier)
- Go to Xcode
- General->Identity->Bundle Identifier
- Select Push Notification
- Click on Continue
- Click on Register and then Done
- Go Back to App Id’s
- Select your app from App Id’s
- Click on Edit
- Under Push Notification Section
- Select Development SSL Certificate => For Development or
- Select Production SSL Certificate=> For Production.
- Click on Create Certificate
- Click on Continue
- Now, upload Signing Certificate.
- Create the Signing Certificate needed for Apple Push Notification Service SSL.
- Go to Keychain Access on your Desktop
- Tab on Keychain Access->Certificate Assistant
- Select “Request a Certificate From a Certificate Authority”
- Enter Email Address
- Select Save to disk
- Click on Continue and save the file
- Choose .csr file we created in previous topic.
- Download your Certificate
- Go to Keychain Access on your Desktop
- Create the Signing Certificate needed for Apple Push Notification Service SSL.
- To Convert .csr file to .p12 file
- Double Click on recently generated .cer file.
- If you have previously created .csr file.
- Go to Keychain Access on your Desktop
- Go to Certificates
- Select your certificate, right-click and choose to export in .p12 format.
- Enable Capabilities
- In Xcode, enable the following capabilities:
- Push Notifications
- Background modes > Remote notifications
- In Xcode, enable the following capabilities:
STEP 2. FIREBASE SETUP
- Login to https://console.firebase.google.com
- Click on Add Project (Existing User) / Click on Create Project (New User)
- Enter your new Project Name, Project Id and Region.
- Click on Continue button
- Now you are on Homepage
- Click on iOS option
- Enter Bundle ID(same as xcode bundle Identifier)
- Enter App nickname and App Store ID
- Click on Register app and then Done
- Download GoogleService-Info.plist file and add into your root folder of your project.
STEP 3. TO INITIALIZE FIREBASE INTO AN EXISTING PROJECT
1.Add library:
For React Native firebase(V5.x.x):
npx install --save react-native-firebase
Or
npm install --save react-native-firebase
react-native link react-native-firebase
For React Native Firebase(V6.x.x):
yarn add @react-native-firebase/app
For users on React Native >= 0.60, the module will be automatically linked to your project.
2.Add following into your existing project:
Common for React Native Firebase(V5.x.x and V6.x.x):
a.Add following line at the top of ios/[YOUR APP NAME]/AppDelegate.m file:
@import Firebase;
b.Add the following line at beginning of didFinishLaunchingWithOptions:(NSDictionary*)launchOptions method :
if ([FIRApp defaultApp] == nil) {
[FIRApp configure];
}
3.Make your pods up-to-date in podfile:
For React Native firebase(V5.x.x):
1.Add following pod:
pod 'Firebase/Core'
2.Run
pod install
For React Native firebase(V6.x.x):
$ cd ios/
$ pod install --repo-update
STEP 4. TO MAKE USE OF FIREBASE CLOUD MESSAGING
For React Native firebase(V5.x.x):
1.Add following pod:
pod ‘Firebase/Messaging'
2.Run
pod install
For React Native firebase(V6.x.x):
yarn add @react-native-firebase/messaging
cd ios/ && pod install
STEP 5. SETTING UP THE APPLICATION TO GET A PUSH NOTIFICATION
While setting up you will come across the following terms:
- Message types: There are two types of messages handled by FCM:
- Data messages: Data messages are used to handle data along with the notification.
- Notification messages: Notification messages are a type in which FCM automatically triggers a message on the user’s device.
- Device Registration Token: During the initial phase of your app, the FCM SDK generates a device registration token, which is responsible to get a notification on your device. If the user initializes the app after clearing app data or uninstalls the app, the device registration token is regenerated.
STEP 6. IMPLEMENTATION
Add following functions in app.js to receive a push notification on mobile:
import React, {Component} from 'react'; import {StyleSheet, Text, View, Alert, AsyncStorage} from 'react-native'; import firebase from 'react-native-firebase'; export default class App extends Component{ async componentDidMount() { this.checkPermission(); this.createNotificationListeners(); } componentWillUnmount() { this.notificationListener; this.notificationOpenedListener; } //Check whether Push Notifications are enabled or not async checkPermission() { const enabled = await firebase.messaging().hasPermission(); if (enabled) { this.getToken(); } else { this.requestPermission(); } } //Get Device Registration Token async getToken() { let fcmToken = await AsyncStorage.getItem('fcmToken'); if (!fcmToken) { fcmToken = await firebase.messaging().getToken(); if (fcmToken) { console.log('fcmToken:', fcmToken); await AsyncStorage.setItem('fcmToken', fcmToken); } } } //Request for Push Notification async requestPermission() { try { await firebase.messaging().requestPermission(); // If user allow Push Notification this.getToken(); } catch (error) { // If user do not allow Push Notification console.log('Rejected'); } } async createNotificationListeners() { // If your app is in Foreground this.notificationListener = firebase.notifications().onNotification((notification) => { const localNotification = new firebase.notifications.Notification({ show_in_foreground: true, }) .setNotificationId(notification.notificationId) .setTitle(notification.title) .setBody(notification.body) firebase.notifications() .displayNotification(localNotification) .catch(err => console.error(err)); }); //If your app is in background this.notificationOpenedListener = firebase.notifications().onNotificationOpened((notificationOpen) => { const { title, body } = notificationOpen.notification; console.log('onNotificationOpened:'); Alert.alert(title, body) }); // If your app is closed const notificationOpen = await firebase.notifications().getInitialNotification(); if (notificationOpen) { console.log('getInitialNotification:'); } // For data only payload in foreground this.messageListener = firebase.messaging().onMessage ((message) => { //process data message console.log("Message", JSON.stringify(message)); }); } render() { return ( <View style={styles.container}> <Text style={styles.welcome}>Push Notification Demo</Text> <Text style={styles.instructions}>By Neova Solutions..</Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, });
To test your application you can send notification using Firebase Console.
Cheers ! We are Done.https://www.youtube.com/embed/cxo4A0RQPjQ
I hope this blog helped you implement push notification using firebase for your React native iOS Apps.
At Neova, we have an expert team of react native developers that are eager to work on the next big mobile app. Feel free to reach us at sales@neovatechsolutions.com for any queries.
Source Code:
More details:

Neha Akhade (Mobile App developer) is a contributor to this blog.