Comment on page
React Native SDK Integration
Quick Steps Guidelines
Step 1: React Native Installation
Follow the document below on React Native Installation.
Step 2: Setup / iOS
Obtain an Apple Push Notification Certificate from developer.apple.com using your account, and follow the steps for your iOS setup.
Step 3: Setup / Android
Create and configure a project on Firebase Developers Console, and follow the steps for your Android setup.
Step 4: Initialize Netmera
To initialize Netmera, add the codes within the onCreate() method of your class that extends android.app.Application.
React Native SDK integration completed
👏
Please see the following document on React Native Installation.
$ npm install react-native-netmera --save
$ react-native link react-native-netmera
For both native sides (Android & iOS) you don't have to include extra Netmera SDK libraries.
To integrate iOS SDK into your project, simply add the following in your Podfile.
pod 'RNNetmera', :path => '../node_modules/react-native-netmera'
We send push notifications using APNS (Apple Push Notification Service). Therefore, you need to obtain an Apple Push Notification Certificate from www.developer.apple.com using your account. Once you have the certificate, you should export it using Keychain Access and add it to the iOS page in the panel's left menu under Developer -> Push Backend.
Important Note on Bundle ID:
Make sure to add the certificate generated with the bundle ID of your project to the panel, and set the bundle ID of your project in the panel as well. Which means, the bundle ID of your project, the bundle ID of the certificate, and the bundle ID set in the panel should all match.
- 1.Navigate to iOS folder in your terminal and run the following command.
$ pod install
- 2.If you want to use Android alike message sending from iOS to react native please consider shaping your AppDelegate class as following.
#import <React/RCTBridgeDelegate.h>
#import <UIKit/UIKit.h>
#import <Netmera/Netmera.h>
#import <NetmeraCore/NetmeraPushObject.h>
#import <UserNotifications/UserNotifications.h>
@interface AppDelegate : UIResponder <UIApplicationDelegate, RCTBridgeDelegate, UNUserNotificationCenterDelegate, NetmeraPushDelegate>
@property (nonatomic, strong) UIWindow *window;
@end
#import "AppDelegate.h"
#import <RNNetmera/RNNetmeraRCTEventEmitter.h>
#import <RNNetmera/RNNetmeraUtils.h>
#import <RNNetmera/RNNetmera.h>
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
// Add these lines to init Netmera
[RNNetmera logging: YES]; // This is for enabling Netmera logs.
[RNNetmera initNetmera:[<YOUR NETMERA API KEY>]]; // Replace this with your own NETMERA API KEY.
[RNNetmera requestPushNotificationAuthorization];
[RNNetmera setPushDelegate:self];
[Netmera setAppGroupName:<YOUR APP GROUP NAME>]; // Set your app group name
return YES;
}
// Take push payload for Push clicked:
-(void)userNotificationCenter:(UNUserNotificationCenter *)center didReceiveNotificationResponse:(UNNotificationResponse *)response withCompletionHandler:(void (^)(void))completionHandler
{
if ([response.actionIdentifier isEqual:UNNotificationDismissActionIdentifier]) {
[RNNetmeraRCTEventEmitter onPushDismiss: @{@"userInfo" : response.notification.request.content.userInfo}];
} else if ([response.actionIdentifier isEqual:UNNotificationDefaultActionIdentifier]) {
[RNNetmeraRCTEventEmitter onPushOpen: @{@"userInfo" : response.notification.request.content.userInfo}];
}
completionHandler();
}
// Take push payload for push Received on application foreground:
-(void)userNotificationCenter:(UNUserNotificationCenter *)center willPresentNotification:(UNNotification *)notification withCompletionHandler:(void (^)(UNNotificationPresentationOptions))completionHandler
{
completionHandler(UNNotificationPresentationOptionAlert);
[RNNetmeraRCTEventEmitter onPushReceive: @{@"userInfo" : notification.request.content.userInfo}];
}
- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken
{
if(deviceToken == nil) {
return;
}
[RNNetmeraRCTEventEmitter onPushRegister: @{@"pushToken" : deviceToken}];
}
@end
For instance, if you trigger
[RNNetmeraRCTEventEmitter onPushReceive: @{@"userInfo" : notification.request.content.userInfo}] from AppDelegate the following method will be triggered in the react native part.export const onPushReceive = async (message) => {
console.log("onPushReceive: ", message);
};
Please make sure you get the API key value from the relevant panel
YOUR_SDK_API_KEY: You can get the api key from Developers > API > SDK API Key from your Netmera Panel.
Request push notification authorization from user by calling the following method in an appropriate place.
if (Platform.OS === "ios"){
Netmera.requestPushNotificationAuthorization()
}
Rich Media Integration for Versions 3.14.4 and higher.
pod "Netmera", "3.14.10-WithoutDependency"
pod "Netmera/NotificationServiceExtension", "3.14.10-WithoutDependency"
pod "Netmera/NotificationContentExtension", "3.14.10-WithoutDependency
However, you need to add these pods outside of your target in Podfile as in the following document.
This section provides information about the basic steps required in order to be able to receive push notifications sent from Netmera Dashboard on your devices.
- Netmera uses Firebase Cloud Messaging (FCM) to deliver push messages to the Android devices. Therefore, you should create and configure a project on Firebase Developers Console.
- At the end of the configuration, you will see values of Server API Key and Sender ID of your project. Those values must be added to the Netmera Dashboard and Sender ID must be used in client during initialization.
Netmera Android SDK is served via maven repository. All you need to do is adding following configurations to your
build.gradle file. AndroidManifest and other resource configurations are done automatically via Android gradle build tool.- 1.In your project's build gradle file, add the following dependency.
buildscript {
repositories {
google()
jcenter()
maven {url 'https://developer.huawei.com/repo/'}
}
dependencies {
classpath 'com.android.tools.build:gradle:4.1.3'
classpath 'com.google.gms:google-services:4.3.10'
classpath 'com.huawei.agconnect:agcp:1.6.3.300'
}
}
allprojects {
repositories {
google()
jcenter()
maven { url 'https://maven.google.com'}
maven { url 'https://developer.huawei.com/repo/'}
maven { url "https://release.netmera.com/release/android" }
}
}
- 2.In your app's build gradle file, add the following dependency.
dependencies {
implementation 'androidx.core:core:1.1.0'
}
- 3.Add the following into the top of app's buid.gradle file.
apply plugin: 'com.google.gms.google-services'
apply plugin: 'com.huawei.agconnect'
Important Note for Obfuscation:
If you are obfuscating your code, you don't need to add any specific rules for Netmera. Netmera's functionality remains intact even with code obfuscation.
Applications targeting API Level 33 and above have the privilege to request push notification permissions from users at their discretion, a decision enforced by the Android operating system. However, for applications below this API level, running on devices with Android 13 or higher, the operating system automatically prompts the user for these permissions during the first creation of a notification channel.
As Netmera SDK generates notification channels after the initialization response, and we recommend customers to call the
init method at the application level, this permission request is automatically triggered as soon as the application is launched. Nevertheless, this behavior is specific to applications targeting Android API Level 32 and below, and it applies only on devices running Android 13. On devices with Android 12 and earlier, the system already assumes that this permission has been granted by default.
For applications targeting API Level 33, Netmera SDK provides two significant methods for handling push notification permissions:
public static boolean areNotificationsEnabled()
- 1.
public static boolean areNotificationsEnabled(): This method allows you to check whether the application has acquired the necessary permissions. If the system has successfully obtained the required permissions from the user, this method returnstrue; otherwise, it returnsfalse.
public static void requestNotificationPermissions(Activity activity)
- 2.
public static void requestNotificationPermissions(Activity activity): This method can be used to initiate a request for permissions to the system at any time, triggering the necessary steps to obtain the permissions.
By using these methods, applications can effectively manage push notification permissions in compliance with Android's latest requirements.
To initialize Netmera, add the following lines of code within the
onCreate() method of your class that extends android.app.Application. If you don't have such a class, create it and add it to your AndroidManifest file using the
android:name attribute within the application tag.public class MainApplication extends Application {
@Override
public void onCreate() {
super.onCreate();
RNNetmeraConfiguration netmeraConfiguration = new RNNetmeraConfiguration.Builder()
.firebaseSenderId(<YOUR GCM SENDER ID>)
.huaweiSenderId(<YOUR HMS SENDER ID>)
.apiKey(<YOUR NETMERA API KEY>) // This is for enabling Netmera logs.
.logging(true) //this is for enabled logging
.build(this);
RNNetmera.initNetmera(netmeraConfiguration);
}
}
Please make sure you get the API key value from the relevant panel:
YOUR_SDK_API_KEY: You can get the api key from Developers > API > SDK API Key from your Netmera panel.
If you have a custom Firebase Messaging integration, you can use the following code snippets to handle Netmera push notifications:
messaging()
.getToken(firebase.app().options.messagingSenderId)
.then(pushToken => {
Netmera.onNetmeraNewToken(pushToken)
})
messaging().onMessage(async remoteMessage => {
if (Netmera.isNetmeraRemoteMessage(remoteMessage.data)) {
Netmera.onNetmeraFirebasePushMessageReceived(remoteMessage.from, remoteMessage.data)
}
});
React Native SDK integration has been successfully completed, and your devices are now ready to receive the following types of push notifications sent via the Netmera Dashboard:
- 1.Standard Push Notifications
- 2.Interactive Push Notifications (If you've configured and published them using the Dashboard)
- 3.Push Notifications with Web View Content
- 4.Push Notifications with Deeplinks (If your application supports URL Scheme-based deeplinks and you've configured the application's URL Scheme in the Dashboard.)
Last modified 1mo ago