@react-native-agconnect/appmessaging

React Native AGC AppMessaging

Usage no npm install needed!

<script type="module">
  import reactNativeAgconnectAppmessaging from 'https://cdn.skypack.dev/@react-native-agconnect/appmessaging';
</script>

README

React-Native App Messaging

Contents

1. Introduction

This module enables communication between HUAWEI AppMessaging Kit and React Native platform. It exposes all functionality provided by HUAWEI AppMessaging Kit which allows you to send relevant messages to target users actively using your app to encourage them to use key app functions. For example, you can send in-app messages to encourage users to subscribe to certain products, provide tips on passing a game level, or recommend activities of a restaurant.

App Messaging even allows you to customize how your messages look and the way they will be sent, and define events for triggering message sending to your users at the right moment.

2. Installation Guide

Before you get started, you must register as a HUAWEI Developer and complete identity verification on the HUAWEI Developer website. For details, please refer to Register a HUAWEI ID.

Creating a Project in AppGallery Connect

Creating an app in AppGallery Connect is required in order to communicate with the Huawei services. To create an app, perform the following steps:

Step 1. Sign in to AppGallery Connect and select My projects.

Step 2. Select your project from the project list or create a new one by clicking the Add Project button.

Step 3. Go to Project Setting > General information, and click Add app. If an app exists in the project and you need to add a new one, expand the app selection area on the top of the page and click Add app.

Step 4. On the Add app page, enter the app information, and click OK.

Enabling App Messaging

You need to enable App Messaging before using it. If you have enabled it, skip this step.

Step 1. In AppGallery Connect, click My projects.

Step 2. Find your project from the project list and click the app for which you need to enable App Messaging on the project card.

Step 3: Go to Growing > App Messaging.

Step 4: Click Enable now in the upper right corner.

Step 5: The App Messaging service uses HUAWEI Analytics to report in-app message events. Therefore, you need to enable HUAWEI Analytics before integrating the App Messaging SDK. For details, please refer to Enabling HUAWEI Analytics.

For further details, please refer to Enabling App Messaging.

Integrating the React-Native AppMessaging Plugin

Before using @react-native-agconnect/appmessaging, ensure that the ReactNative development environment has been installed.

Install via NPM

npm i @react-native-agconnect/appmessaging

Android App Development

Integrating the React-Native AGC AppMessaging into the Android Studio

  • Add the AppGallery Connect configuration file of the app to your Android Studio project.

    Step 1: Sign in to AppGallery Connect and click My projects.

    Step 2: Find your app project and click the app.

    Step 3: Go to Project Setting > App information. In the App information area, download the agconnect-services.json file.

    Step 4: Copy the agconnect-services.json file to the app's root directory of your project.

  • Open the build.gradle file in the android directory of your React Native project. Navigate into buildscript, configure the Maven repository address and agconnect plugin.

    buildscript {    
repositories {        
    google()        
    jcenter()        
    maven { url 'https://developer.huawei.com/repo/' }   
}    

dependencies {        
    /*          
     * <Other dependencies>        
     */   
    classpath 'com.huawei.agconnect:agcp:1.4.2.301'    
    }
}

  • Go to allprojects then configure the Maven repository address.

    allprojects {
    repositories {
        /*
         * <Other repositories>
         */
        maven { url 'https://developer.huawei.com/repo/' }
    }
}

  • Open the build.gradle file in the android/app directory of your React Native project.

    Set your package name in defaultConfig > applicationId and set minSdkVersion to 19 or higher.

    defaultConfig {
 applicationId "<package_name>"
 minSdkVersion 19
 /*
  * <Other configurations>
  */
}

    Package name must match with the package_name entry in agconnect-services.json file.

  • Configure the signature file.

    android {
    /*
     * <Other configurations>
     */

    signingConfigs {
        config {
            storeFile file('<keystore_file>.jks')
            storePassword '<keystore_password>'
            keyAlias '<key_alias>'
            keyPassword '<key_password>'
        }
    }

    buildTypes {
        debug {
            signingConfig signingConfigs.config
        }
        release {
            signingConfig signingConfigs.config
        }
    }
}

  • By default, App Messaging SDK works in any one of portrait-primary, portrait-secondary, landscape-primary and landscape-secondary. To make your app's orientation work by default, orientation keyword should be removed from android:configChanges property of Activity tag in AndroidManifest.xml file.

    Below is an example:

    <!-- AndroidManifest.xml. -->
