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¶mB=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¶mB=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¶mB=b"
}
}'
3.3 iOS Site
Enable Remote Notification.
- Add Push Notification capability on Xcode
- 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¶mB=b"
}
}
The code read the link on aps.link
, you can put the link in another place as long as matching the code.