AirBnB Clone with React Native Part 13: Firebase Push Notifications for iOS and Android

React native Airbnb React native
This is the eleventh chapter of our implementation of an Airbnb clone in React Native, we’ll set up push notifications for our AirBnB clone in iOS and Android. With the use of Firebase, we can easily complete this task. Before the implementation, however, we have to configure our apps to enable push notifications.

Set up Push Notifications for iOS

You need an Apple developer account, which costs 100$ a year, for this implementation. If you don’t have a developer account, don’t worry, you can skip to the Android implementation of push notifications.

Configuring APNs with FCM

We need an Apple developer certificate or key to allow Firebase to send a notification message to APNs (Apple push notification service). To acquire a certificate or key, go to the Apple developer dashboard.

Create the authentication key

This section describes how to generate an authentication key for an app ID enabled for push notifications. If you have an existing key, you can use that key instead of generating a new one.

To create an authentication key:

  1. In your developer account, go to Certificates, Identifiers & Profiles, and under Keys, select All.

2. Click the Add button (+) in the upper-right corner.

3. Enter a description for the APNs Auth Key. Under Key Services, select the APNs checkbox, and click Continue.

4. Click Confirm and then Download. Save your key in a secure place. This is a one-time download, and the key cannot be retrieved later.

5. If you’d like to verify that your APNs authentication key is set up properly and is accepted by APNs, try sending a test push notification.

Add the Certificate to Firebase

Go to cloud messaging setting to add the certificate to Firebase.

Upload the certificate to the AirBnB clone app and add the Key ID as well as the Team ID.

Configure the Project in Xcode

Open our project with Xcode and select the +Capability option inside Signing & Capabilities. Search for the push notification option and select it. In the same way, search for background modes. Select the Remote Notifications option from the listed options.

If you have followed the steps correctly, you will be able to see the following window.

As the next step, including Firebase messaging in the Podfile

target 'pushpush' do
  # Required by RNFirebase
pod 'Firebase/Core', '~> 6.3.0'
pod 'Firebase/Messaging', '~> 6.3.0'

We’ll now return to Xcode and open the Appdelegate.m file. To activate messaging on Appdelegate.m, first import the Firebase Notification library.

#import "RNFirebaseNotifications.h"

We activate the lib by adding a code segment below the Firebase lib:

if ([FIRApp defaultApp] == nil) {
    [FIRApp configure];
    [RNFirebaseNotifications configure];
  };
    [[UNUserNotificationCenter currentNotificationCenter] setDelegate:self];
  return YES;
}
- (void)application:(UIApplication \*)application didReceiveLocalNotification:(UILocalNotification \*)notification {
  [[RNFirebaseNotifications instance] didReceiveLocalNotification:notification];
}

 

We’ve now completed the push notification set up. Close the packager terminal and run Xcode build once again to add the new functionality to the app.

 

Set up Push Notifications for Android

You can also use the React Native Firebase package to set up push up notifications for Android following these steps.

Step 1: Add a dependency to android/app/build.gradle file:

implementation "com.google.android.gms:play-services-base:16.1.0"
   //Firebase module
   implementation "com.google.firebase:firebase-auth:17.0.0"
   implementation "com.google.firebase:firebase-core:16.0.9"
   implementation "com.google.firebase:firebase-messaging:18.0.0"
   implementation "com.google.firebase:firebase-database:17.0.0"

 

Step 2: Import and activate the package in MainApplication.java:

import io.invertase.firebase.messaging.RNFirebaseMessagingPackage;

 

Add the following line of code to activate the package:

packages.add(new RNFirebaseMessagingPackage());

You can see the combined implementation in the following example:

Step 3: Configure AndroidManifest

We will add the messaging service to the application component inside the manifest file, which resides in the following path: android/app/src/main/AndroidManifest.xml

Your manifest file should now have the following format:

Import the Firebase module to App.js to verify the device token.

import firebase from react-native-firebase

Check whether the device has already given messaging permission.

If the user doesn’t have permission, request permission from the user.

If the user accepts the request, retrieve the token.

Then reload the app.

We can see the generated token on the Firebase console.

In Android, once you rebuild the app again, permission will be enabled by default.

Let’s try sending a test message now. First, go to the Firebase cloud messaging console.

Press “Send test message”.

The test notification will appear on the mobile screen. In iOS:

And in Android:

Summary

Today, we learned how to set up Firebase push notifications on iOS and Android. We also set up an APNS certificate on Firebase when setting up push notifications for iOS. In the next chapter, we’ll store the token in a real-time database and then, using cloud functions, fetch the token and send it to the subscribed device.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.