feat: add additionalMessageHandlers prop to iOS WebView - #80
Conversation
joaoloureirop
left a comment
There was a problem hiding this comment.
Thanks for this — the approach looks right for Apple Pay / third-party checkout, and the docs + example make the intent easy to follow. CI looking green after the main merge is great.
One optional hardening note, nothing blocking for the cbOnramp path.
addAdditionalMessageHandlers only skips ReactNativeWebView. Names that are already on the config (ReactNativeHistoryShim, base64Handler) or duplicate entries in the array would make addScriptMessageHandler:name: throw. Unlikely if the app always passes a single known name like cbOnramp, but if this stays a public prop it might be worth uniquing the list, dropping empties, and skipping reserved names. remove is already safe for missing names.
A couple of small nits if you feel like tidying:
- PR title says
additionalMessageHandlers; the prop isadditionalMessageHandlerNames - Docs say handlers are registered on mount, but the setter +
resetupScriptsalready supports updates - Changelog could use past participle (
Added …) for Keep a Changelog consistency
When this lands in Ramp checkout, validating event.nativeEvent.url (and the payload) before treating it as Coinbase would be a good follow-up — same trust model as ReactNativeWebView.
Description
Adds an iOS-only
additionalMessageHandlerNamesprop that registers extra nativeWKScriptMessageHandlernames alongside the built-inReactNativeWebViewhandler. A page can callwindow.webkit.messageHandlers.<name>.postMessage(...)and the message is delivered toonMessageexactly like aReactNativeWebViewmessage.The motivating case is
enableApplePay, which strips every injected user script and therefore breaks the usualwindow.ReactNativeWebView.postMessagebridge. Third-party checkout pages (for example Coinbase Onramp posting tocbOnramp) can still reach the app through a native handler, so this prop keeps messaging working in Apple Pay mode without any injected JavaScript.Fixes: https://consensyssoftware.atlassian.net/browse/TRAM-4019
Changes
additionalMessageHandlerNames?: string[]prop onIOSWebViewPropsand the Fabric native component spec, with a JSDoc description.RNCWebViewImplstores the names, registers aRNCWeakScriptMessageDelegatefor each one inresetupScripts(both the Apple Pay path and the normal path), and removes them on teardown and whenever the prop changes.userContentController:didReceiveScriptMessage:now accepts messages from any registered additional handler. Non-string bodies are JSON-serialized soevent.nativeEvent.datais always a string, matching existing behavior.ReactNativeWebViewname is skipped if passed, so it cannot be double-registered or accidentally removed.RNCWebView.mm) and Paper (RNCWebViewManager.mm) prop plumbing.docs/Reference.md, entry added to theUnreleasedsection ofCHANGELOG.md.AdditionalMessageHandlersexample screen in the example app, reachable from aMessageHandlersbutton on iOS.Testing
MessageHandlersscreen. The page posts to a custom handler name withenableApplePayon, and the message should appear viaonMessage.MessagingandApplePayexamples still behave as before.WKScriptMessageHandlerduplicate-name exception).Notes
ReactNativeWebViewhandler.Note
Medium Risk
Changes iOS WebView script message routing used with Apple Pay and third-party checkout pages; behavior is additive but affects payment-adjacent messaging paths.
Overview
Adds an iOS-only
additionalMessageHandlerNamesprop so apps can register extra nativeWKScriptMessageHandlernames (e.g. third-party checkout handlers likecbOnramp) that deliver toonMessagethe same way asReactNativeWebView.Native code registers and tears down these handlers in
resetupScripts, including whenenableApplePayis on and injected messaging scripts are not used. Messages from registered names are accepted alongside the default handler; non-string postMessage bodies are JSON-serialized soevent.nativeEvent.datastays a string, and only main-frame posts are forwarded (unchanged policy). Prop updates re-register handlers to avoid duplicate handler crashes.TypeScript/Fabric/Paper wiring, Reference.md and CHANGELOG, plus an example MessageHandlers screen with
enableApplePayare included. Android exposes a no-op stub only.Reviewed by Cursor Bugbot for commit 2aaacb1. Bugbot is set up for automated code reviews on this repo. Configure here.