add handleJavascriptMessage in AEPMessaging #519

ishita-gambhir-adobe · 2025-08-21T05:27:18Z

Description

Related Issue

Motivation and Context

How Has This Been Tested?

Screenshots (if appropriate):

Types of changes

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

I have signed the Adobe Open Source CLA.
My code follows the code style of this project.
My change requires a change to the documentation.
I have updated the documentation accordingly.
I have read the CONTRIBUTING document.
I have added tests to cover my changes.
All new and existing tests passed.

apps/AEPSampleAppNewArchEnabled/app/MessagingView.tsx

packages/messaging/src/models/Message.ts

packages/messaging/package.json

ishita-gambhir-adobe · 2025-08-27T10:20:55Z

apps/AEPSampleAppNewArchEnabled/app/_layout.tsx

+    const ENV_ID_Messaging = "3149c49c3910/4f6b2fbf2986/launch-7d78a5fd1de3-development";
+    MobileCore.initializeWithAppId(ENV_ID_Messaging)


This will be reverted before merging to staging

sure, could you update this line.

apps/AEPSampleAppNewArchEnabled/app/MessagingView.tsx

...id/src/main/java/com/adobe/marketing/mobile/reactnative/messaging/RCTAEPMessagingModule.java

namArora3112 · 2025-08-27T10:52:02Z

packages/messaging/tutorials/In-App Messaging.md

