React Native - Setup

1 Installation
2 Platform Integrations
- 2.1 Android
- 2.2 IOS

Installation

Install prerequisites.

yarn add @react-native-async-storage/async-storage

or

npm i @react-native-async-storage/async-storage

Install package.

yarn add react-native-related-digital

or

npm i react-native-related-digital

Install pods (IOS only).

cd ios
pod install

Platform Integrations

Android

Create a Firebase project and register your app. Download google-services.json file and place it in android/app folder.
Add below line to your android/build.gradle file's both repositories sections. If you are going to do Huawei integration, add the agconnect-services.json file to the same location.

mavenCentral()
maven {
    url 'http://developer.huawei.com/repo/'
    allowInsecureProtocol = true
}

Add below lines to your android/build.gradle file's dependencies section.

classpath 'com.google.gms:google-services:4.3.14'
classpath 'com.huawei.agconnect:agcp:1.6.5.300'

Change your minSdkVersion to 21.
Change your compileSdkVersion and targetSdkVersion to 32.
Add below lines to your android/app/build.gradle file's bottom.

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

Add below line to your android/app/build.gradle file's defaultConfig section.

multiDexEnabled true

Add below code to your AndroidManifest.xml file's application section to receive notifications when the app is foreground.

<service
    android:name="euromsg.com.euromobileandroid.service.EuroFirebaseMessagingService"
    android:exported="false">
    <intent-filter>
        <action android:name="com.google.firebase.MESSAGING_EVENT" />
    </intent-filter>
</service>

If you are going to do Huawei integration, add the following lines to the file.

<service
    android:name="euromsg.com.euromobileandroid.service.EuroHuaweiMessagingService"
    android:exported="false">
    <intent-filter>
      <action  android:name="com.huawei.push.action.MESSAGING_EVENT"  />
    </intent-filter>
</service>

In order to send push to Huawei devices, you need to follow the steps in the link from the Huawei Developer panel. https://developer.huawei.com/consumer/en/doc/HMS-Plugin-Guides-V1/config-agc-0000001050178043-V1
Add below code to your AndroidManifest.xml file's application section to enable geofence capability.

<service
    android:name="com.visilabs.gps.geofence.GeofenceTransitionsIntentService"
    android:enabled="true"
    android:permission="android.permission.BIND_JOB_SERVICE" />

<service
    android:name="com.visilabs.gps.geofence.GeofenceMonitor"
    android:enabled="true"
    android:exported="true" />

<receiver
    android:name="com.visilabs.gps.geofence.GeofenceTransitionsReceiver"
    android:enabled="true"
    android:exported="true">
    <intent-filter>
        <action android:name="com.visilabs.android.gps.geofence.ACTION_RECEIVE_GEOFENCE" />
    </intent-filter>
</receiver>

<receiver
    android:name="com.visilabs.gps.geofence.VisilabsAlarm"
    android:exported="false" />

<receiver
    android:name="com.visilabs.gps.geofence.GeofenceBroadcastReceiver"
    android:enabled="true"
    android:exported="true" />

Modify your MainApplication.java as below to init library. Change geofenceEnabled parameter as you want.

import com.visilabs.Visilabs;
import euromsg.com.euromobileandroid.EuroMobileManager;

@Override
public void onCreate() {
  // ...

  initEuroMessage();
}

