React Native SDK Integration

Quick Steps Guidelines

Step 1: Install React Native

Follow the installation guide to set up React Native.

Step 2: Setup iOS

Get your Apple Push Notification and complete the setup steps.

Step 3: Setup Android

Create a project on Firebase Console and follow the Android setup instructions.

Step 1: Install React Native

Please see the following document on React Native Installation.

npm: react-native-netmeranpm

Netmera React Native SDK

Install the Package

$ npm install react-native-netmera --save

a. Automatic Installation

Run the following command to link the SDK:

$ react-native link react-native-netmera

No extra Netmera SDK libraries are required for Android or iOS.

b. Manual Installation

Add the following line to your Podfile to integrate iOS SDK into your project.

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

Step 2: Setup iOS

1. Create an Apple Push Notification Certificate

1. Log in to developer.apple.com with your Apple Developer account.

2. Generate an Apple Push Notification Certificate for your app.

3. Export the certificate using Keychain Access on your Mac.

4. Upload the exported certificate to the Netmera panel by navigating to Developer > Push Backends > iOS in the left menu.

Bundle IDs should match on your project, certificate and panel:

Ensure that the certificate you upload to the panel matches the bundle ID of your project. Additionally, set your project's bundle ID in the panel to ensure consistency. The bundle ID of your project, the certificate, and the one specified in the panel must all align.

Certificate types:

• For apps downloaded from the App Store or tested via TestFlight, the certificate type should be set to "prod".

• For apps built directly from Xcode, the certificate type must be set to "dev".

If you have problems sending push notifications when you build from Xcode, verify the certificate type on the Developer > Push Backends > iOS page in Panel.

Creating an APNS .p8 Certificate (Recommended)

Creating an APNS .p12 Certificate

2. Integrate & Initialize Netmera iOS SDK

1. Install Pods

Navigate to the iOS folder in your terminal and run:

$ pod install

1. Initialize Netmera in AppDelegate

Update your AppDelegate class with the following codes:

#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 {
    [RNNetmera logging:YES]; // Enable Netmera logs
    [RNNetmera initNetmera:[<YOUR NETMERA API KEY>]]; // Replace with your Netmera API Key
    [RNNetmera requestPushNotificationAuthorization];
    [RNNetmera setPushDelegate:self];
    [Netmera setAppGroupName:<YOUR APP GROUP NAME>]; // Set your app group name
    return YES;
}

// Handle push clicks:
-(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();
}

// Handle push received in foreground:
-(void)userNotificationCenter:(UNUserNotificationCenter *)center 
       willPresentNotification:(UNNotification *)notification 
    withCompletionHandler:(void (^)(UNNotificationPresentationOptions))completionHandler {
    completionHandler(UNNotificationPresentationOptionAlert);
    [RNNetmeraRCTEventEmitter onPushReceive:@{@"userInfo" : notification.request.content.userInfo}];
}

// Handle device token registration:
- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken {
    if (deviceToken) {
        [RNNetmeraRCTEventEmitter onPushRegister:@{@"pushToken" : deviceToken}];
    }
}
@end

To obtain your SDK API Key:

1. Go to the Netmera Panel.

2. Navigate to Developer > API > SDK API Key.

3. Copy your SDK API Key from this section.

Use this key to replace the [<YOUR NETMERA API KEY>] placeholder in the sample code.

React Native Push Handling

When triggering [RNNetmeraRCTEventEmitter onPushReceive] in AppDelegate, the corresponding method is called in React Native:

export const onPushReceive = async (message) => {
    console.log("onPushReceive: ", message);
};

3. Request Push Notification Authorization

Request push notification authorization:

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

Using iOS10 Media Push

For versions 3.14.4 and above, refer to the Media Push.

Podfile Configuration

Add the following outside of your target in your Podfile:

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

Replace X.X.X with the latest version from the SDK Versions page > React Native SDK Versions

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

Step 3: Setup Android

1. Netmera Android Onboarding

In Netmera Panel:

• Navigate to Developers > Netmera Onboarding.

• Select Android and click Start to proceed.

2. Create a Firebase Configuration

Netmera uses Firebase Cloud Messaging (FCM) for delivering push notifications.

1. Go to the Firebase Developers Console and create a Firebase project.

2. Generate a new Private Key (JSON file) for your project.

3. Upload this file in Netmera Panel > Developers > Netmera Onboarding > Android > Step 2: Create A Firebase Configuration > FCM Service Account Key.

3. Select a Target SDK

Choose the React Native SDK based on your application framework.

4. Integrate and Initialize React Native SDK

Important Notes:

• Do not use the API key from a test panel in production.

• Each panel has a unique API key, and using the wrong one can result in data misdirection or errors.

To obtain your SDK API Key:

1. Go to the Netmera Panel.

2. Navigate to Developer > API > SDK API Key.

3. Copy your SDK API Key from this section.

5. Integrate Netmera Android SDK

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.

Gradle Configuration

1. Project’s build.gradle File

Add the following to your project-level build.gradle file:

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. App’s build.gradle File

Add the required dependency and plugins to your app-level build.gradle file:

