Documentation
Help CenterCommunityDevelopersAcademyStatus

Manually add and configure frameworks

Suggest Edits

Overview

The Acoustic Campaign Native mobile SDKs provide automatic and manual methods to implement the SDK in your applications.
You can add the Acoustic Mobile React Native SDK to your application using the automatic method described here: Add the React Native plug-in to your app.

The following instructions provide an alternative method to manually implement the SDK in your project if your application doesn't meet the requirements for automatic implementation.

Before you begin

If needed, create a sample project.

npx react-native init ProjectName --version 0.68.2

Remove previous configuration

If you have the Acoustic React Native mobile push SDK configured in your application, you must remove that configuration before you proceed.

  1. Remove the following dependencies from the package.json file in your application:

    "react-native-acoustic-mobile-push": "file:../plugins/react-native-acoustic-mobile-push",

"react-native-ios-notification-service": "file:../plugins/react-native-ios-notification-service",

  2. Delete the react-native-acoustic-mobile-push and react-native-ios-notification-service folders and all their content.

  3. Run pod deintegrate on your iOS folder.

  4. Run yarn install on your project root folder.

  5. Run pod install on your iOS folder.

Configure project

Add capabilities

In your main target, add the following capabilities:

  • push notification capability
  • App Groups capability and ensure that your selected app group is equal to group.{your Bundle Identifier}.

Add frameworks

  1. Add the AcousticMobilePush.xcframework and AcousticMobilePushNotification.xcframework frameworks on the main target in the Frameworks, Libraries, and Embedded Content section.
  2. Ensure that your main target Build Phases has only one Framework (AcousticMobilePush.xcframework) added on the Link Binary with Libraries section.
  3. Also, ensure that both frameworks are present in the Embed Frameworks section.

Update/Add the required files

  1. Change your main.m from your project with the following:
    #import <UIKit/UIKit.h>
  
int main(int argc, char * argv[]) {
    @autoreleasepool {
    return UIApplicationMain(argc, argv, nil, @"MCEAppDelegate");
  }
}
  2. Add the following four communication files from the plugins folder to your project at the same level as the main.m file.
    • RNAcousticMobilePush.h
    • RNAcousticMobilePush.m
    • RNAcousticMobilePushActionHandler.h
    • RNAcousticMobilePushActionHandler.m
  3. Add the MCEConfig.json file and update it with the required information.

Create Notification Service Extension

  1. To add a new Notification Extension Target, go to Xcode > File > New > Target.

  2. Select Notification Extension Target.

  3. Name it NotificationService. Make sure you add this to your main project and application.

  4. Select Objective C as the language and click Finish.

  5. Activate the NotificationService scheme when prompted by Xcode. Xcode creates a new folder called NotificationService with the files in it.

  6. Make sure that your Deployment Info Version equals your main target.

  7. In the NotificationService target, add the App Groups capability and ensure that your selected app group equals your main target.

  8. Update the file from the NotificationService folder:

    #import <UserNotifications/UserNotifications.h>
#import <AcousticMobilePushNotification/AcousticMobilePushNotification.h>
  
@interface NotificationService : MCENotificationService
  
@end

    #import "NotificationService.h"
  
@implementation NotificationService

@end

🚧

Warning:

After running the project, sometimes Xcode adds the AcousticMobilePushNotification.xcframework to the Link Binary With Libraries section (Build phases); make sure to delete it from there.

📘

Note:

Check that the MCEConfig.json file has both targets selected under Target Membership.

Add the request for push permission

Add the following:

📘

Note:

The code is added to the app.tsx file here as an example.

  1. Import NativeModules from react-native:

    import { NativeModules,} from 'react-native';

  2. Add the following constant after importing:

    const { RNAcousticMobilePush } = NativeModules;

  3. Use the following RNAcousticMobilePush function:

    React.useEffect(() => {
        RNAcousticMobilePush.requestPushPermission();
    }, [])

    componentDidMount() {
        RNAcousticMobilePush.requestPushPermission();
    }

Remove previous configuration

If you have the Acoustic React Native mobile push SDK configured in your application, you must remove that configuration before you proceed.

  1. Remove the react-native-acoustic-mobile-push dependency in the package.json file in your application.
    "react-native-acoustic-mobile-push": "file:../plugins/react-native-acoustic-mobile-push",
  2. Delete the ../plugins/react-native-acoustic-mobile-push folder and all its content.
  3. Run yarn install on your project root folder.

