fix: perform operations inside shadowTreeWillCommit hook

Author: kirillzyusko

common/cpp/react/renderer/components/TeleportViewSpec/PortalShadowRegistry.cpp

@@ -2,28 +2,51 @@
 
 #include <string>
 
-namespace facebook::react {
+namespace facebook::react
+{
 
   void PortalShadowRegistry::registerHost(
       const std::string &name,
-      const LayoutableShadowNode *host) {
+      const LayoutableShadowNode *host)
+  {
     std::lock_guard<std::mutex> lock(mutex_);
     hosts_[name] = host;
   }
 
-  void PortalShadowRegistry::unregisterHost(const std::string &name) {
+  void PortalShadowRegistry::unregisterHost(const std::string &name)
+  {
     std::lock_guard<std::mutex> lock(mutex_);
     hosts_.erase(name);
   }
 
   const LayoutableShadowNode *PortalShadowRegistry::getHost(
-      const std::string &name) const {
+      const std::string &name) const
+  {
     std::lock_guard<std::mutex> lock(mutex_);
     auto it = hosts_.find(name);
-    if (it != hosts_.end()) {
+    if (it != hosts_.end())
+    {
       return it->second;
     }
     return nullptr;
   }
 
+  void PortalShadowRegistry::registerPortal(const ShadowNodeFamily *family)
+  {
+    std::lock_guard<std::mutex> lock(mutex_);
+    portalFamilies_.insert(family);
+  }
+
+  void PortalShadowRegistry::unregisterPortal(const ShadowNodeFamily *family)
+  {
+    std::lock_guard<std::mutex> lock(mutex_);
+    portalFamilies_.erase(family);
+  }
+
+  std::unordered_set<const ShadowNodeFamily*> PortalShadowRegistry::getPortalFamilies() const
+  {
+    std::lock_guard<std::mutex> lock(mutex_);
+    return portalFamilies_;
+  }
+
 } // namespace facebook::react

common/cpp/react/renderer/components/TeleportViewSpec/PortalShadowRegistry.h

@@ -4,14 +4,18 @@
 
 #include <string>
 #include <unordered_map>
+#include <unordered_set>
 #include <mutex>
 #include <memory>
 
-namespace facebook::react {
+namespace facebook::react
+{
 
-  class PortalShadowRegistry {
-   public:
-    static PortalShadowRegistry &getInstance() {
+  class PortalShadowRegistry
+  {
+  public:
+    static PortalShadowRegistry &getInstance()
+    {
       static PortalShadowRegistry instance;
       return instance;
     }
@@ -20,10 +24,16 @@ namespace facebook::react {
     void unregisterHost(const std::string &name);
     const LayoutableShadowNode *getHost(const std::string &name) const;
 
-   private:
+    // Portal node registration (using ShadowNodeFamily for stable identity)
+    void registerPortal(const ShadowNodeFamily *family);
+    void unregisterPortal(const ShadowNodeFamily *family);
+    std::unordered_set<const ShadowNodeFamily *> getPortalFamilies() const;
+
+  private:
     PortalShadowRegistry() = default;
     mutable std::mutex mutex_;
     std::unordered_map<std::string, const LayoutableShadowNode *> hosts_;
+    std::unordered_set<const ShadowNodeFamily *> portalFamilies_;
   };
 
 } // namespace facebook::react

common/cpp/react/renderer/components/TeleportViewSpec/RNTPortalViewComponentDescriptor.h

@@ -8,37 +8,34 @@
 #include <react/renderer/core/ConcreteComponentDescriptor.h>
 #include <react/renderer/components/view/YogaLayoutableShadowNode.h>
 
-namespace facebook::react {
+namespace facebook::react
+{
 
   class PortalViewComponentDescriptor final
-      : public ConcreteComponentDescriptor<PortalViewShadowNode> {
-   public:
+      : public ConcreteComponentDescriptor<PortalViewShadowNode>
+  {
+  public:
     using ConcreteComponentDescriptor::ConcreteComponentDescriptor;
 
-    void adopt(ShadowNode &shadowNode) const override {
+    void adopt(ShadowNode &shadowNode) const override
+    {
       react_native_assert(dynamic_cast<PortalViewShadowNode *>(&shadowNode));
 
       auto &portalViewShadowNode = static_cast<PortalViewShadowNode &>(shadowNode);
       auto &props = static_cast<const PortalViewProps &>(*portalViewShadowNode.getProps());
 
-      // If this portal is teleported to a host, apply the host's layout constraints
-      if (!props.hostName.empty()) {
-        const LayoutableShadowNode *host =
-            PortalShadowRegistry::getInstance().getHost(props.hostName);
-
-        if (host) {
-          auto &yogaPortal = static_cast<YogaLayoutableShadowNode &>(portalViewShadowNode);
-
-          // Set position to absolute because:
-          // - when the view is teleported, we need to "free" its original space
-          // - we need to stretch the view beyond the parent layout constraints
-          yogaPortal.setPositionType(YGPositionTypeAbsolute);
-
-          auto hostLayoutMetrics = host->getLayoutMetrics();
-
-          // Update view dimensions
-          portalViewShadowNode.setDimensionsFromHost(hostLayoutMetrics.frame.size);
-        }
+      // Register this portal in the registry if it has a hostName
+      // The actual size/position adjustments will be applied in the commit hook
+      if (!props.hostName.empty())
+      {
+        PortalShadowRegistry::getInstance().registerPortal(
+            &portalViewShadowNode.getFamily());
+      }
+      else
+      {
+        // Unregister if hostName is empty (portal is not teleported)
+        PortalShadowRegistry::getInstance().unregisterPortal(
+            &portalViewShadowNode.getFamily());
       }
 
       ConcreteComponentDescriptor::adopt(shadowNode);

common/cpp/react/renderer/components/TeleportViewSpec/TeleportCommitHook.cpp

@@ -0,0 +1,92 @@
+//
+//  TeleportCommitHook.cpp
+//  Pods
+//
+//  Created by Kiryl Ziusko on 07/10/2025.
+//
+
+#include "TeleportCommitHook.h"
+#include "RNTPortalViewShadowNode.h"
+#include <react/renderer/components/view/YogaLayoutableShadowNode.h>
+
+using namespace facebook::react;
+
+namespace teleport
+{
+
+  TeleportCommitHook::TeleportCommitHook(const std::shared_ptr<UIManager> &uiManager) : uiManager_(uiManager)
+  {
+    uiManager_->registerCommitHook(*this);
+  }
+
+  TeleportCommitHook::~TeleportCommitHook() noexcept
+  {
+    uiManager_->unregisterCommitHook(*this);
+  }
+
+  RootShadowNode::Unshared TeleportCommitHook::shadowTreeWillCommit(
+      ShadowTree const &,
+      RootShadowNode::Shared const &oldRootShadowNode,
+      RootShadowNode::Unshared const &newRootShadowNode) noexcept
+  {
+    // Start with the new root
+    auto rootNode = newRootShadowNode;
+
+    // Get all registered portal families
+    auto portalFamilies = PortalShadowRegistry::getInstance().getPortalFamilies();
+
+    // Iterate over each portal that needs size/position adjustment
+    for (const auto family : portalFamilies)
+    {
+      auto newRoot = rootNode->cloneTree(
+          *family,
+          [](ShadowNode const &oldShadowNode)
+          {
+            // Clone the node
+            auto clone = oldShadowNode.clone({});
+
+            // Cast to PortalViewShadowNode to access props
+            auto portalNode = std::dynamic_pointer_cast<PortalViewShadowNode>(clone);
+            if (portalNode)
+            {
+              auto &props = static_cast<const PortalViewProps &>(*portalNode->getProps());
+
+              // If this portal has a hostName, apply size and position
+              if (!props.hostName.empty())
+              {
+                auto host = PortalShadowRegistry::getInstance().getHost(props.hostName);
+
+                if (host)
+                {
+                  auto hostLayoutMetrics = host->getLayoutMetrics();
+                  auto hostSize = hostLayoutMetrics.frame.size;
+
+                  // Only apply if host has valid (non-zero) size
+                  if (hostSize.width > 0 && hostSize.height > 0)
+                  {
+                    auto layoutableNode = std::dynamic_pointer_cast<YogaLayoutableShadowNode>(clone);
+                    if (layoutableNode)
+                    {
+                      // Set position to absolute to free the original space
+                      layoutableNode->setPositionType(YGPositionTypeAbsolute);
+                      // Set size to match the host
+                      layoutableNode->setSize(hostSize);
+                    }
+                  }
+                }
+              }
+            }
+
+            return clone;
+          });
+
+      if (newRoot)
+      {
+        rootNode = std::static_pointer_cast<RootShadowNode>(newRoot);
+      }
+    }
+
+    return std::const_pointer_cast<RootShadowNode>(rootNode);
+  }
+
+}

common/cpp/react/renderer/components/TeleportViewSpec/TeleportCommitHook.h

@@ -0,0 +1,38 @@
+//
+//  TeleportCommitHook.h
+//  Pods
+//
+//  Created by Kiryl Ziusko on 07/10/2025.
+//
+
+#pragma once
+
+#include "PortalShadowRegistry.h"
+#include <react/renderer/uimanager/UIManager.h>
+#include <react/renderer/uimanager/UIManagerCommitHook.h>
+
+using namespace facebook::react;
+
+namespace teleport {
+
+class TeleportCommitHook : public UIManagerCommitHook {
+public:
+  TeleportCommitHook(const std::shared_ptr<UIManager> &uiManager);
+
+  ~TeleportCommitHook() noexcept override;
+
+  void commitHookWasRegistered(UIManager const &) noexcept override {}
+
+  void commitHookWasUnregistered(UIManager const &) noexcept override {}
+
+  RootShadowNode::Unshared shadowTreeWillCommit(
+      ShadowTree const &shadowTree,
+      RootShadowNode::Shared const &oldRootShadowNode,
+      RootShadowNode::Unshared const &newRootShadowNode)
+    noexcept override;
+    
+private:
+  std::shared_ptr<UIManager> uiManager_;
+};
+
+}

ios/Teleport.h

@@ -0,0 +1,12 @@
+//
+//  Teleport.h
+//  Pods
+//
+//  Created by Kiryl Ziusko on 07/10/2025.
+//
+
+#import <TeleportViewSpec/TeleportViewSpec.h>
+
+@interface Teleport : NSObject <NativeTeleportSpec>
+
+@end

ios/Teleport.mm

@@ -0,0 +1,41 @@
+//
+//  Teleport.mm
+//  Pods
+//
+//  Created by Kiryl Ziusko on 07/10/2025.
+//
+
+#import "Teleport.h"
+
+#import <React/RCTScheduler.h>
+#import <React/RCTSurfacePresenter.h>
+#import <React/RCTSurfacePresenterStub.h>
+#import <react/renderer/components/TeleportViewSpec/TeleportCommitHook.h>
+
+@implementation Teleport {
+  __weak RCTSurfacePresenter* _surfacePresenter;
+  std::shared_ptr<teleport::TeleportCommitHook> commitHook_;
+}
+
+- (void)install
+{
+ commitHook_ = std::make_shared<teleport::TeleportCommitHook>(_surfacePresenter.scheduler.uiManager);
+}
+
+- (void)setSurfacePresenter:(id<RCTSurfacePresenterStub>)surfacePresenter
+{
+ _surfacePresenter = surfacePresenter;
+}
+
+- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:
+    (const facebook::react::ObjCTurboModule::InitParams &)params
+{
+    return std::make_shared<facebook::react::NativeTeleportSpecJSI>(params);
+}
+
++ (NSString *)moduleName
+{
+  return @"Teleport";
+}
+
+@end

src/index.ts

@@ -1,3 +1,7 @@
+import TeleportModule from "./specs/NativeTeleport";
+
+TeleportModule?.install();
+
 export { default as PortalHost } from "./components/PortalHost";
 export { default as Portal } from "./components/Portal";
 export { default as PortalProvider } from "./PortalProvider";

src/specs/NativeTeleport.ts

@@ -0,0 +1,9 @@
+import { TurboModuleRegistry } from "react-native";
+
+import type { TurboModule } from "react-native";
+
+export interface Spec extends TurboModule {
+  install(): void;
+}
+
+export default TurboModuleRegistry.get<Spec>("Teleport");