Push Notification (React Native)¶
Push Notification Settings (iOS)¶
See Settings for APNs Certificate (iOS) to setup.
Send Device Token to Repro¶
Send Device token and Registration ID to Repro to use push notification.
Turn on Push Notifications from Capabilities in Xcode.
It is recommended to use PushNotificationIOS which is React Native's community package. A detailed installation guide can be found here.
If you use PushNotificationIOS you could follow the example code shown below:
// AppDelegate.swift
...
...
import Repro
import RNCPushNotificationIOS
@main
class AppDelegate: RCTAppDelegate, UNUserNotificationCenterDelegate {
...
override func application(_ application: UIApplication, didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data) {
RNCPushNotificationIOS.didRegisterForRemoteNotifications(withDeviceToken: deviceToken)
}
...
}
// App.js etc...
import { Platform } from 'react-native';
import { PushNotificationIOS } from '@react-native-community/push-notification-ios';
import Repro from 'react-native-repro';
type Props = {};
export default class App extends Component<Props> {
constructor(props) {
super(props);
if (Platform.OS === 'ios') {
PushNotificationIOS.addEventListener("register", (deviceToken) => {
console.log("iOS Push Notification Device Token: " + deviceToken);
Repro.setPushToken(deviceToken); // SDK version 3.20.0 and above
// Repro.setPushDeviceTokenString(deviceToken); // SDK version below 3.20.0 here
});
PushNotificationIOS.requestPermissions();
}
}
render() {
...
}
}
Note
For Objective-C sample code, please refer to react-native-push-notification official
Rich Notification preparation (receiving)¶
In order to receive rich push notifications please refer to the rich push notification guide for iOS.
Push Notification Settings (Android)¶
Unlike iOS, React Native does currently not feature an official sub-project to support push notifications on Android. For now you should follow the official Repro Android push notification setup guide in order to implement push notification support on the native side.
Option: Using Universal-Links/App-Links¶
It is possible to custom handle the opening of Universal-Links (also called App-Links) when Push Notifications or In-App Messages are tabbed. (For simplification from now only called Universal-Links.)
Please follow the examples below in order to add a custom Universal-Link callback handler which is executed every time an Universal-Link would be opened from a Push-Notification or In-App Message.
How to register a regular expression to match Universal-Links.¶
In order to use Universal-Link callbacks, a regular expression based url matcher must be added.
Note
When a pattern (regular expression) is matched, the callback process described below is kicked to the URL set as the destination for opening a push notification or a message in the application.
When HTML content is displayed in in-app messages, universal linking is also determined for requests that occur within that content.
For iOS apps, these matcher regular expressions can be added in the AppDelegate or in the Apps designated .plist file. For Android apps your class that extents Application can be used or if that is not possible, the regular expressions can also be added to your AndroidManifest.xml file.
// AppDelegate.m
#import <Repro/Repro.h>
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
[Repro addOpenUrlFilterRegEx:@"https://example\\.com/page/"];
[Repro addOpenUrlFilterRegEx:@"your-domain\\.com/.+\?universal=true"];
...
}
// .plist file
/*
<dict>
<key>RPROpenUrlFilterRegExList</key>
<array>
<string>https://example\.com/page/</string>
<string>your-domain\.com/.+\?universal=true</string>
</array>
...
</dict>
*/
// MyApplication.java
import io.repro.android.Repro;
public class MyApplication extends Application {
@Override
public void onCreate() {
super.onCreate();
Repro.addOpenUrlFilterRegEx("https://example\\.com/page/");
Repro.addOpenUrlFilterRegEx("your-domain\\.com/.+\\?universal=true");
...
}
...
}
// AndroidManifest.xml
// To specify multiple URL patterns, enter them separated by commas.
<application>
...
<meta-data
android:name="io.repro.android.OpenUrlFilterRegExList"
android:value="https://example\\.com/page/;your-domain\\.com/.+\\?universal=true">
</meta-data>
</application>
// AppDelegate.swift
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool
{
Repro.add(openUrlFilterRegEx: "https://example\\.com/page/")
Repro.add(openUrlFilterRegEx: "your-domain\\.com/.+\\?universal=true")
...
}
// .plist file
/*
<dict>
<key>RPROpenUrlFilterRegExList</key>
<array>
<string>https://example\.com/page/</string>
<string>your-domain\.com/.+\?universal=true</string>
</array>
...
</dict>
*/
Please follow native iOS and Android instructions in order to add the filters
to the plist/AndroidManifest files or the main AppDelegate/Application classes.
Please follow native iOS and Android instructions in order to add the filters
to the plist/AndroidManifest files or the main AppDelegate/Application classes.
// YourAppNameScene.cpp
bool YourAppName::init() {
ReproCpp::addOpenUrlFilterRegEx("https://example\\.com/page/");
ReproCpp::addOpenUrlFilterRegEx("your-domain\\.com/.+\\?universal=true");
...
}
Please follow native iOS and Android instructions in order to add the filters
to the plist/AndroidManifest files or the main AppDelegate/Application classes.
Please follow native iOS and Android instructions in order to add the filters
to the plist/AndroidManifest files or the main AppDelegate/Application classes.
Warning
Specify the URL pattern to be set as a universal link as concretely as possible, including the domain and path , and should be all in lowercase .
If only a scheme is specified, such as https, a request made by a script executed in a screen displayed by an in-app message may be mistakenly judged as a universal link, and callback processing may be executed at an unintended timing.
If uppercase letters are used in the scheme/domain portion of the URL pattern, the scheme/domain portion is automatically converted to lowercase and processed when attempting to use a universal link to transition from a button displayed in an HTML in-app message. The pattern (regular expression) may not match and callback processing may not be executed at the intended timing.
Adding a callback handler for opening Universal-Links¶
Next a callback handler for custom processing of Universal-Links is added. The URL that was about to be opened is passed to the callback, where then depending on the URL custom code can be executed.
#import <Repro/Repro.h>
...
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
[Repro setOpenUrlCallback:^(NSURL *url) {
if ([url.host isEqualToString:@"example.com"]) {
// In case of your universal link perform navigation, present content, ...
handleUniversalLink(url);
}
}];
...
[Repro setup:@"YOUR_APP_TOKEN"];
...
}
// Set a callback that is executed everytime an URL is about to be opened
Repro.setOpenUrlCallback { url in
if url.host == "example.com" {
// In case of your universal link perform navigation, present content, ...
handleUniversalLink(url)
}
}
...
Repro.setup(token: "YOUR_APP_TOKEN")
...
import io.repro.android.Repro;
public class MyApplication extends Application {
@Override
public void onCreate() {
super.onCreate();
// In order to execute a callback when a push notification is tapped,
// the callback must be set in Application, not Activity.
Repro.setOpenUrlCallback(new Repro.OpenUrlCallback() {
// ** This callback method is executed in the main thread **
@Override
public void onOpened(Uri uri) {
if ("example.com".equals(uri.getHost())) {
// In case of your universal link perform navigation, present content, ...
}
}
});
...
Repro.setup(this, YOUR_APP_TOKEN);
...
}
...
}
Repro.setOpenUrlCallback((uri) { // uri is of type Uri
debugPrint("Universal Link Callback Handler received: " + uri.toString());
});
// Somewhere before Repro.Setup(...)
Repro.SetOpenUrlCallback(uri => // uri is of type Uri
{
Debug.Log("Universal Link Callback Handler received: " + uri.ToString());
});
bool YourAppName::init() {
ReproCpp::addOpenUrlFilterRegEx(...);
ReproCpp::setOpenUrlCallback([](const char *url) {
if (strcmp(url, "example.com") == 0) {
// In case of your universal link perform navigation, present content, ...
}
});
ReproCpp::setup("YOUR_APP_TOKEN")
...
}
Repro.setOpenUrlCallback(function(url) { // url is of type String
alert('Universal Link Callback Handler received: ' + url);
if (url.includes("http://example.org")) {
// In case of your universal link perform navigation, present content, ...
}
});
Repro.setOpenUrlCallback( (url) => { // url is of type String
console.log('Universal Link Callback Handler received: ' + url);
if (url.includes("http://example.org")) {
// In case of your universal link perform navigation, present content, ...
}
});