In-App Message Event Listener

This feature is supported in React Native SDK version 3.15.0 and above.

Interfaces

HackleInAppMessageListener

interface HackleInAppMessageListener {
  beforeInAppMessageOpen?(inAppMessage: HackleInAppMessage): void;
  afterInAppMessageOpen?(inAppMessage: HackleInAppMessage): void;
  beforeInAppMessageClose?(inAppMessage: HackleInAppMessage): void;
  afterInAppMessageClose?(inAppMessage: HackleInAppMessage): void;
  onInAppMessageClick?(
    inAppMessage: HackleInAppMessage,
    view: HackleInAppMessageView,
    action: HackleInAppMessageAction
  ): boolean;
}

onInAppMessageClick

You can control the behavior of the in-app message through the boolean value returned by the onInAppMessageClick method.

• Returning true overrides the original action of the in-app message.

  • For example, if the original click action was Do not show for a day, that action will not execute.

• Returning false allows the original action of the in-app message to proceed.

Calling view.close() inside onInAppMessageClick

Calling view.close() inside the listener is treated the same as returning true.

onInAppMessageClick(inAppMessage, view, action) {
  view.close();

  // return false를 하더라도 true한 것과 동일하게 처리됨.
  return true;
},

HackleInAppMessage

interface HackleInAppMessage {
  key: number;
}

• Returns the key of the in-app message.

HackleInAppMessageView

interface HackleInAppMessageView {
  close(): void;
}

• You can close the in-app message directly within the listener function by calling close().

HackleInAppMessageAction

type HackleInAppMessageActionType = 'CLOSE' | 'LINK';

interface HackleInAppMessageAction {
  type: HackleInAppMessageActionType;
  close?: {
    hideDurationMillis: number | null;
  };
  link?: {
    url: string;
    shouldCloseAfterLink: boolean;
  };
}

property	description
close?.hideDurationMillis	If the action hides the message for a specific period, returns that duration in milliseconds.
link?.url	Returns the link if one is included. e.g) https://hackle.io
link?.shouldCloseAfterLink	Returns true if the close-after-link option is ON.

Usage Example

Registering a Listener

hackleClient.setInAppMessageListener({
  beforeInAppMessageOpen(inAppMessage) {
    console.log('beforeInAppMessageOpen key:', inAppMessage.key);
  },
  afterInAppMessageOpen(inAppMessage) {
    console.log('afterInAppMessageOpen key:', inAppMessage.key);
  },
  beforeInAppMessageClose(inAppMessage) {
    console.log('beforeInAppMessageClose key:', inAppMessage.key);
  },
  afterInAppMessageClose(inAppMessage) {
    console.log('afterInAppMessageClose key:', inAppMessage.key);
  },
  onInAppMessageClick(inAppMessage, view, action) {
    console.log('onInAppMessageClick inAppMessage:', inAppMessage.key);
    console.log('onInAppMessageClick action:', action);
    view.close();
    return true;
  },
});

Removing a Listener

• Pass null to setInAppMessageListener() to remove the registered listener.

hackleClient.setInAppMessageListener(null);