private void initEuroMessage() {
    String appAlias = "demo-alias";
    String huaweiAppAlias = "demo-alias-huawei";
    String organizationId = "OID";
    String siteId = "SID";
    String datasource = "datasource";
    String channel = "Android";
    String segmentUrl = "http://lgr.visilabs.net";
    String realtimeUrl = "http://rt.visilabs.net";
    String targetUrl = "http://s.visilabs.net/json";
    String actionUrl = "http://s.visilabs.net/actjson";
    String geofenceUrl = "http://s.visilabs.net/geojson";

    Visilabs.CreateAPI(organizationId, siteId, segmentUrl,
            datasource, realtimeUrl, channel, this, targetUrl, actionUrl, 30000, geofenceUrl, true);

    EuroMobileManager euroMobileManager = EuroMobileManager.init(appAlias, huaweiAppAlias, this);
    
    // optional
    euroMobileManager.setPushIntent("com.pushsdk.MainActivity", this);
    euroMobileManager.setNotificationTransparentSmallIcon(R.drawable.ic_launcher, this);
    euroMobileManager.setNotificationTransparentSmallIconDarkMode(R.drawable.ic_launcher, this);
    euroMobileManager.useNotificationLargeIcon(true);
    euroMobileManager.setNotificationLargeIcon(R.drawable.ic_launcher, this);
    euroMobileManager.setNotificationLargeIconDarkMode(R.drawable.ic_launcher, this);
    euroMobileManager.setNotificationColor("#d1dbbd");
    euroMobileManager.setChannelName("Channel", this);
}

If you want to track installed apps, call below method.

await visilabsApi.sendTheListOfAppsInstalled()

Also, add one of the below sections to your AndroidManifest.xml

Option 1

<manifest package="com.example.myApp">
    <queries>
        <package android:name="com.example.app1" />
        <package android:name="com.example.app2" />
    </queries>
</manifest>

Option 2

<uses-permission android:name="android.permission.QUERY_ALL_PACKAGES" 
tools:ignore="QueryAllPackagesPermission" />

Add below listener to be able to handle carousel push notification's item click.

  addEventListener('carouselItemClicked', async (carouselItemInfo) => {
    console.log('carouselItemInfo is ', carouselItemInfo)
  }, euroMessageApi)

IOS

Enable Push Notifications and Background Modes->Remote Notifications capabilities.
Import library in AppDelegate.h

#import <UserNotifications/UNUserNotificationCenter.h>

Modify AppDelegate.h and add UNUserNotificationCenterDelegate. (Classical React Native Project)

@interface AppDelegate : UIResponder <UIApplicationDelegate, RCTBridgeDelegate, UNUserNotificationCenterDelegate>

Modify AppDelegate.h and add UNUserNotificationCenterDelegate. (Expo Project)

@interface AppDelegate : UMAppDelegateWrapper <RCTBridgeDelegate, EXUpdatesAppControllerDelegate, UNUserNotificationCenterDelegate>

Import libraries in AppDelegate.m

#import "RelatedDigitalPushModule.h"
#import <UserNotifications/UserNotifications.h>

Modify AppDelegate.m file's didFinishLaunchingWithOptions method and add the following just before return statement.

UNUserNotificationCenter *center = [UNUserNotificationCenter currentNotificationCenter];
center.delegate = self;

Modify AppDelegate.m and add following methods.

- (void)application:(UIApplication *)application didRegisterUserNotificationSettings:(UIUserNotificationSettings *)notificationSettings
{
 [RelatedDigitalPushModule didRegisterUserNotificationSettings:notificationSettings];
}

- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken
{
 [RelatedDigitalPushModule didRegisterForRemoteNotificationsWithDeviceToken:deviceToken];
}

