Netmera Developer Guide
Netmera Docs
  • Netmera Developer Guide
  • Platforms
    • iOS
      • New iOS (Swift)
        • SDK Integration
        • Push Notifications
          • Delegate Methods
          • Widget and In-App Messages
          • Media Push
          • Carousel, Slider and Thumbnail Push
        • Deep Linking
          • Custom Deep Links
        • Sound & Vibration
        • Push Inbox
        • Events
        • Geofence & Location
        • User Attributes & Preferences
        • Advertising ID
        • Changelog
      • Former iOS (Objective-C)
        • SDK Integration
        • Push Notifications
          • Delegate Methods
          • Push Payload Receivers
          • Widget and In-App Messages
          • Customizing In-App Messages
          • Media Push
          • Carousel, Slider and Thumbnail Push
          • Custom Web View Presentation
          • Push Icon
        • Live Activities
        • Deep Linking
          • Custom Deep Links
        • Sound & Vibration
        • Push Inbox
        • Events
        • Geofence & Location
        • User Attributes & Preferences
        • Data Transfer
        • Advertising ID
        • SSL Pinning
        • Changelog
    • Android
      • SDK Integration
        • Huawei Integration
        • Huawei Message Receipt
        • Android Integration FAQs
      • Push Notifications
        • Widget and In-App Messages
        • Push Callbacks
        • Custom Web View Presentation
        • Push Icon
      • Deep Linking
        • Custom Deep Links
      • Sound & Vibration
      • Push Inbox
      • Events
      • Geofence & Location
        • Background Location Permission
      • User & Attributes
      • Data Transfer
      • Advertising ID
      • App Tracking
      • SSL Pinning
      • Changelog
    • Web
      • SDK Setup
        • Self-Hosted SDK Setup
      • Mobile Web Push for iOS
      • Deep Linking
        • Custom Deep Links
      • Events
      • User & Attributes
    • React Native
      • SDK Integration
      • Push Notifications
        • Widget and In-App Messages
        • Push Callbacks
      • Deep Linking
        • Custom Deep Links
      • Sound & Vibration
      • Push Inbox
      • Events
      • Geofence & Location
      • User & Attributes
      • Changelog
    • Flutter
      • SDK Integration
      • Push Notifications
        • Push Notification Permissions
        • Widget and In-App Messages
        • Flutter iOS Media Push
      • Deep Linking
        • Custom Deep Links
      • Sound & Vibration
      • Push Inbox
      • Events
      • Geofence & Location
      • User & Attributes
      • SSL Pinning
      • Changelog
    • Cordova
      • SDK Integration
      • Push Notifications
      • Sound & Vibration
      • Push Inbox
      • Events
      • User & Attributes
    • Unity
      • SDK Integration
      • Sound & Vibration
      • Events
      • User & Attributes
      • Changelog
  • Integrated Modules
    • Optimove
    • Adjust
    • Mixpanel
    • IYS Integration
    • VIA Integration
      • Short URL Consent Requests
      • OTP Consent Requests
        • OTP Confirmation Completion
      • VIA Email Rejection Link Generation
      • ETK Rejection via SMS
  • API Documentation
    • REST API
      • Setup
      • Notifications
      • Events
      • User & Device Management
      • Inbox Feature
      • GDPR
      • Error Responses
  • FAQs
    • Push Notifications FAQs
Powered by GitBook
On this page
  • Step 1: Install React Native
  • Step 2: Setup iOS
  • 1. Create an Apple Push Notification Certificate
  • 2. Integrate & Initialize Netmera iOS SDK
  • 3. iOS10 Media Push Configuration
  • Step 3: Setup Android
  • 1. Netmera Android Onboarding
  • 2. Create a Firebase Configuration
  • 3. Select a Target SDK
  • 4. Integrate and Initialize React Native SDK
  • 5. Integrate Netmera Android SDK
  • 6. Initialize Netmera Android SDK
  • Step 4: Setup React Native
  • 1. Complete Push Callback Methods
  • 2. Custom Firebase Messaging Integration
  • 3. Custom Huawei Messaging Integration
  • Step 5: Netmera SDK Push Notification Permission Methods
  • React Native SDK Integration Complete