+```html
+<html>
+    <head>
+        <script type="text/javascript">


@namArora3112 this is part of the custom HTML I have created for testing, and was intended for internal testing only.

The snippet added in the docs is the same that is present in the already existing tutorials for Native code - https://developer.adobe.com/client-sdks/edge/adobe-journey-optimizer/in-app-message/tutorials/native-from-javascript/#html

If we are deviating from the standard examples shared in the rest of SDK Documentation, can you share some documentation around best practices on creating custom HTML so that we can provide appropriate examples in our tutorials.

namArora3112

Have added minor comments. can merge it after addressing that

ishwetansh · 2025-08-29T10:33:49Z

apps/AEPSampleAppNewArchEnabled/app/MessagingView.tsx

    onDismiss: msg => console.log('dismissed!', msg),
-    onShow: msg => console.log('show', msg),
+    onShow: msg => {
+      console.log('show', msg);


are we going to use console log functions directly
or there a global log method available for logging purpose?

We dont have a logging utility available, we use the console log functions directly in the test app.

ishwetansh · 2025-08-29T10:34:59Z

apps/AEPSampleAppNewArchEnabled/app/MessagingView.tsx

-    onShow: msg => console.log('show', msg),
+    onShow: msg => {
+      console.log('show', msg);
+      msg.handleJavascriptMessage('myInappCallback', (content: string) => {


Nit: would recommend to use constants from a file

ishwetansh · 2025-08-29T10:41:10Z

packages/messaging/src/models/Message.ts

+   * @param {function} handler: The method or closure to be called with the body of the message created in the Message's JavaScript
+   */
+  handleJavascriptMessage(handlerName: string, handler: (content: string) => void) {
+    // cache the callback


can we add checks for the handler
for example something like this
if (!handlerName) throw new Error("handlerName required"); if (typeof handler !== "function") throw new Error("handler must be a function");

ishwetansh · 2025-08-29T10:46:39Z

...id/src/main/java/com/adobe/marketing/mobile/reactnative/messaging/RCTAEPMessagingModule.java

+  @ReactMethod
+  public void handleJavascriptMessage(final String messageId, final String handlerName) {
+    Presentable<?> presentable = presentableCache.get(messageId);
+    if (presentable == null || !(presentable.getPresentation() instanceof InAppMessage)) return;


If the presentable is not found this just silently returns.
Could you please add logs or could we emit a warning why a handler wasn’t called.

ishwetansh · 2025-08-29T10:53:27Z

packages/messaging/ios/src/RCTAEPMessaging.swift

+        }
+
+        message.handleJavascriptMessage(handlerName) { [weak self] content in
+            self?.emitNativeEvent(


Can we add consistency across platform for emitting events ?
in android method name is emitEvent and ios has emitNativeEvent

https://github.com/adobe/aepsdk-react-native/pull/519/files#diff-85f91ba765b073dd0256d2724430807e4320aff1adb71dfb6d6f78cc209958f0R193

the emitEvent and emitNativeEvent functions are existing helper methods from before. Lets keep this PR focused on handleJavascriptMessage related changes. Refactoring can be taken as a separate task if needed.

ishwetansh · 2025-08-29T10:58:48Z

packages/messaging/tutorials/In-App Messaging.md

+
+In the `onShow` function of `MessagingDelegate`, call `handleJavascriptMessage(handlerName: string, handler: (content: string) => void)` to register your handler.
+
+The name of the message you intend to pass from the JavaScript side should be specified in the first parameter.


this seems a little incomplete,
I guess, the handlerName is a unique identifier used both in your React Native app and your in-app message HTML.
Ideally, It must match exactly on both sides for the bridge call to work.

correct me if i am wrong?

The name of the message you intend to pass from the JavaScript side should be specified in the first parameter.

This line intends to highlight that the name passed from Javascript side should be sent as the first parameter here. Please let me know if its not clear.

Followed this tutorial for reference: https://developer.adobe.com/client-sdks/edge/adobe-journey-optimizer/in-app-message/tutorials/native-from-javascript/

ishwetansh · 2025-08-29T11:02:09Z

packages/messaging/src/models/Message.ts

+// Record - {messageId : {handlerName : callback}}
+const jsMessageHandlers: Record<string, Record<string, (content: string) => void>> = {};
+const handleJSMessageEventEmitter = new NativeEventEmitter(RCTAEPMessaging);
+


can we create a type for this callback as this is being used in multiple places
type JsMessageHandler = (content: string) => void;

ishwetansh · 2025-08-29T11:04:30Z

packages/messaging/src/models/Message.ts


+// Registery to store inAppMessage callbacks for each message in Message.handleJavascriptMessage
+// Record - {messageId : {handlerName : callback}}
+const jsMessageHandlers: Record<string, Record<string, (content: string) => void>> = {};


Every time we show a new in-app message, hanndleJavascriptMessage() adds another entry to the jsMessageHandlers object. But when the message is dismissed, the screen is unmounted, or the message is never shown again, those handlers stay in memory instead of being removed.

added clearJavascriptMessageHandlers method for clearing the memory.
@namArora3112 please have another look

ishwetansh · 2025-08-29T11:08:07Z

packages/messaging/__tests__/MessagingTests.ts

    expect(spy).toHaveBeenCalledWith(id);
  });

+  it('handleJavascriptMessage is called', async () => {


The unit tests seems a little incomplete.

can we add a test to verify that when a message is not found (due to a bad handlerName or expired cache), the sdk gracefully handles the error without emitting incorrect events or crashing.

…sage

* PropositionItem class added along with unified track functionality (#507) * proposition item classes, track funcitonality etc * proposition item uuid added * json proposition item removed * removed unused guide * added htmlProposition , jsonPropositon item class * removed unused apis of content card * generatePropositionInteractionXdm removed * ios implementation of track functionality * uuid vs proposition map added * MessagingProposition class fixes * get proposition for surfaces android fixes * ios get proposition for surface fixes * getproposition for surface updates * MessagingView commented code removed * removed proposition cache with parent * clear cache in update proposition * message util clean up * proposition Item tracking usage refactored * activityID extraction function reusable * white space fixes * added read me for track api usage * removed unnecessary checks before calling track api for android native * refactored extra null checks before calling track api at ios native side * Addeed ios and android logs for null cases * added comments and logs for android native code * marked the trackContentCardInteraction and trackContentCardDisplay as deprecated * added tests for propositionItem.track * read me updated for proposition Item track usage --------- Co-authored-by: Naman Arora <namarora+adobe@adobe.com> * add handleJavascriptMessage in AEPMessaging (#519) * Messaging - handle javascript message * add js event listener and ios * typecaste Message object * address PR comments * refactor log statements * address PR comments * revert env file id changes * clear js handler when onDismiss is called * messaging version bump for 7.2.0 release (#526) * typecaste to Message object (#527) * read me updates regarding deprecated apis --------- Co-authored-by: namArora3112 <namarora@adobe.com> Co-authored-by: Naman Arora <namarora+adobe@adobe.com>

ishita-gambhir-adobe added 3 commits August 12, 2025 11:07

Messaging - handle javascript message

3845543

add js event listener and ios

aacdb67

typecaste Message object

063a771

namArora3112 reviewed Aug 21, 2025

View reviewed changes

apps/AEPSampleAppNewArchEnabled/app/MessagingView.tsx Show resolved Hide resolved

ishita-gambhir-adobe changed the title ~~handle js message~~ add handleJavascriptMessage in AEPMessaging Aug 21, 2025

namArora3112 requested changes Aug 21, 2025

View reviewed changes

packages/messaging/src/models/Message.ts Outdated Show resolved Hide resolved

namArora3112 reviewed Aug 21, 2025

View reviewed changes

packages/messaging/package.json Outdated Show resolved Hide resolved

address PR comments

d0831eb

ishita-gambhir-adobe requested review from namArora3112, navratan-soni and akhiljain1907 August 27, 2025 10:17

ishita-gambhir-adobe commented Aug 27, 2025

View reviewed changes

namArora3112 reviewed Aug 27, 2025

View reviewed changes

apps/AEPSampleAppNewArchEnabled/app/MessagingView.tsx Outdated Show resolved Hide resolved

namArora3112 reviewed Aug 27, 2025

View reviewed changes

...id/src/main/java/com/adobe/marketing/mobile/reactnative/messaging/RCTAEPMessagingModule.java Show resolved Hide resolved

namArora3112 reviewed Aug 27, 2025

View reviewed changes

namArora3112 approved these changes Aug 27, 2025

View reviewed changes

refactor log statements

8903ad0

akhiljain1907 approved these changes Aug 27, 2025

View reviewed changes

ishita-gambhir-adobe changed the base branch from staging to feat/messagingEnhancements-7.2.0 August 29, 2025 05:18

ishita-gambhir-adobe requested a review from cacheung August 29, 2025 05:18

ishwetansh self-requested a review August 29, 2025 10:31

ishwetansh reviewed Aug 29, 2025

View reviewed changes

address PR comments

67d2f52

ishita-gambhir-adobe requested a review from ishwetansh September 2, 2025 07:36

ishita-gambhir-adobe added 3 commits September 2, 2025 13:10

Merge branch 'feat/messagingEnhancements-7.2.0' into feat/handleJsMes…

c77e85d

…sage

revert env file id changes

0d1b44b

clear js handler when onDismiss is called

377b71a

ishita-gambhir-adobe requested a review from sagar-sharma-adobe September 3, 2025 07:10

sagar-sharma-adobe approved these changes Sep 3, 2025

View reviewed changes

ishita-gambhir-adobe merged commit 78a650f into adobe:feat/messagingEnhancements-7.2.0 Sep 3, 2025
5 checks passed

		const ENV_ID_Messaging = "3149c49c3910/4f6b2fbf2986/launch-7d78a5fd1de3-development";
		MobileCore.initializeWithAppId(ENV_ID_Messaging)


		In the `onShow` function of `MessagingDelegate`, call `handleJavascriptMessage(handlerName: string, handler: (content: string) => void)` to register your handler.

		The name of the message you intend to pass from the JavaScript side should be specified in the first parameter.

add handleJavascriptMessage in AEPMessaging #519

add handleJavascriptMessage in AEPMessaging #519

Uh oh!

Conversation

ishita-gambhir-adobe commented Aug 21, 2025

Description

Related Issue

Motivation and Context

How Has This Been Tested?

Screenshots (if appropriate):

Types of changes

Checklist:

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

namArora3112 left a comment

Choose a reason for hiding this comment

Uh oh!

ishwetansh Aug 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ishwetansh Aug 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ishwetansh Aug 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

ishwetansh Aug 29, 2025 •

edited

Loading

ishwetansh Aug 29, 2025 •

edited

Loading

ishwetansh Aug 29, 2025 •

edited

Loading