<activity
        android:name="com.huawei.agc.rn.appmessaging.example.MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|screenSize|uiMode"
        android:launchMode="singleTask"
        android:windowSoftInputMode="adjustResize">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
</activity>

iOS App Development

Integrating the React-Native AGC AppMessaging into the Xcode Project

  • Navigate into your project directory and run below command.

    [project_path]> cd ios/ && pod install

  • Add the AppGallery Connect configuration file of the app to your Xcode project.

    Step 1: Sign in to AppGallery Connect and click My projects.

    Step 2: Find your app project and click the app.

    Step 3: Go to Project Setting > App information. In the App information area, download the agconnect-services.plist file.

    Step 4: Copy the agconnect-services.plist file to the app's root directory of your Xcode project.

    Before obtaining the agconnect-services.plist file, ensure that you have enabled HUAWEI AppMessaging. For details, please refer to Enabling App Messaging.

    If you have made any changes on the Project Setting page, such as setting the data storage location and enabling or managing APIs, you need to download the latest agconnect-services.plist file and replace the existing file in the app's root directory.

  • Initialize the AGCAppMessaging Plugin for React-Native.

    After the agconnect-services.plist file is imported successfully, initialize the AGCAppMessaging Plugin for React-Native using the config API in AppDelegate.

    Swift sample code for initialization in AppDelegate.swift:

    import AGConnectCore

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
...
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    ...
    // Initializate the AGCAppMessaging Plugin for React-Native in AppDelegate
    self.agcAppMessagingStartUp()
    ...
    return true
}

    Objective-C sample code for initialization in AppDelegate.m:

    #import "AppDelegate.h"
...
#import <AGConnectCore/AGConnectCore.h>


@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    ...
    // Initializate the AGCAppMessaging Plugin for React-Native in AppDelegate
    [self agcAppMessagingStartUp];
}
}];
    return YES;
}
...
@end

    Objective-C sample code for initialization in AppDelegate.h:

    @interface AppDelegate : UIResponder <UIApplicationDelegate, RCTBridgeDelegate>
...
- (void)agcAppMessagingStartUp;
...
@end

  • All the React-Native AGC AppMessaging plugin implementations are written in swift.

    Make sure your project/ios Xcode target -> Swift Compiler - General tab includes Objective-C Bridging Header and Objective-C Generated Interface Header Name like below:

3. API Reference

Module Overview

Module Description
AGCAppMessaging Provides methods to initialize AppMessaging Kit and implement appmessaging functions.

AGCAppMessaging

Represents the message processing class.

Public Method Summary

Method Return Type Description
setFetchMessageEnable(enabled) Promise<boolean> Sets whether to allow the App Messaging SDK to synchronize in-app message data from the AppGallery Connect server.
setDisplayEnable(enabled) Promise<boolean> Sets whether to allow the App Messaging SDK to display in-app messages.
isDisplayEnable() Promise<boolean> Checks whether the App Messaging SDK is allowed to display in-app messages.
isFetchMessageEnable() Promise<boolean> Checks whether the App Messaging SDK is allowed to synchronize in-app message data from the AppGallery Connect server.
setForceFetch() Promise<boolean> Sets the forcible in-app message data obtaining flag. When the flag is enabled, you can obtain latest in-app message data from the AppGallery Connect server in real time. This method is only to support on Android Platform.
removeCustomView() Promise<boolean> Remove custom in-app message layout. Then the default layout will be used.
setDisplayLocation(object) Promise<boolean> Sets the display position of a pop-up or image message.
trigger(eventId) Promise<boolean> Triggers a custom event.
handleCustomViewMessageEvent(object) Promise<boolean> While using custom app message layout, handle custom app message click events.
addMessageDisplayListener() Promise<object> While using default app message layout, listen for app message display events.
addMessageClickListener() Promise<object> While using default app message layout, listen for app message click events.
addMessageErrorListener() Promise<object> While using default app message layout, listen for app message error events.
addMessageDismissListener() Promise<object> While using default app message layout, listen for app message dismiss events.
addMessageCustomViewListener() Promise<object> While using custom app message layout, listen for custom app message display events.

Public Methods

setFetchMessageEnable(enabled)

Sets whether to allow the App Messaging SDK to synchronize in-app message data from the AppGallery Connect server.

