React Native SDK Integration

Quick Steps Guidelines

Step 1. Install React Native

Follow the document below on React Native Installation.

Step 2. iOS Setup

Obtain an Apple Push Notification Certificate from developer.apple.com using your account, and follow the steps for your iOS setup.

Step 3. Android Setup

Create and configure a project on Firebase Developers Console, and follow the steps for your Android setup.

Step 4. Initialize Netmera

Initialize iOS and Android by following the guides below,

Step 5. Request Push Notification Permission

Request push notification authorization by calling the methods in the documentation.

React Native SDK integration completed 👏

Step 1. React Native Installation

Please see the following document on React Native Installation.

npm: react-native-netmeranpm

$ npm install react-native-netmera --save

1. Mostly Automatic Installation

$ react-native link react-native-netmera

For both native sides (Android & iOS) you don't have to include extra Netmera SDK libraries.

2. Manual Installation

To integrate iOS SDK into your project, simply add the following in your Podfile.

pod 'RNNetmera', :path => '../node_modules/react-native-netmera'

Step 2. iOS Setup

1. Enable Push Notifications for Your Project

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.

2. Initialize Netmera

1. Navigate to iOS folder in your terminal and run the following command.

$ pod install

1. 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.

3. Request Push Notification Authorization

Request push notification authorization from user by calling the following method in an appropriate place.

if (Platform.OS === "ios"){
     Netmera.requestPushNotificationAuthorization()
}

Using iOS10 Media Push

Rich Media Integration for Versions 3.14.4 and higher. Please see the following documentation to see how to integrate iOS Media Push on Media Push.

Podfile Configuration

You can find the latest version details to replace 'X.X.X' on our SDK Versions page linked below.

React Native SDK Versions

pod "Netmera", "X.X.X-WithoutDependency"
pod "Netmera/NotificationServiceExtension", "X.X.X-WithoutDependency"
pod "Netmera/NotificationContentExtension", "X.X.X-WithoutDependency

You need to add these pods outside of your target in Podfile as in the following document.

Netmera-React-Native-Example/Podfile at master · Netmera/Netmera-React-Native-ExampleGitHub

Step 3. Android Setup

1. Select a Platform

Navigate to Netmera Panel > Developers > Netmera Onboarding and choose Android.

Click on Android > Start to proceed.

2. Create a Firebase Configuration

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 Firebase configuration, you will have a New Private Key folder of your project. That folder must be uploaded to Developers > Netmera Onboarding > Android > Step 2: Create A Firebase Configuration > FCM Service Account Key section on Netmera Panel.

Firebase Cloud Messaging Configuration

Firebase Cloud Messaging - Generate New Private Key

Upload FCM Service Account Key on Netmera Panel

3. Select a Target SDK

Select the appropriate SDK for your application development framework from the following options: Native Android, Flutter, React Native, Unity. Note: The subsequent instructions on this page are specific to the React Native SDK.

4. Integrate and Initialize React Native SDK

⚠️ Warning: Do not use the API key from your test panel when setting up or deploying your production app. Each panel has its own unique API key. Even if you log in with a different account, this encrypted key stays the same. Using the wrong key can result in data being sent to the incorrect environment, causing potential issues or errors in your application.

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.

Integrate Netmera

Gradle File Configuration

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" }
    }
}

1. In your app's build gradle file, add the following dependency.

dependencies {

    implementation 'androidx.core:core:1.1.0'

}

1. Add the following into the top of app's build.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.

Initialize Netmera

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.

Custom Firebase Messaging integration

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)
   }
});

Android 13 Push Notification Permissions

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.

Push Permission Methods in Netmera SDK

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 returns true; otherwise, it returns false.

public static void requestNotificationPermissions(Activity activity)

1. 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.

React Native SDK integration completed 👍

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.)