Configure project

Add frameworks

From the Acoustic React Native GitHub repo, add the following files from the plugins/react-native-acoustic-mobile-push/android/libs folder to your app project's android/app/libs folder.

  • acoustic-mobile-push-android-sdk-3.8.7.aar
  • acoustic-mobile-push-android-sdk-plugin-inapp-3.8.7.aar
  • acoustic-mobile-push-android-sdk-plugin-inbox-3.8.7.aar

Update/Add the required files

  1. Add the following four communication files from the plugins folder to your app's required path src/main/java/co/acoustic/mobile/push.

    • RNAcousticMobilePushActionHandler.java
    • RNAcousticMobilePushBroadcastReceiver.java
    • RNAcousticMobilePushModule.java
    • RNAcousticMobilePushPackage.java

  2. Add the MCEConfig.json file and update it with the required information.

  3. Add the google-services.json file and update it with the required information.

  4. Update the project build.gradle file to include the google-services dependency:

    classpath("com.google.gms:google-services:4.3.3")

  5. Update the app build.gradle file as follows:

    • Add .aar dependency support:
      implementation fileTree(dir: "libs", include: ["*.jar","*.aar"])
    • Add google-play-services and firebase dependencies:
      apply plugin: "com.google.gms.google-services"
  
implementation 'com.google.android.gms:play-services-base:16.0.1'
implementation 'com.google.android.gms:play-services-location:16.0.0'
implementation 'com.google.firebase:firebase-messaging:22.0.0'

  6. Update the MainApplication.java file to include RNAcousticMobilePushPackage manually using the getPackages() method.

    • import co.acoustic.mobile.push.RNAcousticMobilePushPackage;
    • packages.add(new RNAcousticMobilePushPackage());

  7. Update the AndroidManifest.xml file to include the following:

    <manifest 
  ...
  xmlns:tools="http://schemas.android.com/tools"
  ... >
    <application
      ...
      tools:replace="android:name"
      ... >
​
      <activity ...>
        ...
      </activity>
      
      <receiver android:exported="true" 
android:name="co.acoustic.mobile.push.RNAcousticMobilePushBroadcastReceiver">
        <intent-filter>
          <action android:name="co.acoustic.mobile.push.sdk.NOTIFIER"/>
        </intent-filter>
      </receiver>
      <receiver 
android:name="co.acoustic.mobile.push.sdk.notification.NotifActionReceiver"/>
      
      <provider android:name="co.acoustic.mobile.push.sdk.db.Provider" 
android:authorities="${applicationId}.MCE_PROVIDER" 
android:exported="false"/>
      <service 
android:name="co.acoustic.mobile.push.sdk.session.SessionTrackingIntentService"/>
      <service 
android:name="co.acoustic.mobile.push.sdk.events.EventsAlarmListener"/>
      <service 
android:name="co.acoustic.mobile.push.sdk.registration.PhoneHomeIntentService"/>
      <service 
android:name="co.acoustic.mobile.push.sdk.registration.RegistrationIntentService"/>
      <service 
android:name="co.acoustic.mobile.push.sdk.attributes.AttributesQueueConsumer"/>
      <service 
android:name="co.acoustic.mobile.push.sdk.job.MceJobService" 
android:permission="android.permission.BIND_JOB_SERVICE"/>
      <service 
android:name="co.acoustic.mobile.push.sdk.messaging.fcm.FcmMessagingService">
        <intent-filter>
          <action android:name="com.google.firebase.MESSAGING_EVENT"/>
        </intent-filter>
      </service>
    
    </application>
</manifest>

Add the request for push permission

Add the following:

📘

Note:

The code is added to the app.tsx file here as an example.

  1. Import NativeModules from react-native:

    import { NativeModules,} from 'react-native';

  2. Add the following constant after importing:

    const { RNAcousticMobilePush } = NativeModules;

  3. Use the following RNAcousticMobilePush function:

    React.useEffect(() => {
        RNAcousticMobilePush.requestPushPermission();
    }, [])

    componentDidMount() {
        RNAcousticMobilePush.requestPushPermission();
    }

Run the app

  1. Run yarn install and yarn android on your project root folder.
  2. Send a push notification once the app runs on your selected device to verify SDK is working.

Updated 9 months ago