Parameters
Name Type Description
enabled boolean Indicates whether to allow the App Messaging SDK to synchronize in-app message data from the AppGallery Connect server. The options are as follows:
true: yes
false: no.
The default value is true.
Return Type
Type Description
Promise<boolean> In the success scenario, Promise instance, true, is returned.
Call Example
import AGCAppMessaging from '@react-native-agconnect/appmessaging';
import {Alert} from 'react-native';

/**
 * Data synchronization from the AppGallery Connect server.
 */
AGCAppMessaging.setFetchMessageEnable(true).then(result => {
    Alert.alert("[setFetchMessageEnable] " + JSON.stringify(result));
}).catch((err) => {
    Alert.alert("[setFetchMessageEnable] Error/Exception: " + JSON.stringify(err));
});

setDisplayEnable(enabled)

Sets whether to allow the App Messaging SDK to display in-app messages.

Parameters
Name Type Description
enabled boolean Indicates whether to allow the App Messaging SDK to display in-app messages.The options are as follows:
true: yes
false: no
The default value is true.
Return Type
Type Description
Promise<boolean> In the success scenario, Promise instance, true, is returned.
Call Example
import AGCAppMessaging from '@react-native-agconnect/appmessaging';
import {Alert} from 'react-native';

/**
 * Sets whether to allow the App Messaging SDK to display in-app messages.
 */
AGCAppMessaging.setDisplayEnable(false).then(result => {
    Alert.alert("[setDisplayEnable] " + JSON.stringify(result));
}).catch((err) => {
    Alert.alert("[setDisplayEnable] Error/Exception: " + JSON.stringify(err));
});

isDisplayEnable()

Checks whether to allow the App Messaging SDK to display in-app messages.

Return Type
Type Description
Promise<boolean> Indicates whether to allow the App Messaging SDK to display in-app messages. The options are as follows:
true: yes
false: no
Call Example
import AGCAppMessaging from '@react-native-agconnect/appmessaging';
import {Alert} from 'react-native';

/**
 * Checks whether to allow the App Messaging SDK to display in-app messages.
 */
AGCAppMessaging.isDisplayEnable().then(result => {
    Alert.alert("[isDisplayEnable] " + JSON.stringify(result));
}).catch((err) => {
    Alert.alert("[isDisplayEnable] Error/Exception: " + JSON.stringify(err));
});

isFetchMessageEnable()

Checks whether to allow the App Messaging SDK to synchronize in-app message data from the AppGallery Connect server.

Return Type
Type Description
Promise<boolean> Indicates whether to allow the App Messaging SDK to synchronize in-app message data from the AppGallery Connect server. The options are as follows:
true: yes
false: no
Call Example
import AGCAppMessaging from '@react-native-agconnect/appmessaging';
import {Alert} from 'react-native';

/**
 * Checks whether to allow the App Messaging SDK to synchronize in-app message data from the AppGallery Connect server.
 */
AGCAppMessaging.isFetchMessageEnable().then(result => {
    Alert.alert("[isFetchMessageEnable] " + JSON.stringify(result));
}).catch((err) => {
    Alert.alert("[isFetchMessageEnable] Error/Exception: " + JSON.stringify(err));
});

setForceFetch()

Sets the flag for whether to obtain in-app message data from the AppGallery Connect server in real time by force.

After this method is called, the App Messaging SDK does not immediately request data from the AppGallery Connect server. When the next trigger event takes place, the App Messaging SDK forcibly obtains in-app message data from the AppGallery Connect server.

If you're developing your app using iOS: Enable the debugging mode for your app. Add the '-AGConnectDeveloperMode' launch parameter to the app scheme. Start your app in Xcode debug mode. Notice:

  • The setForceFetch API can be used only for message testing.
  • The forcible data obtaining flag is bound to the AAID of the test device. After you uninstall and reinstall the app or clear app data on the device, the flag will be reset.
Return Type
Type Description
Promise<boolean> In the success scenario, Promise instance, true, is returned.
Call Example
import AGCAppMessaging from '@react-native-agconnect/appmessaging';
import {Alert} from 'react-native';

/**
 * Sets the flag for whether to obtain in-app message data from the AppGallery Connect server in real time by force.
 */
AGCAppMessaging.setForceFetch().then(result => {
    Alert.alert("[setForceFetch] " + JSON.stringify(result));
}).catch((err) => {
    Alert.alert("[setForceFetch] Error/Exception: " + JSON.stringify(err));
});

removeCustomView()

In Android platforms, call removeCustomView() function to remove custom in-app message layout, then the default layout will be used.

