React Native with Deeplink and Push Notification

This article shows you how to use deeplink and push notification in react native and also combine them. Then when users tap the notification, the app can navigate to the specific screen. In order to show you more details, this article won’t use any other packages for deeplink and push notification. The source code of the example is here: https://github.com/wadehuang36/RnDpExample.

1. Prepare a new project

The example project is very simple. It just has a bottom-tab with three components using react-navigation.

Create a new project by

npx react-native init RnDpExample

Add React-Navigation and Url-Parse by

yarn add url-parse @react-navigation/native @react-navigation/bottom-tabs react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

Add Bottom Tab and 3 Screens Components

2. Handle Deeplink

2.1 React Native Site

Use Linking.getInitialURL() to get the link when the app isn’t launched and use Linking.addEventListener(‘url’, handler) to get the link when the app is launched. The example uses React-Navigation to handle screen navigation. The app calls Linking.getInitialURL() when it gets the ref.

2.2 Android Site

Add below intent-filter inside <activity android:name=”.MainActivity”></activity> in AndroidManifest.xml. The intent-filter will handle the link with scheme rndp in this example. You should change to the scheme you want.

Then re-run the android app (not react native refresh). You can use these commands in a terminal to test deeplink.

adb shell am start -W -a android.intent.action.VIEW -d rndp://first adb shell am start -W -a android.intent.action.VIEW -d rndp://second adb shell am start -W -a android.intent.action.VIEW -d rndp://third?paramA=a&paramB=b

2.3 iOS Site

Add these settings in Info.plist

iOS doesn’t have Intent or Event like Android to trigger deeplink. However, react native provides RCTLinkingManager for iOS. We can call its openURL function to trigger the event. Add these code in AppDelegate.m

Then re-run the iOS app (not react native refresh). You can use these commands in a terminal to test deeplink.

xcrun simctl openurl booted rndp://first
xcrun simctl openurl booted rndp://second
xcrun simctl openurl booted rndp://third?paramA=a&paramB=b

3. Handle Push Notification

The goal of this part is handling Push Notification. Make tap notification behaving as tap deep link. This part needs Apple Developer and Firebase credentials that doesn’t include source code if you want to run the example, you have to create your own credentials and update the bundleId on iOS and applicationId on Android.

3.1 React Native Site

There is no code in react native site to handle push notification since we will make it behaving as deeplink.

3.2 Android Site

First following the article to install firebase cloud messing: https://firebase.google.com/docs/cloud-messaging/android/client

Add a MessageService to handle receiving messages in order to add a click event that executes view action with the deeplink, then react native triggers the event and the event listener does the navigation as the code in part 2. Also, the service handles showing notifications even the app is in the foreground.

To make testing easier, this article uses FCM legacy HTTP API(https://firebase.google.com/docs/cloud-messaging/http-server-ref) to send the push notification

curl --request POST 'https://fcm.googleapis.com/fcm/send' \
--header 'Authorization: key=<the cloud messaging service key on firebace console>' \
--header 'Content-Type: application/json' \
--data-raw '{
    "to": "<the FCM token>",
    "data": {
        "title": "React Native with Deeplink and Push Notification",
        "body" : "Go the third screen",
        "link": "rndp://third?paramA=a&paramB=b"
    }
}'

3.3 iOS Site

Enable Remote Notification.

1. Add Push Notification capability on Xcode
2. Add these code in AppDelegate.m.

Handle launching the app by tap notifications. If the app is launched by notifications, we can get notification data by [launchOptions valueForKey:UIApplicationLaunchOptionsRemoteNotificationKey]. But Linking.getInitialURL() in react native won’t read the link from that place. Therefore, we need to put the link that react native can read. Add these code inside didFinishLaunchingWithOptions in AppDelegate.m.

Add these code inside AppDelegate.m to handle tap notifications.

Follow this article to know how to send APN, https://levelup.gitconnected.com/send-push-notification-through-apns-using-node-js-7427a01662a2, the payload is like

{
  "aps": {
    "alert": {
      "title": "React Native with Deeplink and Push Notification",
      "body": "Go the third screen"
    },
    "link": "rndp://third?paramA=a&paramB=b"
  }
}

The code read the link on aps.link , you can put the link in another place as long as matching the code.