use adopt to register and unregister families

Author: intergalacticspacehighway

packages/react-native/ReactCommon/react/renderer/core/ComponentDescriptor.cpp

@@ -16,7 +16,15 @@ ComponentDescriptor::ComponentDescriptor(
     : eventDispatcher_(parameters.eventDispatcher),
       contextContainer_(parameters.contextContainer),
       flavor_(parameters.flavor),
-      rawPropsParser_(std::move(rawPropsParser)) {}
+      rawPropsParser_(std::move(rawPropsParser)) {
+  if (contextContainer_) {
+    auto reg = contextContainer_->find<std::shared_ptr<MediaQueryRegistry>>(
+        "MediaQueryRegistry");
+    if (reg.has_value()) {
+      mediaQueryRegistry_ = reg.value();
+    }
+  }
+}
 
 const std::shared_ptr<const ContextContainer>&
 ComponentDescriptor::getContextContainer() const {

packages/react-native/ReactCommon/react/renderer/core/ComponentDescriptor.h

@@ -9,6 +9,7 @@
 
 #include <react/renderer/core/EventDispatcher.h>
 #include <react/renderer/core/InstanceHandle.h>
+#include <react/renderer/core/MediaQueryRegistry.h>
 #include <react/renderer/core/Props.h>
 #include <react/renderer/core/PropsParserContext.h>
 #include <react/renderer/core/RawPropsParser.h>
@@ -127,6 +128,7 @@ class ComponentDescriptor {
 
   EventDispatcher::Weak eventDispatcher_;
   std::shared_ptr<const ContextContainer> contextContainer_;
+  std::shared_ptr<MediaQueryRegistry> mediaQueryRegistry_;
   Flavor flavor_;
   RawPropsParser rawPropsParser_;
 

packages/react-native/ReactCommon/react/renderer/core/ConcreteComponentDescriptor.h

@@ -189,8 +189,19 @@ class ConcreteComponentDescriptor : public ComponentDescriptor {
  protected:
   virtual void adopt(ShadowNode &shadowNode) const override
   {
-    // Default implementation does nothing.
     react_native_assert(shadowNode.getComponentHandle() == getComponentHandle());
+
+    // Register/unregister MQ families so the MediaQueryCommitHook knows
+    // which nodes to process without tree walks.
+    if (mediaQueryRegistry_) {
+      if (shadowNode.getProps()->hasMediaQueries()) {
+        mediaQueryRegistry_->registerFamily(
+            shadowNode.getSurfaceId(), shadowNode.getFamilyShared());
+      } else {
+        mediaQueryRegistry_->unregisterFamily(
+            shadowNode.getSurfaceId(), shadowNode.getFamilyShared());
+      }
+    }
   }
 };
 

packages/react-native/ReactCommon/react/renderer/core/MediaQuery.h

@@ -18,13 +18,11 @@ enum class MediaFeature : uint8_t {
   MaxWidth,
   MinHeight,
   MaxHeight,
-  PrefersColorScheme,
 };
 
 struct MediaCondition {
   MediaFeature feature{};
   Float dimensionValue{0};
-  ColorScheme colorSchemeValue{ColorScheme::Light};
 
   bool evaluate(const MediaQueryEnvironment& env) const {
     switch (feature) {
@@ -36,8 +34,6 @@ struct MediaCondition {
         return env.viewportHeight >= dimensionValue;
       case MediaFeature::MaxHeight:
         return env.viewportHeight <= dimensionValue;
-      case MediaFeature::PrefersColorScheme:
-        return env.colorScheme == colorSchemeValue;
     }
     return false;
   }

packages/react-native/ReactCommon/react/renderer/core/MediaQueryEnvironment.h

@@ -11,22 +11,13 @@
 
 namespace facebook::react {
 
-enum class ColorScheme : uint8_t {
-  Light = 0,
-  Dark = 1,
-};
-
 /**
  * Captures the current environment state used to evaluate CSS media queries.
  * Viewport dimensions are in React Native points (logical pixels).
  */
 struct MediaQueryEnvironment {
   Float viewportWidth{0};
   Float viewportHeight{0};
-  ColorScheme colorScheme{ColorScheme::Light};
-
-  bool operator==(const MediaQueryEnvironment& other) const = default;
-  bool operator!=(const MediaQueryEnvironment& other) const = default;
 };
 
 } // namespace facebook::react

packages/react-native/ReactCommon/react/renderer/core/MediaQueryRegistry.cpp

@@ -0,0 +1,44 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#include "MediaQueryRegistry.h"
+
+namespace facebook::react {
+
+void MediaQueryRegistry::registerFamily(
+    SurfaceId surfaceId,
+    const std::shared_ptr<const ShadowNodeFamily>& family) {
+  std::lock_guard lock(mutex_);
+  families_[surfaceId].insert(family);
+}
+
+void MediaQueryRegistry::unregisterFamily(
+    SurfaceId surfaceId,
+    const std::shared_ptr<const ShadowNodeFamily>& family) {
+  std::lock_guard lock(mutex_);
+  auto it = families_.find(surfaceId);
+  if (it != families_.end()) {
+    it->second.erase(family);
+  }
+}
+
+std::unordered_set<std::shared_ptr<const ShadowNodeFamily>>
+MediaQueryRegistry::getFamilies(SurfaceId surfaceId) const {
+  std::lock_guard lock(mutex_);
+  auto it = families_.find(surfaceId);
+  if (it != families_.end()) {
+    return it->second;
+  }
+  return {};
+}
+
+void MediaQueryRegistry::clearSurface(SurfaceId surfaceId) {
+  std::lock_guard lock(mutex_);
+  families_.erase(surfaceId);
+}
+
+} // namespace facebook::react

packages/react-native/ReactCommon/react/renderer/core/MediaQueryRegistry.h

@@ -0,0 +1,47 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#pragma once
+
+#include <mutex>
+#include <unordered_map>
+#include <unordered_set>
+
+#include <react/renderer/core/ReactPrimitives.h>
+#include <react/renderer/core/ShadowNodeFamily.h>
+
+namespace facebook::react {
+
+/**
+ * Stores which ShadowNodeFamilies have media queries for each surface.
+ * Populated by ConcreteComponentDescriptor::adopt(), read by
+ * MediaQueryCommitHook.
+ */
+class MediaQueryRegistry {
+ public:
+  void registerFamily(
+      SurfaceId surfaceId,
+      const std::shared_ptr<const ShadowNodeFamily>& family);
+
+  void unregisterFamily(
+      SurfaceId surfaceId,
+      const std::shared_ptr<const ShadowNodeFamily>& family);
+
+  std::unordered_set<std::shared_ptr<const ShadowNodeFamily>> getFamilies(
+      SurfaceId surfaceId) const;
+
+  void clearSurface(SurfaceId surfaceId);
+
+ private:
+  mutable std::mutex mutex_;
+  std::unordered_map<
+      SurfaceId,
+      std::unordered_set<std::shared_ptr<const ShadowNodeFamily>>>
+      families_;
+};
+
+} // namespace facebook::react

packages/react-native/ReactCommon/react/renderer/css/CSSMediaQuery.h

@@ -44,9 +44,6 @@ inline std::optional<MediaFeature> parseFeatureName(std::string_view name) {
   if (caseInsensitiveEqual(name, "max-height")) {
     return MediaFeature::MaxHeight;
   }
-  if (caseInsensitiveEqual(name, "prefers-color-scheme")) {
-    return MediaFeature::PrefersColorScheme;
-  }
   return std::nullopt;
 }
 
@@ -88,24 +85,11 @@ inline std::optional<MediaCondition> parseSingleCondition(
   MediaCondition condition{};
   condition.feature = feature.value();
 
-  if (feature.value() != MediaFeature::PrefersColorScheme) {
-    if (token.type() != CSSTokenType::Number &&
-        token.type() != CSSTokenType::Dimension) {
-      return std::nullopt;
-    }
-    condition.dimensionValue = static_cast<Float>(token.numericValue());
-  } else {
-    if (token.type() != CSSTokenType::Ident) {
-      return std::nullopt;
-    }
-    if (caseInsensitiveEqual(token.stringValue(), "dark")) {
-      condition.colorSchemeValue = ColorScheme::Dark;
-    } else if (caseInsensitiveEqual(token.stringValue(), "light")) {
-      condition.colorSchemeValue = ColorScheme::Light;
-    } else {
-      return std::nullopt;
-    }
+  if (token.type() != CSSTokenType::Number &&
+      token.type() != CSSTokenType::Dimension) {
+    return std::nullopt;
   }
+  condition.dimensionValue = static_cast<Float>(token.numericValue());
 
   token = nextNonWhitespace(tokenizer);
   if (token.type() != CSSTokenType::CloseParen) {
@@ -123,7 +107,8 @@ inline std::optional<MediaCondition> parseSingleCondition(
  * Supports:
  *   (min-width: 768)
  *   (max-width: 1024px)
- *   (prefers-color-scheme: dark)
+ *   (min-height: 500)
+ *   (max-height: 800)
  *   Compound: (min-width: 768) and (max-width: 1024)
  */
 inline std::optional<MediaQuery> parseMediaQuery(std::string_view css) {

packages/react-native/ReactCommon/react/renderer/scheduler/MediaQueryCommitHook.cpp

@@ -11,94 +11,58 @@
 
 namespace facebook::react {
 
-MediaQueryCommitHook::MediaQueryCommitHook(UIManager& uiManager)
-    : uiManager_(uiManager) {
+MediaQueryCommitHook::MediaQueryCommitHook(
+    UIManager& uiManager,
+    std::shared_ptr<MediaQueryRegistry> registry)
+    : registry_(std::move(registry)), uiManager_(uiManager) {
   uiManager.registerCommitHook(*this);
 }
 
-void MediaQueryCommitHook::setColorScheme(ColorScheme scheme) {
-  {
-    std::lock_guard lock(mutex_);
-    if (colorScheme_ == scheme) {
-      return;
-    }
-    colorScheme_ = scheme;
-  }
-
-  const auto& registry = uiManager_.getShadowTreeRegistry();
-  registry.enumerate(
-      [](const ShadowTree& shadowTree, bool& /*stop*/) {
-        shadowTree.commit(
-            [](const RootShadowNode& oldRoot) {
-              return std::make_shared<RootShadowNode>(
-                  oldRoot, ShadowNodeFragment{});
-            },
-            {.enableStateReconciliation = false});
-      });
-}
-
 MediaQueryEnvironment MediaQueryCommitHook::buildEnvironment(
     const RootShadowNode& rootNode) const {
   const auto& rootProps =
       static_cast<const RootProps&>(*rootNode.getProps());
-
-  std::lock_guard lock(mutex_);
   return MediaQueryEnvironment{
       .viewportWidth = rootProps.layoutConstraints.maximumSize.width,
       .viewportHeight = rootProps.layoutConstraints.maximumSize.height,
-      .colorScheme = colorScheme_,
   };
 }
 
-void MediaQueryCommitHook::discoverFamilies(
-    SurfaceId surfaceId,
-    const ShadowNode& node,
-    std::unordered_set<std::shared_ptr<const ShadowNodeFamily>>& families)
-    const {
-  if (node.getProps()->hasMediaQueries()) {
-    families.insert(node.getFamilyShared());
-  }
-  for (const auto& child : node.getChildren()) {
-    discoverFamilies(surfaceId, *child, families);
-  }
-}
-
 RootShadowNode::Unshared MediaQueryCommitHook::shadowTreeWillCommit(
     const ShadowTree& shadowTree,
-    const RootShadowNode::Shared& /*oldRootShadowNode*/,
+    const RootShadowNode::Shared& oldRootShadowNode,
     const RootShadowNode::Unshared& newRootShadowNode,
     const ShadowTreeCommitOptions& commitOptions) noexcept {
   auto surfaceId = shadowTree.getSurfaceId();
-  auto env = buildEnvironment(*newRootShadowNode);
 
-  // On React commits, re-discover MQ families (nodes may have been
-  // added, removed, or changed styles).
-  if (commitOptions.source == ShadowTreeCommitSource::React) {
-    std::unordered_set<std::shared_ptr<const ShadowNodeFamily>> families;
-    discoverFamilies(surfaceId, *newRootShadowNode, families);
-
-    std::lock_guard lock(mutex_);
-    if (families.empty()) {
-      cachedFamilies_.erase(surfaceId);
-    } else {
-      cachedFamilies_[surfaceId] = std::move(families);
-    }
+  auto families = registry_->getFamilies(surfaceId);
+  if (families.empty()) {
+    return newRootShadowNode;
+  }
+
+  // Check if viewport changed by comparing old vs new root.
+  auto env = buildEnvironment(*newRootShadowNode);
+  bool viewportChanged = false;
+  if (oldRootShadowNode) {
+    auto oldEnv = buildEnvironment(*oldRootShadowNode);
+    viewportChanged = (oldEnv.viewportWidth != env.viewportWidth ||
+                       oldEnv.viewportHeight != env.viewportHeight);
   }
 
-  // Get the cached families for this surface.
-  std::unordered_set<std::shared_ptr<const ShadowNodeFamily>> liveFamilies;
-  {
-    std::lock_guard lock(mutex_);
-    auto it = cachedFamilies_.find(surfaceId);
-    if (it == cachedFamilies_.end() || it->second.empty()) {
-      return newRootShadowNode;
-    }
-    liveFamilies = it->second;
+  bool isReactCommit =
+      commitOptions.source == ShadowTreeCommitSource::React;
+
+  // Only run when something MQ-relevant happened:
+  // - Viewport changed (rotation/resize)
+  // - React commit (new/changed MQ nodes possible)
+  // Skip scroll, animation, non-React state updates.
+  if (!viewportChanged && !isReactCommit) {
+    return newRootShadowNode;
   }
 
   auto clonedRoot = std::static_pointer_cast<RootShadowNode>(
       newRootShadowNode->cloneMultiple(
-          liveFamilies,
+          families,
           [&env](
               const ShadowNode& shadowNode,
               const ShadowNodeFragment& fragment) {
@@ -112,8 +76,6 @@ RootShadowNode::Unshared MediaQueryCommitHook::shadowTreeWillCommit(
 
             const auto& mqData = props->mediaQueryData_.value();
 
-            // Start with base values for all MQ-touched keys,
-            // then layer matching query overrides on top.
             folly::dynamic resolved(mqData.baseStyles);
             for (const auto& entry : mqData.queries) {
               if (entry.condition.evaluate(env)) {