If you're developing your app using iOS: refer to your project/Info.plist file to whether remove or set false AGCCustomView parameter.

Return Type
Type Description
Promise<boolean> In the success scenario, Promise instance, true, is returned.
Call Example
import AGCAppMessaging from '@react-native-agconnect/appmessaging';
import {Alert} from 'react-native';

/**
 * Remove custom in-app message layout. Then the default layout will be used.
 * In iOS, Refer to your project/Info.plist file to whether remove or set false AGCCustomView parameter.
 */
AGCAppMessaging.removeCustomView().then(result => {
    Alert.alert("[removeCustomView] " + JSON.stringify(result));
}).catch((err) => {
    Alert.alert("[removeCustomView] Error/Exception: " + JSON.stringify(err));
});

setDisplayLocation(location)

Sets the display position of a pop-up or image message.

Parameters
Name Type Description
location AGCAppMessaging Constant AGCAppMessaging Location Type Constant.
Return Type
Type Description
Promise<boolean> In the success scenario, Promise instance, true, is returned.
Call Example
import AGCAppMessaging from '@react-native-agconnect/appmessaging';
import {Alert} from 'react-native';

/**
 * Sets display location of appMessage whether at the bottom or the center.
 */
const bottomType = AGCAppMessaging.LOCATION_TYPE_CENTER;
AGCAppMessaging.setDisplayLocation(bottomType).then(result => {
    Alert.alert("[setDisplayLocation] " + JSON.stringify(result));
}).catch((err) => {
    Alert.alert("[setDisplayLocation] Error/Exception: " + JSON.stringify(err));
});

trigger(eventId)

Triggers a custom event.

Parameters
Name Type Description
eventId string ID of a custom event.
Return Type
Type Description
Promise<boolean> In the success scenario, Promise instance, true, is returned.
Call Example
import AGCAppMessaging from '@react-native-agconnect/appmessaging';
import {Alert} from 'react-native';

/**
 * Triggers message display.
 */
AGCAppMessaging.trigger("SOME_EVENT_ID").then(result => {
    Alert.alert("[trigger] " + JSON.stringify(result));
}).catch((err) => {
    Alert.alert("[trigger] Error/Exception: " + JSON.stringify(err));
});

addMessageCustomViewListener()

While using custom app message layout, listen for custom app message display events.

Return Type
Type Description
Promise<object> In the success scenario, Promise instance with app message detail info is returned.
Call Example
import AGCAppMessaging from '@react-native-agconnect/appmessaging';
import {Alert} from 'react-native';

/**
 * While using custom app message layout, listen for custom app message display events.
 */
addMessageCustomViewListener = () => {
    AGCAppMessaging.getInstance().addMessageCustomViewListener((result) => {
        Alert.alert(AGCAppMessaging.EventTypes.CUSTOM_VIEW + JSON.stringify(result))
        /*
         * Add Custom Message Event Handler method.
         * When using custom app message layout, handle custom app message click events like below.
         * gets eventType ( AGCAppMessaging.ON_MESSAGE_DISPLAY, AGCAppMessaging.ON_MESSAGE_CLICK, AGCAppMessaging.ON_MESSAGE_DISMISS, AGCAppMessaging.ON_MESSAGE_ERROR)
         * and dismissType param( AGCAppMessaging.DISMISS_TYPE_CLICK, AGCAppMessaging.DISMISS_TYPE_CLICK_OUTSIDE, AGCAppMessaging.DISMISS_TYPE_AUTO, AGCAppMessaging.DISMISS_TYPE_SWIPE) when using AGCAppMessaging.ON_MESSAGE_DISMISS.
         */
        this.handleCustomViewMessageEvent();
    });
}

handleCustomViewMessageEvent(object)

While using custom app message layout, handle custom app message click events.

Parameters
Name Type Description
object object Custom message event request.
Return Type
Type Description
Promise<boolean> In the success scenario, Promise instance, true, is returned.
Call Example
import AGCAppMessaging from '@react-native-agconnect/appmessaging';
import {Alert} from 'react-native';

//Below example creates alert, once the customView event is triggered sends a message display event.
/**
 * Creating app and listening all the events.
 */
componentDidMount() {
    //Creating & Calling Event Listeners
    this.addMessageCustomViewListener();
}
/**
 * While using custom app message layout, listen for custom app message display events.
 */
