@onekeyfe/react-native-chart-webview 3.0.52 → 3.0.54

package/ChartWebview.podspec

@@ -11,7 +11,7 @@ Pod::Spec.new do |s|
   s.authors      = package["author"]
 
   s.platforms    = { :ios => min_ios_version_supported }
-  s.source       = { :git => "https://github.com/OneKeyHQ/app-views/react-native-chart-webview.git", :tag => "#{s.version}" }
+  s.source       = { :git => "https://github.com/OneKeyHQ/native-views/react-native-chart-webview.git", :tag => "#{s.version}" }
 
   s.source_files = [
     "ios/**/*.{swift}",

package/README.md

@@ -10,12 +10,25 @@ yarn add @onekeyfe/react-native-chart-webview
 
 ## Usage
 
-```js
+```tsx
 import { ChartWebviewView } from '@onekeyfe/react-native-chart-webview';
 
 // ...
 
-<ChartWebviewView color="#ff0000" style={{ width: 100, height: 100 }} />
+<ChartWebviewView
+  style={{ flex: 1 }}
+  uri="https://tradingview.onekey.so/?theme=dark&symbol=BTC"
+  reuseKey="market"
+  pooled={true}
+  active={true}
+/>
+
+<ChartWebviewView
+  style={{ flex: 1 }}
+  localBundle="tradingview-assets"
+  entry="index.html"
+  paramsJson={JSON.stringify({ theme: 'dark', symbol: 'BTC' })}
+/>
 ```
 
 ## Contributing

package/android/src/main/java/com/margelo/nitro/chartwebview/ChartWebview.kt

@@ -36,7 +36,16 @@ class HybridChartWebview(val context: ThemedReactContext) : HybridChartWebviewSp
     // render-ready signal. Shared so render-ready (which arrives on whichever host
     // owns the WebView at that instant — not necessarily the awaiting one) reveals
     // the correct host regardless of the owner-handoff timing.
-    private var pendingRevealHost: HybridChartWebview? = null
+    //
+    // WeakReference (iOS uses a `weak` static for the same reason): a strong static
+    // would leak the host — and its ReactContext/Activity — if the host unmounts
+    // mid-reveal. dispose() also clears it eagerly on detach.
+    private var pendingRevealHostRef: java.lang.ref.WeakReference<HybridChartWebview>? = null
+    private var pendingRevealHost: HybridChartWebview?
+      get() = pendingRevealHostRef?.get()
+      set(value) {
+        pendingRevealHostRef = value?.let { java.lang.ref.WeakReference(it) }
+      }
   }
 
   private val instanceId = instanceIds.incrementAndGet()
@@ -45,7 +54,11 @@ class HybridChartWebview(val context: ThemedReactContext) : HybridChartWebviewSp
   // we add at runtime (the WebView / placeholder). Without forcing a measure +
   // layout pass here, those children stay 0x0 and the slot renders blank. This
   // requestLayout override is the standard RN fix for custom ViewGroups.
-  private inner class ChartContainer(ctx: android.content.Context) : FrameLayout(ctx) {
+  private inner class ChartContainer(ctx: android.content.Context) : FrameLayout(ctx), HostAware {
+    // Lets the view manager reach this host from the dropped View (onDropViewInstance)
+    // to run teardown — see TeardownChartWebviewManager.
+    override val chartHost: HybridChartWebview get() = this@HybridChartWebview
+
     private val relayout = Runnable {
       measure(
         MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
@@ -79,6 +92,9 @@ class HybridChartWebview(val context: ThemedReactContext) : HybridChartWebviewSp
   /** The WebView backing this host (a shared pool entry, or a private one). */
   private var backing: PooledChartWebView? = null
   private var attached = false
+  // The pooled key this host has refcounted via ChartWebviewPool.adopt (null when
+  // not pooled). Makes adopt/release idempotent per host across many reconciles.
+  private var adoptedPoolKey: String? = null
 
   // --- Source props ---
 
@@ -200,8 +216,16 @@ class HybridChartWebview(val context: ThemedReactContext) : HybridChartWebviewSp
   // displays the live WebView; inactive hosts display the cached frame snapshot
   // so their slot isn't blank (and the live WebView reparents on hand-off).
   private fun reconcilePooled() {
-    val entry = ChartWebviewPool.acquireShared(effectiveKey(), context)
+    val key = effectiveKey()
+    val entry = ChartWebviewPool.acquireShared(key, context)
     backing = entry
+    // Refcount the pool entry once per host (reconcile runs many times). Balanced
+    // by releaseShared in dispose(). If the reuseKey changed, release the old one.
+    if (adoptedPoolKey != key) {
+      adoptedPoolKey?.let { ChartWebviewPool.releaseShared(it) }
+      ChartWebviewPool.adopt(key)
+      adoptedPoolKey = key
+    }
     if (wantsOwnership()) {
       entry.owner = this
       // Register the document-start bridge before the first load (the prop is set
@@ -328,4 +352,31 @@ class HybridChartWebview(val context: ThemedReactContext) : HybridChartWebviewSp
     placeholder?.let { container.removeView(it) }
     placeholder = null
   }
+
+  // Host teardown. Called by the view manager's onDropViewInstance (the only
+  // reliable "host is gone" signal — onViewDetachedFromWindow fires on every
+  // navigation, not just final teardown). Tears down the NON-pooled (private)
+  // WebView so it doesn't leak a Chromium renderer + JavascriptInterface per
+  // mount/unmount. Pooled (shared) backing is intentionally left alive in the
+  // warm pool — other hosts may still share it; its lifetime is the pool's.
+  fun dispose() {
+    stopOwnCapture()
+    container.removeCallbacks(reconcileRunnable)
+    container.removeCallbacks(revealFallbackRunnable)
+    // Don't leak this host (and its ReactContext/Activity) via the static
+    // pendingRevealHost if we unmount mid-reveal.
+    if (pendingRevealHost == this) pendingRevealHost = null
+    val entry = backing
+    if (entry != null && entry.owner == this) entry.owner = null
+    // Balance the pool adopt() if this host ever joined a pooled key. Kept warm by
+    // default (single-instance cache); the release path makes destroy() reachable.
+    adoptedPoolKey?.let { ChartWebviewPool.releaseShared(it) }
+    adoptedPoolKey = null
+    // A private (non-pooled) instance is owned solely by this host — tear it down
+    // so it doesn't leak a Chromium renderer + JavascriptInterface.
+    if (entry != null && !isPooled()) entry.destroy()
+    backing = null
+    removePlaceholder()
+    ownSnapshot = null
+  }
 }

package/android/src/main/java/com/margelo/nitro/chartwebview/ChartWebviewPackage.kt

@@ -1,5 +1,6 @@
 package com.margelo.nitro.chartwebview
 
+import android.view.View
 import com.facebook.react.BaseReactPackage
 import com.facebook.react.bridge.NativeModule
 import com.facebook.react.bridge.ReactApplicationContext
@@ -8,6 +9,26 @@ import com.facebook.react.uimanager.ViewManager
 
 import com.margelo.nitro.chartwebview.views.HybridChartWebviewManager
 
+/**
+ * View manager subclass that adds a teardown hook on top of the nitrogen-generated
+ * [HybridChartWebviewManager] (which is DO-NOT-MODIFY). The base manager removes
+ * the view from its private table on drop but never tears the WebView down, so the
+ * non-pooled (private) path would leak a Chromium renderer + JavascriptInterface
+ * per mount/unmount. On drop we reach the host via the container ([HostAware]) and
+ * call [HybridChartWebview.dispose].
+ */
+class TeardownChartWebviewManager : HybridChartWebviewManager() {
+  override fun onDropViewInstance(view: View) {
+    (view as? HostAware)?.chartHost?.dispose()
+    super.onDropViewInstance(view)
+  }
+}
+
+/** Implemented by the host's container view so the manager can reach the host on drop. */
+interface HostAware {
+  val chartHost: HybridChartWebview
+}
+
 class ChartWebviewPackage : BaseReactPackage() {
     override fun getModule(name: String, reactContext: ReactApplicationContext): NativeModule? {
         return null
@@ -18,7 +39,9 @@ class ChartWebviewPackage : BaseReactPackage() {
     }
 
     override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
-        return listOf(HybridChartWebviewManager())
+        // Use the teardown-aware subclass so the non-pooled WebView is destroyed on
+        // host drop (the base manager never tears it down).
+        return listOf(TeardownChartWebviewManager())
     }
 
     companion object {

package/android/src/main/java/com/margelo/nitro/chartwebview/PooledChartWebView.kt

@@ -18,6 +18,7 @@ import com.facebook.react.uimanager.ThemedReactContext
 import android.webkit.WebResourceRequest
 import android.webkit.WebResourceResponse
 import android.webkit.WebView
+import androidx.webkit.ScriptHandler
 import androidx.webkit.WebResourceErrorCompat
 import androidx.webkit.WebViewAssetLoader
 import androidx.webkit.WebViewClientCompat
@@ -66,18 +67,83 @@ class PooledChartWebView private constructor(
   // Shim (defines __chartNativePost) + the TS bridge that uses it. Set lazily via
   // setBridgeScript once the host has the prop value — registering it in init
   // would capture an empty script, since the first reconcile (window-attach) can
-  // run before the bridgeScript prop is applied. Re-asserted on page start/finish.
+  // run before the bridgeScript prop is applied. The privileged bridge exposes
+  // window.$onekey.$private.request etc., so it must only ever be injected into
+  // the trusted chart origin(s) we load — NOT cross-origin subframes / arbitrary
+  // pages. The actual document-start registration is therefore deferred to
+  // registerBridgeForOrigins(), called once the load URL (hence origin) is known.
   private var outboundBridgeJs: String = ""
-  private var bridgeRegistered = false
 
-  // Called by the host before the first load. Registers the document-start bridge
-  // once a non-empty script is available; subsequent calls are no-ops.
+  // Handler for the currently-registered document-start script, kept so it can be
+  // removed and re-registered if the bridge script or the trusted origin set
+  // changes (instead of silently latching the first one).
+  private var bridgeScriptHandler: ScriptHandler? = null
+  // The (script, origins) pair currently registered, so we can detect changes and
+  // avoid redundant re-registration.
+  private var registeredBridgeJs: String? = null
+  private var registeredOrigins: Set<String> = emptySet()
+
+  // True once we have a non-empty bridge script staged; gates loading (the page
+  // must not boot before the bridge is registered or its first requests are lost).
+  private val bridgeRegistered: Boolean
+    get() = outboundBridgeJs.isNotEmpty()
+
+  // Called by the host before the first load. Stages the document-start bridge
+  // (shim + the shared TS bridgeScript) once a non-empty script is available.
+  // The script is not injected into the page yet — that happens, scoped to the
+  // trusted origin(s), in registerBridgeForOrigins() when the load URL is known.
+  // If a second host sharing the reuseKey supplies a DIFFERENT script we update
+  // it (and re-register on next load) rather than silently dropping it; in the
+  // app's single-reuseKey + constant-bridge reality this branch never fires, but
+  // not latching keeps it correct if that ever changes.
   fun setBridgeScript(bridgeScript: String) {
-    if (bridgeRegistered || bridgeScript.isEmpty()) return
+    if (bridgeScript.isEmpty()) return
     outboundBridgeJs = "$NATIVE_POST_SHIM_JS\n$bridgeScript"
-    bridgeRegistered = true
-    if (WebViewFeature.isFeatureSupported(WebViewFeature.DOCUMENT_START_SCRIPT)) {
-      WebViewCompat.addDocumentStartJavaScript(webView, outboundBridgeJs, setOf("*"))
+  }
+
+  // Register (or re-register) the document-start bridge scoped to exactly the
+  // trusted origins we load. allowedOriginRules of setOf("*") would leak the
+  // privileged bridge into every cross-origin subframe; here we pass only the
+  // offline asset origin and (in online mode) the configured chart origin.
+  private fun registerBridgeForOrigins(origins: Set<String>) {
+    if (outboundBridgeJs.isEmpty() || origins.isEmpty()) return
+    if (!WebViewFeature.isFeatureSupported(WebViewFeature.DOCUMENT_START_SCRIPT)) return
+    // No-op if nothing changed (same script + same origin set already registered).
+    if (bridgeScriptHandler != null &&
+      registeredBridgeJs == outboundBridgeJs &&
+      registeredOrigins == origins
+    ) {
+      return
+    }
+    bridgeScriptHandler?.remove()
+    bridgeScriptHandler =
+      WebViewCompat.addDocumentStartJavaScript(webView, outboundBridgeJs, origins)
+    registeredBridgeJs = outboundBridgeJs
+    registeredOrigins = origins
+  }
+
+  // The trusted origin set for the current source: the offline asset origin
+  // (https://appassets.androidplatform.net) always, plus the online/fallback
+  // `uri` origin when running in online mode. computeTargetUrl serves offline
+  // content from ASSET_HOST and online content from `uri`, so these are exactly
+  // the origins the privileged bridge legitimately runs in.
+  private fun trustedOriginsFor(uri: String?): Set<String> {
+    val origins = linkedSetOf("https://$ASSET_HOST")
+    originOf(uri)?.let { origins.add(it) }
+    return origins
+  }
+
+  // scheme://host[:port] of a URL, or null if it can't be parsed / isn't http(s).
+  private fun originOf(url: String?): String? {
+    if (url.isNullOrEmpty()) return null
+    return try {
+      val u = java.net.URI(url)
+      val scheme = u.scheme?.lowercase() ?: return null
+      if (scheme != "https" && scheme != "http") return null
+      val host = u.host ?: return null
+      if (u.port != -1) "$scheme://$host:${u.port}" else "$scheme://$host"
+    } catch (e: Exception) {
+      null
     }
   }
 
@@ -93,6 +159,10 @@ class PooledChartWebView private constructor(
   // clearSnapshot() or the next capture replaces it.
   private var cachedSnapshot: Bitmap? = null
   private var overlay: ImageView? = null
+  // The bitmap currently shown by `overlay` (a snapshot reused directly, not a
+  // copy). Tracked so a concurrent capture doesn't recycle a bitmap still on
+  // screen — see capturePixelCopy.
+  private var overlaySnapshot: Bitmap? = null
 
   // How long the snapshot overlay stays up after a reparent, giving the WebView
   // time to draw its first frame in the new container (~5 frames).
@@ -119,14 +189,12 @@ class PooledChartWebView private constructor(
         request: WebResourceRequest,
       ): WebResourceResponse? = assetLoader?.shouldInterceptRequest(request.url)
 
-      override fun onPageStarted(view: WebView, url: String?, favicon: android.graphics.Bitmap?) {
-        super.onPageStarted(view, url, favicon)
-        if (outboundBridgeJs.isNotEmpty()) view.evaluateJavascript(outboundBridgeJs, null)
-      }
-
       override fun onPageFinished(view: WebView, url: String?) {
         super.onPageFinished(view, url)
-        if (outboundBridgeJs.isNotEmpty()) view.evaluateJavascript(outboundBridgeJs, null)
+        // The bridge is delivered exclusively via the origin-scoped document-start
+        // script (see registerBridgeForOrigins). We deliberately do NOT re-inject
+        // it here via evaluateJavascript — that ran on every page event regardless
+        // of URL and would expose the privileged bridge to untrusted pages/frames.
         owner?.dispatchLoadEnd()
         // Prime the snapshot so the first move already has a frame to mask with.
         refreshSnapshotSoon()
@@ -207,6 +275,9 @@ class PooledChartWebView private constructor(
   fun clearSnapshot() {
     runOnUiThread {
       removeOverlay()
+      // The pool owns cachedSnapshot outright (hosts get copies via captureNow),
+      // so recycle it here instead of leaving a full-size ARGB_8888 bitmap to GC.
+      cachedSnapshot?.recycle()
       cachedSnapshot = null
     }
   }
@@ -220,9 +291,17 @@ class PooledChartWebView private constructor(
   }
 
   /// Capture now and deliver the fresh frame (e.g. so the host that is losing
-  /// ownership can update its placeholder to its very last frame).
+  /// ownership can update its placeholder to its very last frame). The host gets
+  /// an independent COPY: the pool reuses/recycles its own `cachedSnapshot` on
+  /// every internal refresh, so handing out the live buffer would let it recycle
+  /// a bitmap still shown in a host placeholder. The copy is the host's to keep.
   fun captureNow(callback: (Bitmap?) -> Unit) {
-    capturePixelCopy(callback)
+    capturePixelCopy { bmp ->
+      val copy = bmp?.takeIf { !it.isRecycled }?.let {
+        it.copy(it.config ?: Bitmap.Config.ARGB_8888, false)
+      }
+      callback(copy)
+    }
   }
 
   // Capture the WebView's REAL on-screen pixels (incl. GPU-rendered chart
@@ -247,7 +326,20 @@ class PooledChartWebView private constructor(
         src,
         bmp,
         { result ->
-          if (result == PixelCopy.SUCCESS) cachedSnapshot = bmp
+          if (result == PixelCopy.SUCCESS) {
+            // Recycle the frame we're replacing to avoid piling up full-size
+            // ARGB_8888 bitmaps. Guard against recycling one still referenced by a
+            // live overlay/placeholder ImageView (showSnapshotOverlay reuses
+            // cachedSnapshot directly): only the unused old buffer is freed.
+            val old = cachedSnapshot
+            cachedSnapshot = bmp
+            if (old != null && old !== bmp && old !== overlaySnapshot && !old.isRecycled) {
+              old.recycle()
+            }
+          } else {
+            // Capture failed: the freshly allocated buffer is unused — free it.
+            if (!bmp.isRecycled) bmp.recycle()
+          }
           callback?.invoke(cachedSnapshot)
         },
         webView.handler ?: Handler(Looper.getMainLooper()),
@@ -279,12 +371,17 @@ class PooledChartWebView private constructor(
     }
     container.addView(iv) // added last => drawn on top of the WebView
     overlay = iv
+    overlaySnapshot = snap
     iv.postDelayed({ removeOverlay() }, overlayHideDelayMs)
   }
 
   private fun removeOverlay() {
-    overlay?.let { (it.parent as? ViewGroup)?.removeView(it) }
+    overlay?.let {
+      (it.parent as? ViewGroup)?.removeView(it)
+      it.setImageDrawable(null)
+    }
     overlay = null
+    overlaySnapshot = null
   }
 
   /**
@@ -301,6 +398,11 @@ class PooledChartWebView private constructor(
       lastLocalBundle = localBundle
       rebuildAssetLoader(localBundle)
     }
+    // Register the document-start bridge scoped to exactly the origin(s) this load
+    // uses (offline asset origin, plus the online `uri` origin when present) before
+    // navigating, so the page boots with the bridge but cross-origin subframes /
+    // untrusted pages don't receive it.
+    registerBridgeForOrigins(trustedOriginsFor(uri))
     val target = computeTargetUrl(uri, localBundle, entry, paramsJson) ?: return
     if (target == lastLoadedUrl) return
     lastLoadedUrl = target
@@ -319,9 +421,19 @@ class PooledChartWebView private constructor(
     runOnUiThread { webView.reload() }
   }
 
-  /** Permanently free the WebView (used for non-pooled / private instances). */
+  /**
+   * Permanently free the WebView and its bridge/snapshot resources. Used for the
+   * non-pooled (private) path on host teardown, and reachable for the pool (see
+   * ChartWebviewPool.release) so an evicted entry can be torn down rather than
+   * leaking a Chromium renderer + JavascriptInterface.
+   */
   fun destroy() {
     runOnUiThread {
+      bridgeScriptHandler?.remove()
+      bridgeScriptHandler = null
+      removeOverlay()
+      cachedSnapshot?.recycle()
+      cachedSnapshot = null
       (webView.parent as? ViewGroup)?.removeView(webView)
       webView.destroy()
       val n = liveCount.decrementAndGet()
@@ -405,8 +517,42 @@ class PooledChartWebView private constructor(
  */
 object ChartWebviewPool {
   private val shared = HashMap<String, PooledChartWebView>()
-
+  // Refcount per key: incremented when a host adopts the entry, decremented when a
+  // host releases it. Lets us know when an entry has no live hosts. With the app's
+  // single constant reuseKey this stays >= 0 and the entry is kept warm; the count
+  // exists so destroy() is *reachable* (see releaseShared) rather than dead code,
+  // and so a future multi-key/LRU policy can evict safely.
+  private val refCounts = HashMap<String, Int>()
+
+  /** Get (creating if absent) the entry for [key]. Does not change the refcount —
+   *  call [adopt] exactly once per host to register a live reference. */
   @Synchronized
   fun acquireShared(key: String, context: Context): PooledChartWebView =
     shared.getOrPut(key) { PooledChartWebView.create(context, key) }
+
+  /** Register one live host reference to [key] (call once per host; idempotency is
+   *  the caller's responsibility via adoptedPoolKey). */
+  @Synchronized
+  fun adopt(key: String) {
+    refCounts[key] = (refCounts[key] ?: 0) + 1
+  }
+
+  /**
+   * A host that previously adopted [key] is going away. Decrements the refcount.
+   * By default the entry is kept warm even at zero (intentional single-instance
+   * cache — see class doc); pass [destroyWhenIdle] = true to actually tear the
+   * WebView down when the last host leaves (used for an LRU/eviction policy).
+   */
+  @Synchronized
+  fun releaseShared(key: String, destroyWhenIdle: Boolean = false) {
+    val next = (refCounts[key] ?: 0) - 1
+    if (next <= 0) {
+      refCounts.remove(key)
+      if (destroyWhenIdle) {
+        shared.remove(key)?.destroy()
+      }
+    } else {
+      refCounts[key] = next
+    }
+  }
 }

package/ios/ChartWebview.swift

@@ -63,6 +63,9 @@ class HybridChartWebview: HybridChartWebviewSpec {
   /// The WebView backing this host (a shared pool entry, or a private one).
   private var backing: PooledChartWebView?
   private var attached = false
+  // The pooled key this host has refcounted via the pool (nil when not pooled).
+  // Makes adopt/release idempotent per host across many reconciles.
+  private var adoptedPoolKey: String?
 
   override init() {
     super.init()
@@ -72,6 +75,26 @@ class HybridChartWebview: HybridChartWebviewSpec {
     }
   }
 
+  // Host teardown. ARC deallocates the host when the view manager drops it; this is
+  // the reliable "host is gone" signal. Tears down the NON-pooled (private) WebView
+  // so it doesn't leak, balances the pool refcount for the pooled path, and clears
+  // the static pendingRevealHost if we go away mid-reveal.
+  deinit {
+    revealFallbackWork?.cancel()
+    if HybridChartWebview.pendingRevealHost === self {
+      HybridChartWebview.pendingRevealHost = nil
+    }
+    let entry = backing
+    if let key = adoptedPoolKey {
+      // Pooled: balance the adopt(). Kept warm by default; release makes the
+      // pool's destroy() reachable.
+      ChartWebviewPool.shared.releaseShared(key: key)
+    } else {
+      // Private: this host solely owns the WebView — tear it down.
+      entry?.destroy()
+    }
+  }
+
   // MARK: - Props (source)
 
   var uri: String? { didSet { applySourceIfOwner() } }
@@ -168,8 +191,16 @@ class HybridChartWebview: HybridChartWebviewSpec {
   // displays the live WebView; inactive hosts display the cached frame snapshot
   // so their slot isn't blank (and the live WebView reparents on hand-off).
   private func reconcilePooled() {
-    let pooled = ChartWebviewPool.shared.acquireShared(key: effectiveKey())
+    let key = effectiveKey()
+    let pooled = ChartWebviewPool.shared.acquireShared(key: key)
     backing = pooled
+    // Refcount the entry once per host (reconcile runs many times). Balanced by
+    // releaseShared in deinit. If the reuseKey changed, release the old one first.
+    if adoptedPoolKey != key {
+      if let old = adoptedPoolKey { ChartWebviewPool.shared.releaseShared(key: old) }
+      ChartWebviewPool.shared.adopt(key: key)
+      adoptedPoolKey = key
+    }
     if wantsOwnership() {
       pooled.owner = self
       // Register the document-start bridge before the first load (the prop is set
@@ -326,6 +357,9 @@ final class PooledChartWebView {
   // added lazily (see setBridgeScript) once the host has the prop value.
   private var userContent: WKUserContentController?
   private var bridgeRegistered = false
+  // The bridge script currently registered, so a differing script from a second
+  // host sharing a reuseKey is re-registered rather than silently dropped (fix #4).
+  private var registeredBridgeScript: String?
 
   private var webView: WKWebView!
   private var proxy: ChartWebViewProxy!
@@ -354,15 +388,27 @@ final class PooledChartWebView {
   // subsequent calls are no-ops. Done lazily because the first reconcile
   // (window-attach) can run before the bridgeScript prop is applied.
   func setBridgeScript(_ bridgeScript: String) {
-    guard !bridgeRegistered, !bridgeScript.isEmpty, let userContent = userContent else { return }
+    guard !bridgeScript.isEmpty, let userContent = userContent else { return }
+    // Re-register if a second host sharing the reuseKey supplies a DIFFERENT script
+    // instead of silently dropping it (fix #4). In the app's single-reuseKey +
+    // constant-bridge reality this never fires; not latching keeps it correct.
+    if bridgeRegistered, registeredBridgeScript == bridgeScript { return }
+    if bridgeRegistered {
+      // WKUserScripts can't be removed individually; drop all and re-add ours.
+      userContent.removeAllUserScripts()
+    }
     bridgeRegistered = true
+    registeredBridgeScript = bridgeScript
     let handlerName = ChartWebviewConst.messageHandlerName
     let shim = "(function(){window.__chartNativePost=function(s){"
       + "window.webkit.messageHandlers.\(handlerName).postMessage(s);};})();"
     let userScript = WKUserScript(
       source: shim + "\n" + bridgeScript,
       injectionTime: .atDocumentStart,
-      forMainFrameOnly: false
+      // Main frame only: the privileged bridge (window.$onekey.$private.request etc.)
+      // must not be exposed to cross-origin iframes. The chart page runs in the main
+      // frame, so it still gets the full bridge (fix #1).
+      forMainFrameOnly: true
     )
     userContent.addUserScript(userScript)
   }
@@ -430,6 +476,32 @@ final class PooledChartWebView {
     }
   }
 
+  /// Permanently tear down the WebView and its bridge. Used for the non-pooled
+  /// (private) path on host teardown, and reachable for the pool (see
+  /// ChartWebviewPool.releaseShared). Stops loading, detaches the view, and
+  /// removes the script message handler so the proxy retain is released.
+  func destroy() {
+    runOnMain { [weak self] in
+      guard let self = self else { return }
+      self.removeOverlay()
+      self.cachedSnapshot = nil
+      if let webView = self.webView {
+        webView.stopLoading()
+        webView.navigationDelegate = nil
+        webView.uiDelegate = nil
+        webView.removeFromSuperview()
+      }
+      // Drop the page -> native handler so the user-content controller stops
+      // retaining the proxy (and re-entrancy can't deliver to a torn-down owner).
+      self.userContent?.removeScriptMessageHandler(forName: ChartWebviewConst.messageHandlerName)
+      self.userContent?.removeAllUserScripts()
+      self.userContent = nil
+      self.webView = nil
+      PooledChartWebView.liveCount -= 1
+      NSLog("[ChartWebviewPool] WebView DESTROYED key=\(self.key) liveCount=\(PooledChartWebView.liveCount)")
+    }
+  }
+
   /// Drop the cached snapshot and remove any visible overlay.
   func clearSnapshot() {
     runOnMain { [weak self] in
@@ -741,11 +813,52 @@ extension ChartWebViewProxy: WKURLSchemeHandler {
 final class ChartWebviewPool {
   static let shared = ChartWebviewPool()
   private var entries: [String: PooledChartWebView] = [:]
-
+  // Refcount per key: incremented on adopt, decremented on release. Lets us know
+  // when an entry has no live hosts. With the app's single constant reuseKey this
+  // stays warm; the count exists so destroy() is reachable (see releaseShared) and
+  // so a future multi-key/LRU policy can evict safely.
+  private var refCounts: [String: Int] = [:]
+  // Serializes all dictionary access. Android guards the pool with @Synchronized;
+  // here concurrent acquire/release could otherwise corrupt the dict or create
+  // duplicate WebViews for one key (fix #3).
+  private let lock = NSLock()
+
+  /// Get (creating if absent) the entry for `key`. Does NOT change the refcount —
+  /// call `adopt` exactly once per host (idempotency via `adoptedPoolKey`).
   func acquireShared(key: String) -> PooledChartWebView {
+    lock.lock()
+    defer { lock.unlock() }
     if let existing = entries[key] { return existing }
     let created = PooledChartWebView(key: key)
     entries[key] = created
     return created
   }
+
+  /// Register one live host reference to `key` (call once per host).
+  func adopt(key: String) {
+    lock.lock()
+    defer { lock.unlock() }
+    refCounts[key, default: 0] += 1
+  }
+
+  /// A host that previously adopted `key` is going away. Decrements the refcount.
+  /// Kept warm by default (intentional single-instance cache); pass
+  /// `destroyWhenIdle: true` to tear the WebView down when the last host leaves.
+  func releaseShared(key: String, destroyWhenIdle: Bool = false) {
+    lock.lock()
+    let next = (refCounts[key] ?? 0) - 1
+    var toDestroy: PooledChartWebView?
+    if next <= 0 {
+      refCounts[key] = nil
+      if destroyWhenIdle {
+        toDestroy = entries.removeValue(forKey: key)
+      }
+    } else {
+      refCounts[key] = next
+    }
+    lock.unlock()
+    // destroy() hops to main and isn't part of the dict invariant — call outside
+    // the lock.
+    toDestroy?.destroy()
+  }
 }

package/lib/module/index.js

@@ -1,19 +1,64 @@
 "use strict";
 
-import { createElement } from 'react';
-import { getHostComponent } from 'react-native-nitro-modules';
+import { createElement, useCallback, useMemo, useRef } from 'react';
+import { callback, getHostComponent } from 'react-native-nitro-modules';
 const ChartWebviewConfig = require('../nitrogen/generated/shared/json/ChartWebviewConfig.json');
 import { CHART_BRIDGE_JS } from "./bridge.js";
 export { CHART_BRIDGE_JS } from "./bridge.js";
 const NativeChartWebviewView = getHostComponent('ChartWebview', () => ChartWebviewConfig);
+function unwrapCallback(wrapped) {
+  if (typeof wrapped === 'function') {
+    return wrapped;
+  }
+  return wrapped?.f;
+}
 
 // Default the document-start bridge script so consumers never have to know about
 // it (and it's never absent — an optional string flipping to null is rejected by
 // the native binding). Callers can still override `bridgeScript` to customize.
-export function ChartWebviewView(props) {
+export function ChartWebviewView({
+  bridgeScript,
+  hybridRef,
+  onMessage,
+  onLoadEnd,
+  onError,
+  ...props
+}) {
+  const hybridRefRef = useRef(unwrapCallback(hybridRef));
+  hybridRefRef.current = unwrapCallback(hybridRef);
+  const onMessageRef = useRef(unwrapCallback(onMessage));
+  onMessageRef.current = unwrapCallback(onMessage);
+  const onLoadEndRef = useRef(unwrapCallback(onLoadEnd));
+  onLoadEndRef.current = unwrapCallback(onLoadEnd);
+  const onErrorRef = useRef(unwrapCallback(onError));
+  onErrorRef.current = unwrapCallback(onError);
+  const stableHybridRef = useCallback(ref => {
+    hybridRefRef.current?.(ref);
+  }, []);
+  const stableOnMessage = useCallback(message => {
+    onMessageRef.current?.(message);
+  }, []);
+  const stableOnLoadEnd = useCallback(() => {
+    onLoadEndRef.current?.();
+  }, []);
+  const stableOnError = useCallback(message => {
+    onErrorRef.current?.(message);
+  }, []);
+  const hasHybridRef = hybridRefRef.current != null;
+  const hasOnMessage = onMessageRef.current != null;
+  const hasOnLoadEnd = onLoadEndRef.current != null;
+  const hasOnError = onErrorRef.current != null;
+  const hybridRefProp = useMemo(() => hasHybridRef ? callback(stableHybridRef) : undefined, [hasHybridRef, stableHybridRef]);
+  const onMessageProp = useMemo(() => hasOnMessage ? callback(stableOnMessage) : undefined, [hasOnMessage, stableOnMessage]);
+  const onLoadEndProp = useMemo(() => hasOnLoadEnd ? callback(stableOnLoadEnd) : undefined, [hasOnLoadEnd, stableOnLoadEnd]);
+  const onErrorProp = useMemo(() => hasOnError ? callback(stableOnError) : undefined, [hasOnError, stableOnError]);
   return /*#__PURE__*/createElement(NativeChartWebviewView, {
-    bridgeScript: CHART_BRIDGE_JS,
-    ...props
+    ...props,
+    hybridRef: hybridRefProp,
+    onMessage: onMessageProp,
+    onLoadEnd: onLoadEndProp,
+    onError: onErrorProp,
+    bridgeScript: bridgeScript ?? CHART_BRIDGE_JS
   });
 }
 //# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["createElement","getHostComponent","ChartWebviewConfig","require","CHART_BRIDGE_JS","NativeChartWebviewView","ChartWebviewView","props","bridgeScript"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,SAASA,aAAa,QAA6B,OAAO;AAC1D,SAASC,gBAAgB,QAAQ,4BAA4B;AAC7D,MAAMC,kBAAkB,GAAGC,OAAO,CAAC,2DAA2D,CAAC;AAE/F,SAASC,eAAe,QAAQ,aAAU;AAG1C,SAASA,eAAe,QAAQ,aAAU;AAE1C,MAAMC,sBAAsB,GAAGJ,gBAAgB,CAC7C,cAAc,EACd,MAAMC,kBACR,CAAC;;AAED;AACA;AACA;AACA,OAAO,SAASI,gBAAgBA,CAACC,KAAoD,EAAE;EACrF,oBAAOP,aAAa,CAACK,sBAAsB,EAAE;IAAEG,YAAY,EAAEJ,eAAe;IAAE,GAAGG;EAAM,CAAC,CAAC;AAC3F","ignoreList":[]}
+{"version":3,"names":["createElement","useCallback","useMemo","useRef","callback","getHostComponent","ChartWebviewConfig","require","CHART_BRIDGE_JS","NativeChartWebviewView","unwrapCallback","wrapped","f","ChartWebviewView","bridgeScript","hybridRef","onMessage","onLoadEnd","onError","props","hybridRefRef","current","onMessageRef","onLoadEndRef","onErrorRef","stableHybridRef","ref","stableOnMessage","message","stableOnLoadEnd","stableOnError","hasHybridRef","hasOnMessage","hasOnLoadEnd","hasOnError","hybridRefProp","undefined","onMessageProp","onLoadEndProp","onErrorProp"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,SAASA,aAAa,EAAEC,WAAW,EAAEC,OAAO,EAAEC,MAAM,QAAQ,OAAO;AAEnE,SACEC,QAAQ,EACRC,gBAAgB,QAEX,4BAA4B;AACnC,MAAMC,kBAAkB,GAAGC,OAAO,CAAC,2DAA2D,CAAC;AAE/F,SAASC,eAAe,QAAQ,aAAU;AAG1C,SAASA,eAAe,QAAQ,aAAU;AAE1C,MAAMC,sBAAsB,GAAGJ,gBAAgB,CAC7C,cAAc,EACd,MAAMC,kBACR,CAAC;AAiBD,SAASI,cAAcA,CACrBC,OAA4C,EAC7B;EACf,IAAI,OAAOA,OAAO,KAAK,UAAU,EAAE;IACjC,OAAOA,OAAO;EAChB;EACA,OAAOA,OAAO,EAAEC,CAAC;AACnB;;AAEA;AACA;AACA;AACA,OAAO,SAASC,gBAAgBA,CAAC;EAC/BC,YAAY;EACZC,SAAS;EACTC,SAAS;EACTC,SAAS;EACTC,OAAO;EACP,GAAGC;AACkB,CAAC,EAAE;EACxB,MAAMC,YAAY,GAAGjB,MAAM,CAACO,cAAc,CAACK,SAAS,CAAC,CAAC;EACtDK,YAAY,CAACC,OAAO,GAAGX,cAAc,CAACK,SAAS,CAAC;EAChD,MAAMO,YAAY,GAAGnB,MAAM,CAACO,cAAc,CAACM,SAAS,CAAC,CAAC;EACtDM,YAAY,CAACD,OAAO,GAAGX,cAAc,CAACM,SAAS,CAAC;EAChD,MAAMO,YAAY,GAAGpB,MAAM,CAACO,cAAc,CAACO,SAAS,CAAC,CAAC;EACtDM,YAAY,CAACF,OAAO,GAAGX,cAAc,CAACO,SAAS,CAAC;EAChD,MAAMO,UAAU,GAAGrB,MAAM,CAACO,cAAc,CAACQ,OAAO,CAAC,CAAC;EAClDM,UAAU,CAACH,OAAO,GAAGX,cAAc,CAACQ,OAAO,CAAC;EAE5C,MAAMO,eAAe,GAAGxB,WAAW,CAAEyB,GAAQ,IAAK;IAChDN,YAAY,CAACC,OAAO,GAAGK,GAAG,CAAC;EAC7B,CAAC,EAAE,EAAE,CAAC;EACN,MAAMC,eAAe,GAAG1B,WAAW,CAAE2B,OAAe,IAAK;IACvDN,YAAY,CAACD,OAAO,GAAGO,OAAO,CAAC;EACjC,CAAC,EAAE,EAAE,CAAC;EACN,MAAMC,eAAe,GAAG5B,WAAW,CAAC,MAAM;IACxCsB,YAAY,CAACF,OAAO,GAAG,CAAC;EAC1B,CAAC,EAAE,EAAE,CAAC;EACN,MAAMS,aAAa,GAAG7B,WAAW,CAAE2B,OAAe,IAAK;IACrDJ,UAAU,CAACH,OAAO,GAAGO,OAAO,CAAC;EAC/B,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMG,YAAY,GAAGX,YAAY,CAACC,OAAO,IAAI,IAAI;EACjD,MAAMW,YAAY,GAAGV,YAAY,CAACD,OAAO,IAAI,IAAI;EACjD,MAAMY,YAAY,GAAGV,YAAY,CAACF,OAAO,IAAI,IAAI;EACjD,MAAMa,UAAU,GAAGV,UAAU,CAACH,OAAO,IAAI,IAAI;EAE7C,MAAMc,aAAa,GAAGjC,OAAO,CAC3B,MAAO6B,YAAY,GAAG3B,QAAQ,CAACqB,eAAe,CAAC,GAAGW,SAAU,EAC5D,CAACL,YAAY,EAAEN,eAAe,CAChC,CAAC;EACD,MAAMY,aAAa,GAAGnC,OAAO,CAC3B,MAAO8B,YAAY,GAAG5B,QAAQ,CAACuB,eAAe,CAAC,GAAGS,SAAU,EAC5D,CAACJ,YAAY,EAAEL,eAAe,CAChC,CAAC;EACD,MAAMW,aAAa,GAAGpC,OAAO,CAC3B,MAAO+B,YAAY,GAAG7B,QAAQ,CAACyB,eAAe,CAAC,GAAGO,SAAU,EAC5D,CAACH,YAAY,EAAEJ,eAAe,CAChC,CAAC;EACD,MAAMU,WAAW,GAAGrC,OAAO,CACzB,MAAOgC,UAAU,GAAG9B,QAAQ,CAAC0B,aAAa,CAAC,GAAGM,SAAU,EACxD,CAACF,UAAU,EAAEJ,aAAa,CAC5B,CAAC;EAED,oBAAO9B,aAAa,CAACS,sBAAsB,EAAE;IAC3C,GAAGU,KAAK;IACRJ,SAAS,EAAEoB,aAAa;IACxBnB,SAAS,EAAEqB,aAAa;IACxBpB,SAAS,EAAEqB,aAAa;IACxBpB,OAAO,EAAEqB,WAAW;IACpBzB,YAAY,EAAEA,YAAY,IAAIN;EAChC,CAAC,CAAC;AACJ","ignoreList":[]}

package/lib/typescript/src/index.d.ts

@@ -1,10 +1,17 @@
-import { type ComponentProps } from 'react';
+import { type ViewProps } from 'react-native';
+import { type NitroViewWrappedCallback } from 'react-native-nitro-modules';
 import type { ChartWebviewMethods, ChartWebviewProps } from './ChartWebview.nitro';
 export type { ChartWebviewMethods, ChartWebviewProps } from './ChartWebview.nitro';
 export { CHART_BRIDGE_JS } from './bridge';
-declare const NativeChartWebviewView: import("react-native-nitro-modules").ReactNativeView<ChartWebviewProps, ChartWebviewMethods>;
-export declare function ChartWebviewView(props: ComponentProps<typeof NativeChartWebviewView>): import("react").FunctionComponentElement<Omit<{
-    hybridRef?: import("react-native-nitro-modules").NitroViewWrappedCallback<((ref: import("react-native-nitro-modules").HybridView<ChartWebviewProps, ChartWebviewMethods>) => void) | undefined> | undefined;
+type MaybeWrappedCallback<T extends (...args: any[]) => void> = T | NitroViewWrappedCallback<T>;
+type ChartWebviewViewProps = Omit<ChartWebviewProps, 'onMessage' | 'onLoadEnd' | 'onError'> & ViewProps & {
+    hybridRef?: MaybeWrappedCallback<(ref: any) => void>;
+    onMessage?: MaybeWrappedCallback<(message: string) => void>;
+    onLoadEnd?: MaybeWrappedCallback<() => void>;
+    onError?: MaybeWrappedCallback<(message: string) => void>;
+};
+export declare function ChartWebviewView({ bridgeScript, hybridRef, onMessage, onLoadEnd, onError, ...props }: ChartWebviewViewProps): import("react").FunctionComponentElement<Omit<{
+    hybridRef?: NitroViewWrappedCallback<((ref: import("react-native-nitro-modules").HybridView<ChartWebviewProps, ChartWebviewMethods>) => void) | undefined> | undefined;
     uri?: string | undefined;
     localBundle?: string | undefined;
     entry?: string | undefined;
@@ -13,9 +20,9 @@ export declare function ChartWebviewView(props: ComponentProps<typeof NativeChar
     reuseKey?: string | undefined;
     pooled?: boolean | undefined;
     active?: boolean | undefined;
-    onMessage?: import("react-native-nitro-modules").NitroViewWrappedCallback<((message: string) => void) | undefined> | undefined;
-    onLoadEnd?: import("react-native-nitro-modules").NitroViewWrappedCallback<(() => void) | undefined> | undefined;
-    onError?: import("react-native-nitro-modules").NitroViewWrappedCallback<((message: string) => void) | undefined> | undefined;
+    onMessage?: NitroViewWrappedCallback<((message: string) => void) | undefined> | undefined;
+    onLoadEnd?: NitroViewWrappedCallback<(() => void) | undefined> | undefined;
+    onError?: NitroViewWrappedCallback<((message: string) => void) | undefined> | undefined;
 } & Readonly<Omit<Readonly<{
     onAccessibilityAction?: ((event: import("react-native").AccessibilityActionEvent) => unknown) | undefined;
     onAccessibilityTap?: (() => unknown) | undefined;

package/lib/typescript/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAG3D,OAAO,KAAK,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAGnF,YAAY,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACnF,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAE3C,QAAA,MAAM,sBAAsB,8FAG3B,CAAC;AAKF,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,sBAAsB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAEpF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAGL,KAAK,wBAAwB,EAC9B,MAAM,4BAA4B,CAAC;AAEpC,OAAO,KAAK,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAGnF,YAAY,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACnF,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAO3C,KAAK,oBAAoB,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,IACxD,CAAC,GACD,wBAAwB,CAAC,CAAC,CAAC,CAAC;AAEhC,KAAK,qBAAqB,GAAG,IAAI,CAC/B,iBAAiB,EACjB,WAAW,GAAG,WAAW,GAAG,SAAS,CACtC,GACC,SAAS,GAAG;IACV,SAAS,CAAC,EAAE,oBAAoB,CAAC,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC,CAAC;IACrD,SAAS,CAAC,EAAE,oBAAoB,CAAC,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC,CAAC;IAC5D,SAAS,CAAC,EAAE,oBAAoB,CAAC,MAAM,IAAI,CAAC,CAAC;IAC7C,OAAO,CAAC,EAAE,oBAAoB,CAAC,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC,CAAC;CAC3D,CAAC;AAcJ,wBAAgB,gBAAgB,CAAC,EAC/B,YAAY,EACZ,SAAS,EACT,SAAS,EACT,SAAS,EACT,OAAO,EACP,GAAG,KAAK,EACT,EAAE,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDvB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onekeyfe/react-native-chart-webview",
-  "version": "3.0.52",
+  "version": "3.0.54",
   "description": "react-native-chart-webview",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/index.tsx

@@ -1,5 +1,10 @@
-import { createElement, type ComponentProps } from 'react';
-import { getHostComponent } from 'react-native-nitro-modules';
+import { createElement, useCallback, useMemo, useRef } from 'react';
+import { type ViewProps } from 'react-native';
+import {
+  callback,
+  getHostComponent,
+  type NitroViewWrappedCallback,
+} from 'react-native-nitro-modules';
 const ChartWebviewConfig = require('../nitrogen/generated/shared/json/ChartWebviewConfig.json');
 import type { ChartWebviewMethods, ChartWebviewProps } from './ChartWebview.nitro';
 import { CHART_BRIDGE_JS } from './bridge';
@@ -12,9 +17,91 @@ const NativeChartWebviewView = getHostComponent<ChartWebviewProps, ChartWebviewM
   () => ChartWebviewConfig
 );
 
+type MaybeWrappedCallback<T extends (...args: any[]) => void> =
+  | T
+  | NitroViewWrappedCallback<T>;
+
+type ChartWebviewViewProps = Omit<
+  ChartWebviewProps,
+  'onMessage' | 'onLoadEnd' | 'onError'
+> &
+  ViewProps & {
+    hybridRef?: MaybeWrappedCallback<(ref: any) => void>;
+    onMessage?: MaybeWrappedCallback<(message: string) => void>;
+    onLoadEnd?: MaybeWrappedCallback<() => void>;
+    onError?: MaybeWrappedCallback<(message: string) => void>;
+  };
+
+function unwrapCallback<T extends (...args: any[]) => void>(
+  wrapped: MaybeWrappedCallback<T> | undefined
+): T | undefined {
+  if (typeof wrapped === 'function') {
+    return wrapped;
+  }
+  return wrapped?.f;
+}
+
 // Default the document-start bridge script so consumers never have to know about
 // it (and it's never absent — an optional string flipping to null is rejected by
 // the native binding). Callers can still override `bridgeScript` to customize.
-export function ChartWebviewView(props: ComponentProps<typeof NativeChartWebviewView>) {
-  return createElement(NativeChartWebviewView, { bridgeScript: CHART_BRIDGE_JS, ...props });
+export function ChartWebviewView({
+  bridgeScript,
+  hybridRef,
+  onMessage,
+  onLoadEnd,
+  onError,
+  ...props
+}: ChartWebviewViewProps) {
+  const hybridRefRef = useRef(unwrapCallback(hybridRef));
+  hybridRefRef.current = unwrapCallback(hybridRef);
+  const onMessageRef = useRef(unwrapCallback(onMessage));
+  onMessageRef.current = unwrapCallback(onMessage);
+  const onLoadEndRef = useRef(unwrapCallback(onLoadEnd));
+  onLoadEndRef.current = unwrapCallback(onLoadEnd);
+  const onErrorRef = useRef(unwrapCallback(onError));
+  onErrorRef.current = unwrapCallback(onError);
+
+  const stableHybridRef = useCallback((ref: any) => {
+    hybridRefRef.current?.(ref);
+  }, []);
+  const stableOnMessage = useCallback((message: string) => {
+    onMessageRef.current?.(message);
+  }, []);
+  const stableOnLoadEnd = useCallback(() => {
+    onLoadEndRef.current?.();
+  }, []);
+  const stableOnError = useCallback((message: string) => {
+    onErrorRef.current?.(message);
+  }, []);
+
+  const hasHybridRef = hybridRefRef.current != null;
+  const hasOnMessage = onMessageRef.current != null;
+  const hasOnLoadEnd = onLoadEndRef.current != null;
+  const hasOnError = onErrorRef.current != null;
+
+  const hybridRefProp = useMemo(
+    () => (hasHybridRef ? callback(stableHybridRef) : undefined),
+    [hasHybridRef, stableHybridRef]
+  );
+  const onMessageProp = useMemo(
+    () => (hasOnMessage ? callback(stableOnMessage) : undefined),
+    [hasOnMessage, stableOnMessage]
+  );
+  const onLoadEndProp = useMemo(
+    () => (hasOnLoadEnd ? callback(stableOnLoadEnd) : undefined),
+    [hasOnLoadEnd, stableOnLoadEnd]
+  );
+  const onErrorProp = useMemo(
+    () => (hasOnError ? callback(stableOnError) : undefined),
+    [hasOnError, stableOnError]
+  );
+
+  return createElement(NativeChartWebviewView, {
+    ...props,
+    hybridRef: hybridRefProp,
+    onMessage: onMessageProp,
+    onLoadEnd: onLoadEndProp,
+    onError: onErrorProp,
+    bridgeScript: bridgeScript ?? CHART_BRIDGE_JS,
+  });
 }