To add the Campaign SDK to an iOS app using React Native, you will need the following:

• Xcode 15 with Command Line Tools
• Node.js 18 or later
• React Native 0.64 or later
• Apple Developer Program membership (free accounts do not support push notifications)

• Your iOS project uses an explicit App ID and is assigned to a team. For the App ID, the push notification service is enabled.
• In your iOS project, the Push Notifications capability is enabled. For instructions, see Adding capabilities to your app in the Xcode guide.
• Your app is registered with Apple Push Notification service (APNs). You can use either of the following authentication methods to secure connection to APNs: token-based (p8) (recommended by Apple) or certificate-based (p12).

📘

Important

The provisioning profile must match the push certificate. For example, a development provisioning profile works with a development push certificate.

What to prepare for the setup depending on the selected authentication type:

Step A: get an app key

To activate the Campaign SDK within your iOS app, you must generate an app key for it and upload the app's push certificate to Acoustic Campaign.

1. Log in to Acoustic Campaign under a developer account.
2. In the navigation menu, select Administration > Push developer resources.

3. Under Apps, click to add a new app.
4. In the Push Service field, select APNs. Then select the type of authentication to use: P8 or P12. Provide required credentials for the selected authentication type.

5. Set the Type setting in accordance with the distribution model. Select Development to run the app from Xcode with a development provisioning profile. Or select Production to run the app with an App Store, Enterprise, or ad hoc provisioning profile.
6. Fill out the remaining settings and save the changes.
7. Copy your app key and keep it handy for the setup.

Step B: update the configuration file

1. In the root directory of your app, find the CampaignConfig.json file. Use this file to customize the SDK configuration.

2. Make sure you are using the right build. During testing, set useRelease to false. For production, use true.

  "useRelease": true,

3. Check the version of the Campaign SDK for your iOS app. We recommend using the latest version whenever possible.

 "iOSVersion": "3.9.18",

4. In the iOS section, enter the app key you have generated at step A and the base URL provided by your account team. Do not change the app key after you publish your app.

{
  "baseUrl": "https://mobile-sdk-lib-XX-Y.brilliantcollector.com",
  "appKey": {
    "dev": "INSERT YOUR DEV APPKEY HERE",
    "prod": "INSERT YOUR PROD APPKEY HERE"
  }
}

5. Important: to apply the updates, navigate to the main project directory and run the following Node.js command.

node node_modules/react-native-acoustic-mobile-push/postinstall.js ./

To learn more about your options, see the following recipe: Configure mobile SDKs [iOS].

Step A: Add the Notification Service Extension

The AcousticMobilePushNotification framework lets you enable dynamic action categories and media attachments in iOS notifications. Before a notification from the APNs service is displayed to an end user, the media attachment URL is extracted, and then the media file is downloaded and attached to the notification.

The notification service extension functions as a separate app within your app bundle and requires separate provisioning.

🚧

Important

The notification service target must be compatible with the version of the Campaign library you are using. So if you have a beta version of the library and want to switch to the stable version or visa versa, make sure you unlink the current target first and then add a new one.

1. In your XCode project, click File > New > Target.
2. On the iOS tab, select Notification Service Extension.

3. In the Language list, select Objective-C. Fill out the remaining settings as appropriate.

4. If a confirmation message appears, select Activate.

5. Find a new target and a new directory in your project.

Step B: Configure the Notification Service target

Select the new target and go through the following settings on the General tab.

• Signing. Select the same team that the main project target belongs to and configure the bundle ID. A typical pattern for the bundle ID is com.company.app.notification if your app bundle ID is com.company.app.
• Minimum deployments. Make sure the iOS version is the same as in the primary application target.
• Frameworks and Libraries. Add AcousticMobilePushNotification.xcframework and select the Embed and Sign option for it.

On the Signing & Capabilities tab, add two capabilties: Keychain Sharing and App Groups. Make sure you use the same values as for the primary application target.

On the Build Settings tab, expand the Linking - General section. Make sure Other Linker Flags is set to -ObjC.

Step C: Update related project files

1. Add the MceConfig.json file to the Notification Service target. Open the file and check the notification service target membership in the Target Membership of the File Inspector in the Xcode pane.
2. Replace the contents of NotificationService.m with the following code.

// NotificationService.m
#import "NotificationService.h"

@implementation NotificationService

@end

3. Replace the contents of NotificationService.h with the following code.

// NotificationService.h
#import <UserNotifications/UserNotifications.h>
#import <AcousticMobilePushNotification/AcousticMobilePushNotification.h>

@interface NotificationService : MCENotificationService

@end

Step D: build and run the app

1. Run the iOS.
2. Run pod install from the App's ios folder.
3. Launch your iOS app.

npx react-native run-ios

📘

Note

The iOS Simulator app is unable to handle push messages. Run your app on a real device.