addMessageCustomViewListener = () => {
    AGCAppMessaging.getInstance().addMessageCustomViewListener((result) => {
        Alert.alert(AGCAppMessaging.EventTypes.CUSTOM_VIEW + JSON.stringify(result))
        /*
         * Add Custom Message Event Handler method.
         * When using custom app message layout, handle custom app message click events like below.
         * gets eventType ( AGCAppMessaging.ON_MESSAGE_DISPLAY, AGCAppMessaging.ON_MESSAGE_CLICK, AGCAppMessaging.ON_MESSAGE_DISMISS, AGCAppMessaging.ON_MESSAGE_ERROR)
         * and dismissType param( AGCAppMessaging.DISMISS_TYPE_CLICK, AGCAppMessaging.DISMISS_TYPE_CLICK_OUTSIDE, AGCAppMessaging.DISMISS_TYPE_AUTO, AGCAppMessaging.DISMISS_TYPE_SWIPE) when using AGCAppMessaging.ON_MESSAGE_DISMISS.
         */
        this.handleCustomViewMessageEvent();
    });
}

/**
 * When using custom app message layout, handle custom app message click events like below.
 * gets eventType ( AGCAppMessaging.ON_MESSAGE_DISPLAY, AGCAppMessaging.ON_MESSAGE_CLICK, AGCAppMessaging.ON_MESSAGE_DISMISS, AGCAppMessaging.ON_MESSAGE_ERROR)
 * and dismissType param( AGCAppMessaging.DISMISS_TYPE_CLICK, AGCAppMessaging.DISMISS_TYPE_CLICK_OUTSIDE, AGCAppMessaging.DISMISS_TYPE_AUTO, AGCAppMessaging.DISMISS_TYPE_SWIPE) when using AGCAppMessaging.ON_MESSAGE_DISMISS.
 */
handleCustomViewMessageEvent() {
    const customMessageDisplayReq = {
        "eventType" : AGCAppMessaging.ON_MESSAGE_DISPLAY
    }

    AGCAppMessaging.handleCustomViewMessageEvent(customMessageDisplayReq).then(result => {
        Alert.alert("[handleCustomViewMessageEvent] " + JSON.stringify(result));
        this.createCustomView("handleCustomViewMessageEvent :  ", JSON.stringify(result) + "")
    }).catch((err) => {
        Alert.alert("[handleCustomViewMessageEvent] Error/Exception: " + JSON.stringify(err));
        this.createCustomView("[handleCustomViewMessageEvent] Error/Exception: ", JSON.stringify(err) + "")
    });
}

addMessageDisplayListener()

While using default app message layout, listen for app message display events.

Return Type
Type Description
Promise<object> In the success scenario, Promise instance with app message detail info is returned.
Call Example
import AGCAppMessaging from '@react-native-agconnect/appmessaging';
import {Alert} from 'react-native';

/**
 * While using default app message layout, listen for app message display events.
 */
addMessageDisplayListener = () => {
    AGCAppMessaging.getInstance().addMessageDisplayListener((result) => Alert.alert(AGCAppMessaging.EventTypes.ON_MESSAGE_DISPLAY + JSON.stringify(result)));
}

addMessageClickListener()

While using default app message layout, listen for app message click events.

Return Type
Type Description
Promise<object> In the success scenario, Promise instance with app message detail info is returned.
Call Example
import AGCAppMessaging from '@react-native-agconnect/appmessaging';
import {Alert} from 'react-native';

/**
 * While using default app message layout, listen for app message click events.
 */
addMessageClickListener = () => {
    AGCAppMessaging.getInstance().addMessageClickListener((result) => Alert.alert(AGCAppMessaging.EventTypes.ON_MESSAGE_CLICK + JSON.stringify(result)));
}

addMessageErrorListener()

While using default app message layout, listen for app message error events.

Return Type
Type Description
Promise<object> In the success scenario, Promise instance with app message detail info is returned.
Call Example
import AGCAppMessaging from '@react-native-agconnect/appmessaging';
import {Alert} from 'react-native';

/**
 *  While using default app message layout, listen for app message error events.
 */
addMessageErrorListener = () => {
    AGCAppMessaging.getInstance().addMessageErrorListener((result) => Alert.alert(AGCAppMessaging.EventTypes.ON_MESSAGE_ERROR + JSON.stringify(result)));
}

addMessageDismissListener()

While using default app message layout, listen for app message dismiss events.

