fix: mount UIKit hosts through Worklets

Author: DjDeveloperr

packages/react-native/ios/Fabric/NativeScriptUIViewComponentView.mm

@@ -67,6 +67,8 @@ - (void)updateProps:(Props::Shared const&)props oldProps:(Props::Shared const&)o
   const std::string newControllerHandle = newViewProps->controllerHandle;
   const std::string oldDebugName = oldViewProps->debugName;
   const std::string newDebugName = newViewProps->debugName;
+  const std::string oldHostId = oldViewProps->hostId;
+  const std::string newHostId = newViewProps->hostId;
 
   [super updateProps:props oldProps:oldProps];
 
@@ -100,6 +102,12 @@ - (void)updateProps:(Props::Shared const&)props oldProps:(Props::Shared const&)o
             : [NSString stringWithUTF8String:newControllerHandle.c_str()];
     _containerView.controllerHandle = controllerHandle;
   }
+
+  if (oldHostId != newHostId) {
+    NSString* hostId =
+        newHostId.empty() ? nil : [NSString stringWithUTF8String:newHostId.c_str()];
+    _containerView.hostId = hostId;
+  }
 }
 
 - (void)prepareForRecycle {
@@ -110,6 +118,7 @@ - (void)prepareForRecycle {
   _containerView.nativeViewHandle = nil;
   _containerView.childrenViewHandle = nil;
   _containerView.controllerHandle = nil;
+  _containerView.hostId = nil;
 }
 
 + (ComponentDescriptorProvider)componentDescriptorProvider {

packages/react-native/ios/NativeScriptNativeApiModule.mm

@@ -3,11 +3,14 @@
 #import <Foundation/Foundation.h>
 #import <TargetConditionals.h>
 
+#include <mutex>
 #include <utility>
 
 #include "NativeApiJsiReactNative.h"
+#include "NativeScriptUIKitHost.h"
 
 #include <worklets/Compat/Holders.h>
+#include <worklets/WorkletRuntime/WorkletRuntime.h>
 
 namespace {
 
@@ -94,8 +97,108 @@ bool nativeApiInstalled(facebook::jsi::Runtime& runtime) {
   return runtime.global().hasProperty(runtime, "__nativeScriptNativeApi");
 }
 
+std::mutex& nativeScriptWorkletRuntimeMutex() {
+  static std::mutex mutex;
+  return mutex;
+}
+
+std::weak_ptr<worklets::WorkletRuntime>& nativeScriptWorkletRuntime() {
+  static std::weak_ptr<worklets::WorkletRuntime> runtime;
+  return runtime;
+}
+
+void setNativeScriptWorkletRuntime(
+    std::shared_ptr<worklets::WorkletRuntime> runtime) {
+  std::lock_guard<std::mutex> lock(nativeScriptWorkletRuntimeMutex());
+  nativeScriptWorkletRuntime() = std::move(runtime);
+}
+
+std::shared_ptr<worklets::WorkletRuntime> getNativeScriptWorkletRuntime() {
+  std::lock_guard<std::mutex> lock(nativeScriptWorkletRuntimeMutex());
+  return nativeScriptWorkletRuntime().lock();
+}
+
+NSString* stringProperty(facebook::jsi::Runtime& runtime,
+                         facebook::jsi::Object& object, const char* name) {
+  auto value = object.getProperty(runtime, name);
+  if (!value.isString()) {
+    return nil;
+  }
+  std::string text = value.getString(runtime).utf8(runtime);
+  return [NSString stringWithUTF8String:text.c_str()];
+}
+
 }  // namespace
 
+NSDictionary<NSString*, NSString*>* NativeScriptCreateUIKitHost(
+    NSString* hostId) {
+  if (hostId.length == 0 || ![NSThread isMainThread]) {
+    return nil;
+  }
+
+  auto workletRuntime = getNativeScriptWorkletRuntime();
+  if (workletRuntime == nullptr) {
+    return nil;
+  }
+
+  std::string hostIdString =
+      hostId.UTF8String != nullptr ? hostId.UTF8String : "";
+  if (hostIdString.empty()) {
+    return nil;
+  }
+
+  try {
+    return workletRuntime->runSync(
+        [hostIdString = std::move(hostIdString)](
+            facebook::jsi::Runtime& runtime) -> NSDictionary<NSString*, NSString*>* {
+          auto global = runtime.global();
+          auto createValue =
+              global.getProperty(runtime, "__nativeScriptCreateUIKitHostFromNative");
+          if (!createValue.isObject()) {
+            return nil;
+          }
+
+          auto createObject = createValue.asObject(runtime);
+          if (!createObject.isFunction(runtime)) {
+            return nil;
+          }
+
+          auto result = createObject.asFunction(runtime).call(
+              runtime, facebook::jsi::String::createFromUtf8(runtime, hostIdString));
+          if (!result.isObject()) {
+            return nil;
+          }
+
+          auto resultObject = result.asObject(runtime);
+          NSMutableDictionary<NSString*, NSString*>* handles =
+              [NSMutableDictionary dictionaryWithCapacity:3];
+          NSString* nativeViewHandle =
+              stringProperty(runtime, resultObject, "nativeViewHandle");
+          NSString* childrenViewHandle =
+              stringProperty(runtime, resultObject, "childrenViewHandle");
+          NSString* controllerHandle =
+              stringProperty(runtime, resultObject, "controllerHandle");
+
+          if (nativeViewHandle.length > 0) {
+            handles[@"nativeViewHandle"] = nativeViewHandle;
+          }
+          if (childrenViewHandle.length > 0) {
+            handles[@"childrenViewHandle"] = childrenViewHandle;
+          }
+          if (controllerHandle.length > 0) {
+            handles[@"controllerHandle"] = controllerHandle;
+          }
+          return handles;
+        });
+  } catch (const std::exception& error) {
+    NSLog(@"NativeScript failed to create UIKit host %@: %s", hostId,
+          error.what());
+  } catch (...) {
+    NSLog(@"NativeScript failed to create UIKit host %@", hostId);
+  }
+  return nil;
+}
+
 namespace facebook::react {
 
 NativeScriptNativeApiModule::NativeScriptNativeApiModule(
@@ -134,6 +237,8 @@ bool nativeApiInstalled(facebook::jsi::Runtime& runtime) {
     return false;
   }
 
+  setNativeScriptWorkletRuntime(holder->runtime_);
+
   std::string resolvedMetadataPath =
       metadataPath.empty() ? bundledMetadataPath() : metadataPath;
   auto jsInvoker = jsInvoker_;

packages/react-native/ios/NativeScriptUIKitHost.h

@@ -0,0 +1,4 @@
+#import <Foundation/Foundation.h>
+
+FOUNDATION_EXPORT NSDictionary<NSString*, NSString*>*
+NativeScriptCreateUIKitHost(NSString* hostId);

packages/react-native/ios/NativeScriptUIView.h

@@ -2,6 +2,7 @@
 
 @interface NativeScriptUIView : UIView
 
+@property(nonatomic, copy) NSString* hostId;
 @property(nonatomic, copy) NSString* nativeViewHandle;
 @property(nonatomic, copy) NSString* childrenViewHandle;
 @property(nonatomic, copy) NSString* controllerHandle;

packages/react-native/ios/NativeScriptUIView.mm

@@ -1,4 +1,5 @@
 #import "NativeScriptUIView.h"
+#import "NativeScriptUIKitHost.h"
 
 static id NativeScriptNSObjectFromHandle(NSString* handle) {
   if (handle == nil || handle.length == 0) {
@@ -64,10 +65,21 @@ - (void)dealloc {
   [_nativeViewHandle release];
   [_childrenViewHandle release];
   [_controllerHandle release];
+  [_hostId release];
   [_debugName release];
   [super dealloc];
 }
 
+- (void)setHostId:(NSString*)hostId {
+  if ((_hostId == hostId) || [_hostId isEqualToString:hostId]) {
+    return;
+  }
+
+  [_hostId release];
+  _hostId = [hostId copy];
+  [self mountUIKitHostIfNeeded];
+}
+
 - (void)setNativeViewHandle:(NSString*)nativeViewHandle {
   if ((_nativeViewHandle == nativeViewHandle) ||
       [_nativeViewHandle isEqualToString:nativeViewHandle]) {
@@ -123,6 +135,31 @@ - (NSString*)description {
   return [description stringByAppendingFormat:@" debugName = %@", _debugName];
 }
 
+- (void)mountUIKitHostIfNeeded {
+  if (_hostId.length == 0) {
+    return;
+  }
+
+  NSDictionary<NSString*, NSString*>* handles = NativeScriptCreateUIKitHost(_hostId);
+  if (handles == nil) {
+    return;
+  }
+
+  NSString* nativeViewHandle = handles[@"nativeViewHandle"];
+  NSString* childrenViewHandle = handles[@"childrenViewHandle"];
+  NSString* controllerHandle = handles[@"controllerHandle"];
+
+  if (nativeViewHandle.length > 0) {
+    self.nativeViewHandle = nativeViewHandle;
+  }
+  if (childrenViewHandle.length > 0) {
+    self.childrenViewHandle = childrenViewHandle;
+  }
+  if (controllerHandle.length > 0) {
+    self.controllerHandle = controllerHandle;
+  }
+}
+
 - (void)setChildrenView:(UIView*)childrenView {
   if (_childrenView == childrenView) {
     return;
@@ -218,6 +255,7 @@ - (void)insertSubview:(UIView*)view atIndex:(NSInteger)index {
 
 - (void)didMoveToWindow {
   [super didMoveToWindow];
+  [self mountUIKitHostIfNeeded];
   [self attachViewControllerIfPossible];
 }
 

packages/react-native/ios/NativeScriptUIViewManager.mm

@@ -17,5 +17,6 @@ - (UIView*)view {
 RCT_EXPORT_VIEW_PROPERTY(childrenViewHandle, NSString)
 RCT_EXPORT_VIEW_PROPERTY(controllerHandle, NSString)
 RCT_EXPORT_VIEW_PROPERTY(debugName, NSString)
+RCT_EXPORT_VIEW_PROPERTY(hostId, NSString)
 
 @end