# 인앱메시지 이벤트 리스너

{% hint style="info" %}
React Native SDK 3.15.0 이상 버전에서 지원하는 기능입니다.
{% endhint %}

## Interfaces

### HackleInAppMessageListener

```typescript
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

`onInAppMessageClick` 메서드가 반환하는 boolean 값을 통해 인앱메시지의 동작을 제어할 수 있습니다.

* `true` 를 반환하는 경우 기존 인앱메시지의 액션을 덮어씁니다.
  * 가령, 기존 인앱메시지의 클릭 시 액션이 `하루 동안 보지 않기` 였다면 해당 액션은 동작하지 않습니다.
* `false`를 반환하는 경우 기존 인앱메시지의 액션이 그대로 동작합니다.

{% hint style="warning" %}
`view.close()` 를 `onInAppMessageClick` 내부에서 호출하는 경우

`view.close()` 를 리스너 내부에서 호출한 경우 `true` 를 반환한 것과 동일하게 처리됩니다.

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

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

{% endhint %}

### HackleInAppMessage

```typescript
interface HackleInAppMessage {
  key: number;
}
```

* 인앱메시지의 키를 반환합니다.

### HackleInAppMessageView

```typescript
interface HackleInAppMessageView {
  close(): void;
}
```

* `close()` 를 호출하여 인앱메시지를 리스너 함수 내에서 직접 닫을 수 있습니다.

### HackleInAppMessageAction

```typescript
type HackleInAppMessageActionType = 'CLOSE' | 'LINK';

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

```

<table><thead><tr><th width="250">property</th><th>description</th></tr></thead><tbody><tr><td><code>close?.hideDurationMillis</code></td><td>메시지를 특정 기간동안 숨김 처리하는 액션인 경우, 해당 기간을 밀리초로 반환합니다.</td></tr><tr><td><code>link?.url</code></td><td>링크가 포함된 경우 링크를 반환합니다. e.g) https://hackle.io</td></tr><tr><td><code>link?.shouldCloseAfterLink</code></td><td>링크 이동 후 닫기 옵션이 <code>ON</code>인 경우 true를 반환합니다.</td></tr></tbody></table>

## 사용 예제

### 리스너 등록

```typescript
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;
  },
});
```

### 리스너 해제

* `setInAppMessageListener()`에 null을 전달하면 등록된 리스너를 해제할 수 있습니다.

```typescript
hackleClient.setInAppMessageListener(null);
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.hackle.io/development-guide/react-native/react-native-in-app-message-listener.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.