- (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo
fetchCompletionHandler:(void (^)(UIBackgroundFetchResult))completionHandler
{
  [RelatedDigitalPushModule didReceiveRemoteNotification:userInfo fetchCompletionHandler:completionHandler];
}

- (void)application:(UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:(NSError *)error
{
 [RelatedDigitalPushModule didFailToRegisterForRemoteNotificationsWithError:error];
}

-(void)userNotificationCenter:(UNUserNotificationCenter *)center willPresentNotification:(UNNotification *)notification withCompletionHandler:(void (^)(UNNotificationPresentationOptions options))completionHandler
{
  completionHandler(UNAuthorizationOptionSound | UNAuthorizationOptionAlert | UNAuthorizationOptionBadge);
}

Modify AppDelegate.m file's didFinishLaunchingWithOptions method and add the following just before return statement. Modify inAppNotificationsEnabled and geofenceEnabled parameters as you want.

[RelatedDigitalPushModule initRelatedDigital:@"organization_id" profileId:@"profile_id" dataSource:@"datasource" appAlias:@"app_alias" inAppNotificationsEnabled:true requestTimeoutSeconds:30 geofenceEnabled:true maxGeofenceCount:20 isIDFAEnabled:true loggingEnabled:true];

Add Empty.swift file to your project as the sdk contains Swift code and xcode requires at least one empty swift file in each target.
Add NSUserTrackingUsageDescription to your Info.plist file to be able to use AdvertisingTrackingID on iOS 14 and later. If you don't want to use it, set isIDFAEnabled to false among the initRelatedDigital parameters.
If you have any issues while building the app due to _swift_getFunctionReplacement or any swift related errors, try editing your project's (not target) Library Search Paths and remove $(TOOLCHAIN_DIR)/usr/lib/swift-5.0/$(PLATFORM_NAME) line.
If you are going to use in app notifications feature, add below lines to your project target's Build Phases->Copy Bundle Resources section. Select Create folder references when prompted.
Pods/VisilabsIOS/Sources/TargetingAction/InAppNotification/Views/VisilabsMiniNotificationViewController.xib Pods/VisilabsIOS/Sources/TargetingAction/InAppNotification/Views/VisilabsFullNotificationViewController.xib Pods/VisilabsIOS/Sources/TargetingAction/sideBar/sideBarView.xib
To enable rich notification capabilites like showing image or video;

Add Notification Service Extension target to your project and name it RelatedDigitalNotificationService. Change this service's target iOS version to 10.0. Then change newly added NotificationService.m file contents with the following: (Don't forget to enter your app name instead of APP_ALIAS)
#import "NotificationService.h" #import "RelatedDigitalNotificationService.h" @interface NotificationService () @property (nonatomic, strong) void (^contentHandler)(UNNotificationContent *contentToDeliver); @property (nonatomic, strong) UNMutableNotificationContent *bestAttemptContent; @end @implementation NotificationService - (void)didReceiveNotificationRequest:(UNNotificationRequest *)request withContentHandler:(void (^)(UNNotificationContent * _Nonnull))contentHandler { self.contentHandler = contentHandler; self.bestAttemptContent = [request.content mutableCopy]; [RelatedDigitalNotificationService didReceiveNotificationRequest:@"APP_ALIAS" withBestAttemptContent:self.bestAttemptContent withContentHandler:self.contentHandler]; } - (void)serviceExtensionTimeWillExpire { // Called just before the extension will be terminated by the system. // Use this as an opportunity to deliver your "best attempt" at modified content, otherwise the original push payload will be used. [RelatedDigitalNotificationService didReceiveNotificationRequest:@"APP_ALIAS" withBestAttemptContent:self.bestAttemptContent withContentHandler:self.contentHandler]; } @end
Add below lines to your Podfile's root level.
target 'RelatedDigitalNotificationService' do pod 'react-native-related-digital', :path => '../node_modules/react-native-related-digital' use_native_modules! end # Post Install processing for RelatedDigitalNotificationService causing errors def notification_service_post_install(installer) installer.pods_project.targets.each do |target| target.build_configurations.each do |config| config.build_settings['APPLICATION_EXTENSION_API_ONLY'] = 'NO' end end end
Modify Podfile and have the following in main target section.
post_install do |installer| notification_service_post_install(installer) # Other post install function calls end
Add Empty.swift file to your RelatedDigitalNotificationService target as the sdk contains Swift code and xcode requires at least one empty swift file in each target.
Make sure your deployment target is ios 10.
platform :ios, '10.0'
Execute pod install then run.

To enable push notification carousel;

Add Notification Content Extension target to your project and name it RelatedDigitalNotificationContent. Change this service's target iOS version to 11.0. Remove newly added files under RelatedDigitalNotificationContent except Info.plist. Then add EMNotificationViewController.swift file with the following content.
import UIKit import UserNotifications import UserNotificationsUI import Euromsg @objc(EMNotificationViewController) class EMNotificationViewController: UIViewController, UNNotificationContentExtension { let carouselView = EMNotificationCarousel.initView() var completion: ((_ url: URL?, _ bestAttemptContent: UNMutableNotificationContent?) -> Void)? var notificationRequestIdentifier = "" func didReceive(_ notification: UNNotification) { notificationRequestIdentifier = notification.request.identifier Euromsg.configure(appAlias: "APP_ALIAS", launchOptions: nil, enableLog: true) carouselView.didReceive(notification) } func didReceive(_ response: UNNotificationResponse, completionHandler completion: @escaping (UNNotificationContentExtensionResponseOption) -> Void) { carouselView.didReceive(response, completionHandler: completion) } override func loadView() { completion = { [weak self] url, bestAttemptContent in if let identifier = self?.notificationRequestIdentifier { UNUserNotificationCenter.current().removeDeliveredNotifications(withIdentifiers: [identifier]) UNUserNotificationCenter.current().getDeliveredNotifications(completionHandler: { notifications in bestAttemptContent?.badge = NSNumber(value: notifications.count) }) } if let url = url { if #available(iOSApplicationExtension 12.0, *) { self?.extensionContext?.dismissNotificationContentExtension() } self?.extensionContext?.open(url) } else { if #available(iOSApplicationExtension 12.0, *) { self?.extensionContext?.performNotificationDefaultAction() } } } carouselView.completion = completion carouselView.delegate = self self.view = carouselView } } /** Add if you want to track which carousel element has been selected */ extension EMNotificationViewController: CarouselDelegate { func selectedItem(_ element: EMMessage.Element) { // Add your work... print("Selected element is => \(element)") } }
Add or replace the following lines in newly added RelatedDigitalNotificationContent/Info.plist
<key>NSExtension</key> <dict> <key>NSExtensionAttributes</key> <dict> <key>UNNotificationExtensionUserInteractionEnabled</key> <true/> <key>UNNotificationExtensionDefaultContentHidden</key> <false/> <key>UNNotificationExtensionCategory</key> <string>carousel</string> <key>UNNotificationExtensionInitialContentSizeRatio</key> <real>1</real> </dict> <key>NSExtensionPrincipalClass</key> <string>RelatedDigitalNotificationContent.EMNotificationViewController</string> <key>NSExtensionPointIdentifier</key> <string>com.apple.usernotifications.content-extension</string> </dict>
Add below lines to your Podfile's root level.
target 'RelatedDigitalNotificationContent' do use_native_modules! pod 'Euromsg', '>= 2.0.0' end
In Xcode, select RelatedDigitalNotificationContent target and add below files to Build Phases->Copy Bundle Resources section. Select Create folder references when prompted.
Pods/Euromsg/Sources/Euromsg/Classes/EMNotificationCarousel/CarouselCell.xib Pods/Euromsg/Sources/Euromsg/Classes/EMNotificationCarousel/EMNotificationCarousel.xib
Make sure your deployment target is ios 10.
platform :ios, '10.0'
Execute pod install then run.

App Groups

Enable App Groups Capability for your targets. App Groups allow your app to execute code when a notification is recieved, even if your app is not active. This is required for Related Digital's analytics features and to store and access notification payloads of the last 30 days.

In your Main App Target go to Signing & Capabilities > All.
Click + Capability if you do not have App Groups in your app yet.
Select App Groups.
Under App Groups click the + button.
Set the App Groups container to be group.BUNDLE_ID.relateddigital where BUNDLE_ID is the same as set in Bundle Identifier.
Press OK.
In the NotificationServiceExtension Target
Go to Signing & Capabilities > All
Click + Capability if you do not have App Groups in your app yet.
Select App Groups
In the NotificationContentExtension Target go to Signing & Capabilities > All`.
Click + Capability.
Select App Groups
Under App Groups click the + button.
Set the App Groups container to be group.BUNDLE_ID.relateddigital where BUNDLE_ID is the same as your Main App Target Bundle Identifier. Do Not Include NotificationServiceExtension and NotificationContentExtension.
Press OK

Related Marketing Cloud Knowledge Base EN

React Native - Setup

Installation

Platform Integrations

Android

IOS

Related content