Return Type
Type Description
Promise<object> In the success scenario, Promise instance with app message detail info is returned.
Call Example
import AGCAppMessaging from '@react-native-agconnect/appmessaging';
import {Alert} from 'react-native';

/**
 * While using default app message layout, listen for app message dismiss events.
 */
addMessageDismissListener = () => {
    AGCAppMessaging.getInstance().addMessageDismissListener((result) => Alert.alert(AGCAppMessaging.EventTypes.ON_MESSAGE_DISMISS + JSON.stringify(result)));
}

Constants

EventTypes

  • When using custom app message layout, handle custom app message display, click, dismiss and error events.

    Field Type Description
    ON_MESSAGE_DISPLAY string When using custom app message layout, handle custom app message display events.
    ON_MESSAGE_CLICK string When using custom app message layout, handle custom app message click events.
    ON_MESSAGE_DISMISS string When using custom app message layout, handle custom app message dismiss events.
    ON_MESSAGE_ERROR string When using custom app message layout, handle custom app message error events.
    CUSTOM_VIEW string When using custom app message layout, handle custom app message view events.

DismissTypes

  • While using AGCAppMessaging.DismissTypes.ON_MESSAGE_DISMISS in handling custom app messages, add dismissType param via below constants.

    Field Type Description
    DISMISS_TYPE_CLICK string Click event in dismiss.
    DISMISS_TYPE_CLICK_OUTSIDE string Click outside event in dismiss.
    DISMISS_TYPE_AUTO string Auto event in dismiss.
    DISMISS_TYPE_SWIPE string Click event in dismiss.

LocationTypes

  • Sets display location of appMessage whether at the bottom or the center.

    Field Type Description
    LOCATION_TYPE_BOTTOM string Sets display location of appMessage at the bottom.
    LOCATION_TYPE_CENTER string Sets display location of appMessage at the center.

4. Configuration and Description

Enabling App Messaging

Accessing Analytics Kit

To use analytics feature,

  • Navigate into your /android/app/build.gradle and add build dependencies in the dependencies section.

    dependencies {
    implementation 'com.huawei.hms:hianalytics:5.1.0.301'
}

  • Navigate into your /ios file and edit the Podfile file to add the pod dependency 'HiAnalytics'

    • Example Podfile file:

      # Pods for AGCAppLinkingDemo
pod 'HiAnalytics'

    • Run pod install to install the pods.

      $ pod install

    • Initialize the Analytics SDK using the config API in AppDelegate in iOS platform.

      Sample code for initialization in AppDelegate.m:

      #import "AppDelegate.h"
#import <HiAnalytics/HiAnalytics.h>

@interface AppDelegate ()

@end

@implementation AppDelegate
...
// Customize the service logic after app launch.
- (BOOL)Application:(UIApplication *)Application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
// Initialize the Analytics SDK.
[HiAnalytics config];   
 return YES;
}
...
@end

    For further information please refer to Analytics Kit Service Guide.

Configuring Obfuscation Scripts

Before building the APK, configure obfuscation scripts to prevent the AppGallery Connect SDK from being obfuscated. If obfuscation arises, the AppGallery Connect SDK may not function properly.

-ignorewarnings
-keepattributes *Annotation*
-keepattributes Exceptions
-keepattributes InnerClasses
-keepattributes Signature
-keep class com.hianalytics.android.**{*;}
-keep class com.huawei.updatesdk.**{*;}
-keep class com.huawei.hms.**{*;}
-keep class com.huawei.agc.**{*;}
-keep class com.huawei.agconnect.**{*;}
-repackageclasses

Listening for AppMessaging Events

Add a listener to obtain app message click, view, dismiss, error events.

Call Example
import AGCAppMessaging from '@react-native-agconnect/appmessaging';
import {Alert} from 'react-native';

/**
 * Creating app and listening all the events.
 */
componentDidMount() {
    //Creating & Calling Event Listeners
    this.addMessageDisplayListener();
    this.addMessageClickListener();
    this.addMessageErrorListener();
    this.addMessageDismissListener();
}

addMessageDisplayListener = () => {
    AGCAppMessaging.getInstance().addMessageDisplayListener((result) => Alert.alert(AGCAppMessaging.EventTypes.ON_MESSAGE_DISPLAY + JSON.stringify(result)));
}

addMessageClickListener = () => {
    AGCAppMessaging.getInstance().addMessageClickListener((result) => Alert.alert(AGCAppMessaging.EventTypes.ON_MESSAGE_CLICK + JSON.stringify(result)));
}