Was this helpful?

  1. Platforms
  2. React Native

SDK Integration

PreviousReact NativeNextPush Notifications

Last updated 11 days ago

Was this helpful?

Step 1: Install React Native

  1. Install Netmera

yarn add react-native-netmera
npm install --save react-native-netmera
  1. Link Netmera (for React Native versions < 0.60)

Skip this step if you are using React Native version 0.60 or greater.

react-native link react-native-netmera

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

Step 2: Setup iOS

1. Create an Apple Push Notification Certificate

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

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

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

Install Pods

Navigate to the iOS folder in your terminal and run:

$ pod install

Initialize Netmera in AppDelegate

Netmera iOS SDK must be initialized in the AppDelegate file. Follow the steps based on your project type:

  • For Swift Projects: Modify your AppDelegate.swift file.

  • For Objective-C Projects: Modify your AppDelegate.m and AppDelegate.h files.

Modify your AppDelegate.swift file:

import RNNetmera
import Netmera

@main
class AppDelegate: RCTAppDelegate, UNUserNotificationCenterDelegate, NetmeraPushDelegate {
    override func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? = nil
    ) -> Bool {
        
        if #available(iOS 10.0, *) {
            UNUserNotificationCenter.current().delegate = self
        }

        // Enable logging (Optional: Set to false in production)
        RNNetmera.logging(true)

        // Initialize Netmera with your API Key
        RNNetmera.initNetmera("<YOUR NETMERA API KEY>") // Replace with your API key
        RNNetmera.setPushDelegate(self)

        // Set App Group Name (Required for rich notifications)
        Netmera.setAppGroupName("<YOUR APP GROUP NAME>") // Replace with your App Group Name

        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
    }

    // MARK: - Push Notification Handling

    @available(iOS 10.0, *)
    func userNotificationCenter(
        _ center: UNUserNotificationCenter,
        didReceive response: UNNotificationResponse,
        withCompletionHandler completionHandler: @escaping () -> Void
    ) {
        let userInfo = response.notification.request.content.userInfo
        if response.actionIdentifier == UNNotificationDismissActionIdentifier {
            RNNetmeraRCTEventEmitter.onPushDismiss(["userInfo": userInfo])
        } else if response.actionIdentifier == UNNotificationDefaultActionIdentifier {
            RNNetmeraRCTEventEmitter.onPushOpen(["userInfo": userInfo])
        }
        completionHandler()
    }

    @available(iOS 10.0, *)
    func userNotificationCenter(
        _ center: UNUserNotificationCenter,
        willPresent notification: UNNotification,
        withCompletionHandler completionHandler: @escaping (UNNotificationPresentationOptions) -> Void
    ) {
        completionHandler([.alert])
        RNNetmeraRCTEventEmitter.onPushReceive(["userInfo": notification.request.content.userInfo])
    }

    override func application(
        _ application: UIApplication,
        didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data
    ) {
        RNNetmeraRCTEventEmitter.onPushRegister(["pushToken": deviceToken])
    }
}

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.

For projects using Objective-C, update both AppDelegate.h and AppDelegate.m as follows

Modify AppDelegate.h

#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

Modify AppDelegate.m

#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. iOS10 Media Push Configuration

  1. For versions 3.14.4 and above, complete the steps found in Media Push.

  2. Update your Podfile by adding the following lines outside of your target:

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 > Changelog

Sample Project

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. Generate a new Private Key (JSON file) for your project.

  2. 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 available through the Maven repository. Add the following configurations to your build.gradle file. The AndroidManifest and other resource settings are automatically managed by the 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:X.X.X'
        classpath 'com.google.gms:google-services:X.X.X'
        classpath 'com.huawei.agconnect:agcp:X.X.X.X'
    }
}

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.X.X'
}
  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 and implements com.facebook.react.ReactApplication

If you don’t have a class that extends android.app.Application

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

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

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

import com.netmera.reactnativesdk.RNNetmera;
import com.netmera.reactnativesdk.RNNetmeraConfiguration;