dependencies {
    implementation 'androidx.core:core:1.1.0'
}

1. At the top of your app’s build.gradle, include:

apply plugin: 'com.google.gms.google-services'
apply plugin: 'com.huawei.agconnect'

Important Note for Obfuscation:

If your code is obfuscated, there is no need to add any special rules for Netmera. Its functionality is unaffected by code obfuscation.

6. Initialize Netmera Android SDK

1. In your app, locate or create a class that extends android.app.Application.

2. Inside this class, add the following code to the onCreate() method:

No class that extends android.app.Application

• If you don’t have this class, create one.

• Then, add it to your AndroidManifest.xml file under the <application> tag using the android:name.

public class MainApplication extends Application {

@Override
public void onCreate() {
    super.onCreate();
    // Add the Netmera initialization code here
    RNNetmeraConfiguration netmeraConfiguration = new RNNetmeraConfiguration.Builder()
        .firebaseSenderId(<YOUR GCM SENDER ID>)
        .huaweiSenderId(<YOUR HMS SENDER ID>)
        .apiKey(<YOUR NETMERA API KEY>) // For enabling Netmera logs
        .logging(true) // For enabled logging
        .build(this);
    RNNetmera.initNetmera(netmeraConfiguration);
    }
}

To obtain your SDK API Key:

1. Go to the Netmera Panel.

2. Navigate to Developer > API > SDK API Key.

3. Copy your SDK API Key from this section.

Use this key to (<YOUR NETMERA API KEY>) placeholder in the sample code.

Custom Firebase Messaging Integration

If you are using Firebase Messaging in your app, you can use these code snippets to handle Netmera push notifications:

1. Get Firebase Token:

   messaging()
      .getToken(firebase.app().options.messagingSenderId)
      .then(pushToken => {
          Netmera.onNetmeraNewToken(pushToken);
      });

2. Handle Incoming Firebase Messages:

   messaging().onMessage(async remoteMessage => {
      if (Netmera.isNetmeraRemoteMessage(remoteMessage.data)) {
          Netmera.onNetmeraFirebasePushMessageReceived(remoteMessage.from, remoteMessage.data);
      }
   });

Custom Huawei Messaging Integration

For Huawei messaging, you can use the following code to manage push notifications:

1. Get Huawei Token:

   HmsPushInstanceId.getToken("")
      .then((result) => {
          Netmera.onNetmeraNewToken(result.result);
      });

2. Handle Incoming Huawei Messages:

   HmsPushEvent.onRemoteMessageReceived(event => {
      const remoteMessage = new RNRemoteMessage(event.msg);
      let data = JSON.parse(remoteMessage.getData());
      console.log("onRemoteMessageReceived", data);
      if (Netmera.isNetmeraRemoteMessage(data)) {
          Netmera.onNetmeraHuaweiPushMessageReceived(remoteMessage.getFrom(), data);
      }
   });

7. Android 13 Push Notification Permissions

Android 13 introduced significant changes to how push notification permissions are handled.

• Increased User Control: Apps targeting API Level 33 and above now have more control over when and how they request push notification permissions. This allows for a more user-friendly and context-aware permission request experience.

• Automatic Permission Requests for Older Apps: For apps targeting API Level 32 and below running on Android 13, the system automatically prompts the user for push notification permission when the app creates its first notification channel.

Impact on Netmera SDK Users:

The Netmera SDK initializes and creates notification channels during the app's startup. Consequently:

• On Android 13: For apps targeting API Level 32 and below, this initialization process will trigger the automatic system prompt for push notification permission.

• On Android 12 and below: The system generally assumes push notification permission has already been granted.

If you initialize the Netmera SDK at app startup (which is recommended), the system will automatically request push notification permissions on Android 13 devices for apps targeting API Level 32 and below. For devices running Android 12 or earlier, the system assumes permission is already granted.

Netmera SDK Push Notification Permission Methods

For Android apps targeting API Level 33, the Netmera SDK provides two key methods to handle notification permissions:

1. Check Notification Permission Status:

public static boolean areNotificationsEnabled()

This method checks if the app has the necessary permissions to send push notifications. It returns true if the permission is granted, otherwise false.

1. Request Notification Permissions:

public static void requestNotificationPermissions(Activity activity)

Use this method to request notification permissions from the user. Call this method when you need to prompt the user for permissions at any time.

Push Enable/Disable User Flow:

1. Granting Permission:

   • The user triggers requestNotificationPermissions(), and if they grant permission, a push enable request is sent.

2. Handling Denial:

   • If the user denies permission, avoid resending the request immediately (as recommended by Google). Instead, the SDK opens the app's notification settings. The user can grant permission from the settings and return to the app, where a push enable request is sent.

3. Denying Permission:

   • If the user triggers requestNotificationPermissions() and denies permission, a push disable request is sent.

4. Reattempt After Denial:

   • If denied, avoid immediate re-request. The SDK will open the app's notification settings. If the user cancels (presses the back button), a push disable request is sent.

React Native SDK Integration Complete 🎉

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:

• Standard Push Notifications

• Interactive Push Notifications

• Widgets

• Push Notifications with Deeplinks