iOS: callAsyncJavaScript module method for reply-in-one-hop calls

android/src/newarch/com/reactnativecommunity/webview/RNCWebViewModule.java

@@ -29,6 +29,11 @@ public void shouldStartLoadWithLockIdentifier(boolean shouldStart, double lockId
         mRNCWebViewModuleImpl.shouldStartLoadWithLockIdentifier(shouldStart, lockIdentifier);
     }
 
+    @Override
+    public void callAsyncJavaScript(double viewTag, String functionBody, String argument, final Promise promise) {
+        promise.reject("E_UNSUPPORTED", "callAsyncJavaScript is iOS-only");
+    }
+
     public void startPhotoPickerIntent(ValueCallback<Uri> filePathCallback, String acceptType) {
         mRNCWebViewModuleImpl.startPhotoPickerIntent(acceptType, filePathCallback);
     }

apple/RNCWebView.mm

@@ -67,6 +67,17 @@ + (void)load
   [super load];
 }
 
+- (void)setTag:(NSInteger)tag
+{
+    if (self.tag != 0 && [RNCWebViewImpl implForReactTag:self.tag] == _view) {
+        [RNCWebViewImpl registerImpl:nil forReactTag:self.tag];
+    }
+    [super setTag:tag];
+    if (tag != 0) {
+        [RNCWebViewImpl registerImpl:_view forReactTag:tag];
+    }
+}
+
 - (instancetype)initWithFrame:(CGRect)frame
 {
     if (self = [super initWithFrame:frame]) {

apple/RNCWebViewImpl.h

@@ -165,6 +165,11 @@ shouldStartLoadForRequest:(NSMutableDictionary<NSString *, id> *)request
 + (void)setCustomCertificatesForHost:(nullable NSDictionary *)certificates;
 - (void)postMessage:(NSString *_Nullable)message;
 - (void)injectJavaScript:(NSString *_Nullable)script;
+- (void)callAsyncJavaScript:(NSString *_Nonnull)functionBody
+                   argument:(NSString *_Nullable)argument
+                 completion:(void (^_Nonnull)(id _Nullable result, NSError *_Nullable error))completion;
++ (nullable RNCWebViewImpl *)implForReactTag:(NSInteger)reactTag;
++ (void)registerImpl:(nullable RNCWebViewImpl *)impl forReactTag:(NSInteger)reactTag;
 - (void)goForward;
 - (void)goBack;
 - (void)reload;

apple/RNCWebViewImpl.m

@@ -1930,6 +1930,45 @@ - (void)injectJavaScript:(NSString *)script
   [self evaluateJS: script thenCall: nil];
 }
 
+static NSMapTable<NSNumber *, RNCWebViewImpl *> *RNCWebViewImplRegistry(void)
+{
+  static NSMapTable *registry;
+  static dispatch_once_t onceToken;
+  dispatch_once(&onceToken, ^{
+    registry = [NSMapTable strongToWeakObjectsMapTable];
+  });
+  return registry;
+}
+
++ (RNCWebViewImpl *)implForReactTag:(NSInteger)reactTag
+{
+  return [RNCWebViewImplRegistry() objectForKey:@(reactTag)];
+}
+
++ (void)registerImpl:(RNCWebViewImpl *)impl forReactTag:(NSInteger)reactTag
+{
+  if (impl) {
+    [RNCWebViewImplRegistry() setObject:impl forKey:@(reactTag)];
+  } else {
+    [RNCWebViewImplRegistry() removeObjectForKey:@(reactTag)];
+  }
+}
+
+- (void)callAsyncJavaScript:(NSString *)functionBody
+                   argument:(NSString *)argument
+                 completion:(void (^)(id result, NSError *error))completion
+{
+  if (_webView == nil) {
+    completion(nil, [NSError errorWithDomain:@"RNCWebView" code:1 userInfo:@{NSLocalizedDescriptionKey: @"webview is not mounted"}]);
+    return;
+  }
+  [_webView callAsyncJavaScript:functionBody
+                      arguments:@{@"argument": argument ?: [NSNull null]}
+                        inFrame:nil
+                 inContentWorld:WKContentWorld.pageWorld
+              completionHandler:completion];
+}
+
 - (void)goForward
 {
   [_webView goForward];

apple/RNCWebViewModule.mm

@@ -1,6 +1,7 @@
 #import "RNCWebViewModule.h"
 
 #import "RNCWebViewDecisionManager.h"
+#import "RNCWebViewImpl.h"
 
 #ifdef RCT_NEW_ARCH_ENABLED
 #import <React/RCTFabricComponentsPlugins.h>
@@ -10,6 +11,31 @@ @implementation RNCWebViewModule
 
 RCT_EXPORT_MODULE(RNCWebViewModule)
 
+- (dispatch_queue_t)methodQueue
+{
+  return dispatch_get_main_queue();
+}
+
+RCT_EXPORT_METHOD(callAsyncJavaScript:(double)viewTag
+                  functionBody:(NSString *)functionBody
+                  argument:(NSString *)argument
+                  resolve:(RCTPromiseResolveBlock)resolve
+                  reject:(RCTPromiseRejectBlock)reject)
+{
+  RNCWebViewImpl *impl = [RNCWebViewImpl implForReactTag:(NSInteger)viewTag];
+  if (impl == nil) {
+    reject(@"E_NO_WEBVIEW", [NSString stringWithFormat:@"no webview with tag %d", (int)viewTag], nil);
+    return;
+  }
+  [impl callAsyncJavaScript:functionBody argument:argument completion:^(id result, NSError *error) {
+    if (error != nil) {
+      reject(@"E_JS", error.localizedDescription, error);
+      return;
+    }
+    resolve([result isKindOfClass:[NSString class]] ? result : [NSNull null]);
+  }];
+}
+
 RCT_EXPORT_METHOD(isFileUploadSupported:(RCTPromiseResolveBlock)resolve reject:(RCTPromiseRejectBlock)reject) {
     if (resolve) {
         resolve(@(YES));

index.d.ts

@@ -32,6 +32,11 @@ declare class WebView<P = {}> extends Component<WebViewProps & P> {
      */
     injectJavaScript: (script: string) => void;
 
+    /**
+     * iOS only. Runs `functionBody` in the page with `argument` in scope and resolves with the string it returns.
+     */
+    callAsyncJavaScript?: (functionBody: string, argument: string) => Promise<string | null>;
+
     /**
      * Focuses on WebView rendered page.
      */

lib/NativeRNCWebViewModule.d.ts

@@ -3,6 +3,7 @@ import { Double } from 'react-native/Libraries/Types/CodegenTypes';
 export interface Spec extends TurboModule {
     isFileUploadSupported(): Promise<boolean>;
     shouldStartLoadWithLockIdentifier(shouldStart: boolean, lockIdentifier: Double): void;
+    callAsyncJavaScript(viewTag: Double, functionBody: string, argument: string): Promise<string | null>;
 }
 declare const _default: Spec;
 export default _default;

src/NativeRNCWebViewModule.ts

@@ -8,6 +8,11 @@ export interface Spec extends TurboModule {
     shouldStart: boolean,
     lockIdentifier: Double
   ): void;
+  callAsyncJavaScript(
+    viewTag: Double,
+    functionBody: string,
+    argument: string
+  ): Promise<string | null>;
 }
 
 export default TurboModuleRegistry.getEnforcing<Spec>('RNCWebViewModule');

src/WebView.ios.tsx

@@ -4,7 +4,13 @@
   useImperativeHandle,
   useRef,
 } from 'react';
-import { Image, View, ImageSourcePropType, HostComponent } from 'react-native';
+import {
+  Image,
+  View,
+  ImageSourcePropType,
+  HostComponent,
+  findNodeHandle,
+} from 'react-native';
 import invariant from 'invariant';
 
 import RNCWebView, { Commands, NativeProps } from './RNCWebViewNativeComponent';
@@ -155,6 +161,13 @@
         injectJavaScript: (data: string) =>
           webViewRef.current &&
           Commands.injectJavaScript(webViewRef.current, data),
+        callAsyncJavaScript: (functionBody: string, argument: string) => {
+          const tag = webViewRef.current && findNodeHandle(webViewRef.current);
+          if (tag == null) {
+            return Promise.reject(new Error('webview is not mounted'));
+          }
+          return RNCWebViewModule.callAsyncJavaScript(tag, functionBody, argument);
+        },
         requestFocus: () =>
           webViewRef.current && Commands.requestFocus(webViewRef.current),
         clearCache: (includeDiskFiles: boolean) =>