public class MainApplication extends Application implements ReactApplication {
    @Override
    public void onCreate() {
        ...
        RNNetmeraConfiguration netmeraConfiguration = new RNNetmeraConfiguration.Builder()
            .firebaseSenderId(<YOUR GCM SENDER ID>)
            .huaweiSenderId(<YOUR HMS SENDER ID>)
            .apiKey(<YOUR NETMERA API KEY>)
            .logging(true) // Enables Netmera logs.
            .build(this);

        RNNetmera.initNetmera(netmeraConfiguration);
    }
}
import com.netmera.reactnativesdk.RNNetmera
import com.netmera.reactnativesdk.RNNetmeraConfiguration

class MainApplication : Application(), ReactApplication {
    override fun onCreate() {
        ...
        val netmeraConfiguration = RNNetmeraConfiguration.Builder()
            .firebaseSenderId(<YOUR GCM SENDER ID>)
            .huaweiSenderId(<YOUR HMS SENDER ID>)
            .apiKey(<YOUR NETMERA API KEY>)
            .logging(true) // This enables Netmera logs.
            .build(this)

        RNNetmera.initNetmera(netmeraConfiguration)
    }
}

Step 4: Setup React Native

1. Complete Push Callback Methods

Implement the necessary push notification callback methods in your React Native project in the following page:

Push Callbacks

2. Custom Firebase Messaging Integration

If your project uses Firebase Cloud Messaging (FCM), you can integrate Netmera push notifications by adding the following code snippets:

  1. Get Firebase Token

messaging()
   .getToken(firebase.app().options.messagingSenderId)
   .then(pushToken => {
       Netmera.onNetmeraNewToken(pushToken);
   });
  1. Handle Incoming Firebase Messages

messaging().onMessage(async remoteMessage => {
   if (Netmera.isNetmeraRemoteMessage(remoteMessage.data)) {
       Netmera.onNetmeraFirebasePushMessageReceived(remoteMessage.from, remoteMessage.data);
   }
});
  1. Handle Background Firebase Messages

// Handle Background Firebase Messages in index.js
messaging().setBackgroundMessageHandler(async (remoteMessage) => {
    if (Netmera.isNetmeraRemoteMessage(remoteMessage.data)) {
        Netmera.onNetmeraFirebasePushMessageReceived(remoteMessage.from, remoteMessage.data);
    }
});

3. Custom Huawei Messaging Integration

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

  1. Get Huawei Token

HmsPushInstanceId.getToken("")
   .then((result) => {
       Netmera.onNetmeraNewToken(result.result);
   });
  1. 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);
   }
});
  1. Handle Background Huawei Messages

HmsPushMessaging.setBackgroundMessageHandler((dataMessage) => {
    const remoteMessage = new RNRemoteMessage(dataMessage);
    let data = JSON.parse(remoteMessage.getData());

    if (Netmera.isNetmeraRemoteMessage(data)) {
        Netmera.onNetmeraHuaweiPushMessageReceived(remoteMessage.getFrom(), data);
    }
});

Step 5: Netmera SDK Push Notification Permission Methods

On iOS and Android 13+ devices, a runtime push notification permission request is required. You can use the following methods to check users' push notification status and request notification permission.

  1. Request Push Notification Authorization

Netmera.requestPushNotificationAuthorization();

Push Enable/Disable User Flow:

  1. Granting Permission:

    • The user triggers requestPushNotificationAuthorization(), 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 requestPushNotificationAuthorization() 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.

  1. Check Notification Permission Status

This method allows checking whether the necessary permissions for the application have been obtained.

Netmera.checkNotificationPermission().then(status => {
   //NotificationPermissionStatus.NotDetermined
   //NotificationPermissionStatus.Blocked
   //NotificationPermissionStatus.Denied
   //NotificationPermissionStatus.Granted
 });

Responses

When this method is called, it would return one of the following responses:

  1. NOTDETERMINED The user has opened the app but hasn't made a decision about notification permissions yet.

  2. GRANTED The user has granted notification permission, and the app can send notifications.

  3. DENIED The user has denied permission or has blocked notifications through system settings.

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

Log in to with your Apple Developer account.

Go to the and create a Firebase project.

developer.apple.com
Firebase Developers Console
Logonpm: react-native-netmeranpm
LogoNetmera-React-Native-Typescript-Example/ios/Podfile at main · Netmera/Netmera-React-Native-Typescript-ExampleGitHub