Working with React Navigation V5, Firebase Cloud Messaging, and Firebase Dynamic Links

Part 3: Setting Up Push Notifications to Deep Link with React Navigation

By Daniel Friyia, Agile Software Engineer, TribalScale

Photo by Christopher Gower on Unsplash

Finally, we are in the home stretch of setting up our comprehensive deep linking solution. The final part of this series will set up push notifications to deep link into various parts of our mobile app. This is by far the longest and most difficult guide. If you haven’t completed part 2 yet, check it out here. So without further ado, let’s strap in and get started.

Installing React-Native-Push-Notification Library

This will be a curve ball for some, but we actually will not be using RNFirebase for our push notifications. Although RNFirebase is a great library, it does not expose an easy way to get the notification that first occurs on startup which is what we need to get deep linking to work when the app is closed. Fret not, however, react-native-push-notification is a strong library boasting 81,000 weekly downloads and is only 278KB in size at the time of writing. It should be more than sufficient for a production app. React-native-push-notification also gives you the ability to schedule local notifications which RNFirebase does not support. This will prevent you from pigeonholing yourself if you need local notifications later in the project. Note that I will give quick start instructions in this article. Like all other major steps in this blog though, the detailed instructions can be found in the docs here.

The first step to setting up the library is to run the following commands from the root of your project in the terminal:

npm install --save react-native-push-notification
npm install @react-native-community/push-notification-ios

Next edit the project’s Podfile and add the firebase dependency:

pod 'Firebase/Messaging'

then run this in the terminal from the root of your project:

cd ios && pod install

Platform Specific Code

iOS Setup Instructions

Next, we go through some platform specific steps to get push notifications up and running on both platforms. Let’s start with iOS. First, copy and paste this line at the top of your AppDelegate.h file:

#import <UserNotifications/UNUserNotificationCenter.h>
@import Firebase;

Next, add UNUserNotificationCenterDelegate and FIRMessagingDelegate to your AppDelegate.h Protocols.

It should go from looking like this:

@interface AppDelegate : UIResponder <UIApplicationDelegate, RCTBridgeDelegate>

To this:

@interface AppDelegate : UIResponder <UIApplicationDelegate, RCTBridgeDelegate, FIRMessagingDelegate, UNUserNotificationCenterDelegate>

In the AppDelegate.m add this import at the top of the file

#import <UserNotifications/UserNotifications.h>
#import <RNCPushNotificationIOS.h>

Then copy and paste this code at the bottom of your AppDelegate.m just before the @end statement:

You’ll want to modify the didFinishLaunchingWithOptions function in your AppDelegate.m. It was placed there when the React-Native project was generated.

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
   ...
   // Define UNUserNotificationCenter
   UNUserNotificationCenter *center = [UNUserNotificationCenter currentNotificationCenter];
   center.delegate = self;
   return YES;
}

Finally, at the bottom of your didFinishLaunchingWithOptions add this snippet of code in order to set up Firebase Messaging:

[FIRMessaging messaging].delegate = self;
[[FIRMessaging messaging] tokenWithCompletion:^(NSString *token, NSError *error) {
  if (error != nil) {
    NSLog(@”Error getting FCM registration token: %@”, error);
  } else {
    NSLog(@”FCM registration token: %@”, token);
  }
}];

Phew, that was quite a bit of Objective-C code but we should be finished with the iOS setup. If you want to view this file as a whole, check it out on my Github here.

Next we’ll move on to setting up our Apple Push Notification service. For instructions on how to do this I recommend you follow this article. There are so many steps that it could be a blog post in and of itself so I won’t put them in this article. However, followed verbatim, the above instructions should get the Apple Push notification Service (APN) up and running for you.

Once you have the APN service set up we are going to set up a push notification manager in the app: I do this using a singleton class. For those who aren’t aware, a singleton is an object that is declared once in the application and all other parts of the application share the same reference to the object. The implementation is very basic and looks like this:

All this singleton does at the moment is initialize push notifications with a really rudimentary setup. Note that this should be called before the app starts. It should look something like this in index.js:

NotificationManager.initialize()
AppRegistry.registerComponent(appName, () => App);

Now that we’ve completed all these steps you should be able to run the app from XCode. In the XCode console grab the token that gets printed out by the function containing tokenWithCompletion. You should be able to add the token into Firebase Cloud Messaging and send a test message that way.

Android Setup Instructions

Unlike iOS, the Android setup instructions are very straightforward and I cannot really add much that the documentation doesn’t. It’s best for the reader to just go to the official documentation for react-native-push-notification follow these instructions.

Deep Linking using a Push Notification

So, wow, that was a lot wasn’t it? Luckily we are in the home stretch and all we have left to write is some nice, familiar, TypeScript code.

Deep Linking with Push Notifications on App Startup

The first thing we need to do is add a method to our singleton so that we can get the initial notification. It should look like this:

async getInitialPushNotification(): Promise<ReceivedNotification | null> {
  return new Promise<ReceivedNotification | null>((resolve, _) => {
    PushNotification.popInitialNotification(
      (notification: ReceivedNotification | null) => {
        resolve(notification);
      },
    );
  });
}

Next we need to add the code to receive this notification in our getInitialUrl function you can paste it in just under where we get the dynamic link URL.

const initialPushNotification = await NotificationManager.getInitialPushNotification()
if(initialPushNotification && initialPushNotification?.data?.deeplink) {
  return initialPushNotification?.data?.deeplink
}

This code gets the initial notification and inspects its payload for a deep link. If there is a deep link. It opens the app to that location on startup. You can set up the deep link property by setting it in Firebase when you are creating a push notification.

I used the screen3 deep link we used in the last article for ease of testing. Because of our setup in part 1, React Navigation will remove the first part of the URL and use the screen3 URL suffix to navigate. Note that the deeplink key is important. If you change it you’ll have to change the code that looks for the deep link when you receive a push notification.

Deep Linking while the app is open or backgrounded

The final step to this process is enabling deep linking to take place while the app is open. In order to do this, we need to add another method to our singleton to forward notifications. The new method we are going to add will look like this:

Next, we will add our forwarding function to the subscribe method supplied by React Navigation. This will allow us to listen for deep link events and forward them while the app is open.

NotificationManager.setNotificationForwardingFunction((notification) => {
  if(notification?.data?.deeplink) {
    listener(notification?.data?.deeplink);
  }
})

Now if you send a deep link to yourself while the app is open the app will deep link to the screen you specified. The GIF below shows the deep linking in action while the app is closed. (This gif is a bit of a long one. It takes a few seconds for a Firebase notification to come in)

That’s the end of this series on deep linking in React-Native. I hope it’s useful to you guys. Best of luck with your Deep Linking Projects!

For more information on deep linking with React-Native, click here to speak to one of our experts.