addMessageErrorListener = () => {
    AGCAppMessaging.getInstance().addMessageErrorListener((result) => Alert.alert(AGCAppMessaging.EventTypes.ON_MESSAGE_ERROR + JSON.stringify(result)));
}

addMessageDismissListener = () => {
    AGCAppMessaging.getInstance().addMessageDismissListener((result) => Alert.alert(AGCAppMessaging.EventTypes.ON_MESSAGE_DISMISS + JSON.stringify(result)));
}

Adding Custom View

App Messaging supports three message types, namely pop-up, image, and banner messages. The App Messaging SDK provides a default layout for each type. You can customize the message display style that better suits your app to provide personalized experience for users.

Firstly, add a listener to obtain app message. Then you can create your own layout for app message.

You can add custom App message events as well. Such as: message click, message display, message dismiss, message error.

Below example creates alert, once the customView event is triggered sends a message display event.

Call Example
/**
 * Creating app and listening all the events.
 */
componentDidMount() {
    //Creating & Calling Event Listeners
    this.addMessageCustomViewListener();
}

addMessageCustomViewListener = () => {
    AGCAppMessaging.getInstance().addMessageCustomViewListener((result) => {
        Alert.alert(AGCAppMessaging.EventTypes.CUSTOM_VIEW + JSON.stringify(result))
        /*
         * Add Custom Message Event Handler method.
         * When using custom app message layout, handle custom app message click events like below.
         * gets eventType ( AGCAppMessaging.ON_MESSAGE_DISPLAY, AGCAppMessaging.ON_MESSAGE_CLICK, AGCAppMessaging.ON_MESSAGE_DISMISS, AGCAppMessaging.ON_MESSAGE_ERROR)
         * and dismissType param( AGCAppMessaging.DISMISS_TYPE_CLICK, AGCAppMessaging.DISMISS_TYPE_CLICK_OUTSIDE, AGCAppMessaging.DISMISS_TYPE_AUTO, AGCAppMessaging.DISMISS_TYPE_SWIPE) when using AGCAppMessaging.ON_MESSAGE_DISMISS.
         */
        this.handleCustomViewMessageEvent();
    });
}

/**
 * When using custom app message layout, handle custom app message click events like below.
 * gets eventType ( AGCAppMessaging.ON_MESSAGE_DISPLAY, AGCAppMessaging.ON_MESSAGE_CLICK, AGCAppMessaging.ON_MESSAGE_DISMISS, AGCAppMessaging.ON_MESSAGE_ERROR)
 * and dismissType param( AGCAppMessaging.DISMISS_TYPE_CLICK, AGCAppMessaging.DISMISS_TYPE_CLICK_OUTSIDE, AGCAppMessaging.DISMISS_TYPE_AUTO, AGCAppMessaging.DISMISS_TYPE_SWIPE) when using AGCAppMessaging.ON_MESSAGE_DISMISS.
 */
handleCustomViewMessageEvent() {
    const customMessageDisplayReq = {
        "eventType" : AGCAppMessaging.ON_MESSAGE_DISPLAY
    }

    AGCAppMessaging.handleCustomViewMessageEvent(customMessageDisplayReq).then(result => {
        Alert.alert("[handleCustomViewMessageEvent] " + JSON.stringify(result));
        this.createCustomView("handleCustomViewMessageEvent :  ", JSON.stringify(result) + "")
    }).catch((err) => {
        Alert.alert("[handleCustomViewMessageEvent] Error/Exception: " + JSON.stringify(err));
        this.createCustomView("[handleCustomViewMessageEvent] Error/Exception: ", JSON.stringify(err) + "")
    });
}

Below lines should be added to the corresponding platforms.

IOS:

Navigate into your React-Native/iOS project info.plist file,

Create AGCCustomView field as boolean property:

Set

  • YES: adding custom view
  • NO: removing custom view
<dict>
 ...
 <key>AGCCustomView</key>
 <false/>
 ...
</dict>

Android:

Before adding custom view make sure you have linked @react-native-agconnect/appmessaging in your project. Then, you should add below code to the onCreate method of your React-Native project /Android/MainApplication.java.

AgcAppMessagingModule.addCustomView();

5. Sample Project

This plugin includes a demo project in the example folder, there you can find more usage examples.

6. Licensing and Terms

AGC React-Native Plugin is licensed under Apache 2.0 license