react-native-unistyles 3.5.2 → 3.6.0

package/README.md

@@ -190,6 +190,9 @@ Looking for help or you want to chat with me?
 
 [Join Discord](https://discord.gg/akGHf27P4C)
 
+## Contributing
+The repository uses a git submodule ([unifiber](https://github.com/uni-stack/unifiber)). Clone it with `git clone --recurse-submodules`, or run `git submodule update --init` in an existing clone.
+
 
 ## License
 

package/android/src/main/java/com/unistyles/NativePlatform+android.kt

@@ -3,11 +3,16 @@ package com.unistyles
 import android.os.Build
 import android.content.Context
 import android.content.res.Configuration
+import android.content.res.Resources
+import android.os.Handler
+import android.os.Looper
 import android.util.DisplayMetrics
 import android.view.View
 import android.view.WindowManager
 import androidx.annotation.Keep
+import androidx.core.content.OnConfigurationChangedProvider
 import androidx.core.text.TextUtilsCompat
+import androidx.core.util.Consumer
 import androidx.core.view.ViewCompat
 import androidx.core.view.WindowCompat
 import androidx.core.view.WindowInsetsCompat
@@ -22,6 +27,7 @@ import com.margelo.nitro.unistyles.Insets
 import com.margelo.nitro.unistyles.Orientation
 import com.margelo.nitro.unistyles.UnistyleDependency
 import com.margelo.nitro.unistyles.UnistylesNativeMiniRuntime
+import java.lang.ref.WeakReference
 import java.util.Locale
 
 @Keep
@@ -30,6 +36,14 @@ class NativePlatformAndroid(private val reactContext: ReactApplicationContext):
     private val _insets = NativePlatformInsets(reactContext, this::getMiniRuntime) { this.onConfigChange() }
     private var _miniRuntime: UnistylesNativeMiniRuntime = buildMiniRuntime()
     private val _listener = NativePlatformListener(reactContext, this::getMiniRuntime) { this.diffMiniRuntime() }
+    private var _configurationProvider: WeakReference<OnConfigurationChangedProvider>? = null
+    private val _activityConfigurationListener = Consumer<Configuration> {
+        Handler(Looper.getMainLooper()).post { this.onConfigChange() }
+    }
+
+    // Application resources can lag behind configuration changes
+    private val configurationResources: Resources
+        get() = reactContext.currentActivity?.resources ?: reactContext.resources
 
     init {
         checkEdgeToEdge()
@@ -37,12 +51,16 @@ class NativePlatformAndroid(private val reactContext: ReactApplicationContext):
     }
 
     fun onDestroy() {
+        stopObservingActivityConfiguration()
         _listener.onDestroy()
         _insets.onDestroy()
         reactContext.removeLifecycleEventListener(this)
     }
 
     override fun onHostResume() {
+        observeActivityConfiguration()
+        // catch configuration changes missed while no Activity was attached
+        onConfigChange()
         _insets.getInitialInsets(false)
         _insets.startInsetsListener()
     }
@@ -51,7 +69,26 @@ class NativePlatformAndroid(private val reactContext: ReactApplicationContext):
         _insets.stopInsetsListener()
     }
 
-    override fun onHostDestroy() {}
+    override fun onHostDestroy() {
+        stopObservingActivityConfiguration()
+    }
+
+    private fun observeActivityConfiguration() {
+        val provider = reactContext.currentActivity as? OnConfigurationChangedProvider
+
+        if (_configurationProvider?.get() === provider) {
+            return
+        }
+
+        stopObservingActivityConfiguration()
+        provider?.addOnConfigurationChangedListener(_activityConfigurationListener)
+        _configurationProvider = provider?.let { WeakReference(it) }
+    }
+
+    private fun stopObservingActivityConfiguration() {
+        _configurationProvider?.get()?.removeOnConfigurationChangedListener(_activityConfigurationListener)
+        _configurationProvider = null
+    }
 
     override val memorySize: Long
         get() = 0
@@ -61,7 +98,7 @@ class NativePlatformAndroid(private val reactContext: ReactApplicationContext):
     }
 
     override fun getColorScheme(): ColorScheme {
-        val uiMode = reactContext.resources.configuration.uiMode
+        val uiMode = configurationResources.configuration.uiMode
 
         val colorScheme = when (uiMode.and(Configuration.UI_MODE_NIGHT_MASK)) {
             Configuration.UI_MODE_NIGHT_YES -> ColorScheme.DARK
@@ -73,15 +110,15 @@ class NativePlatformAndroid(private val reactContext: ReactApplicationContext):
     }
 
     override fun getFontScale(): Double {
-        return reactContext.resources.configuration.fontScale.toDouble()
+        return configurationResources.configuration.fontScale.toDouble()
     }
 
     override fun getPixelRatio(): Double {
-        return reactContext.resources.displayMetrics.density.toDouble()
+        return configurationResources.displayMetrics.density.toDouble()
     }
 
     override fun getOrientation(): Orientation {
-        val orientation = when (reactContext.resources.configuration.orientation) {
+        val orientation = when (configurationResources.configuration.orientation) {
             Configuration.ORIENTATION_PORTRAIT -> Orientation.PORTRAIT
             Configuration.ORIENTATION_LANDSCAPE -> Orientation.LANDSCAPE
             else -> Orientation.PORTRAIT
@@ -122,7 +159,7 @@ class NativePlatformAndroid(private val reactContext: ReactApplicationContext):
                 return Dimensions(screenWidth, screenHeight)
             }
             else -> {
-                val displayMetrics = reactContext.resources.displayMetrics
+                val displayMetrics = configurationResources.displayMetrics
 
                 reactContext.currentActivity?.windowManager?.currentWindowMetrics?.bounds?.let {
                     val boundsWidth = (it.width() / displayMetrics.density).toDouble()
@@ -157,7 +194,7 @@ class NativePlatformAndroid(private val reactContext: ReactApplicationContext):
             "com.facebook.react.modules.i18nmanager.I18nUtil",
             Context.MODE_PRIVATE
         )
-        val resourcesLocale = reactContext.resources.configuration.locales[0]
+        val resourcesLocale = configurationResources.configuration.locales[0]
         val hasForcedRtl = sharedPrefs.getBoolean("RCTI18nUtil_forceRTL", false)
         // user preferences
         val isRtl = TextUtilsCompat.getLayoutDirectionFromLocale(Locale.getDefault()) == ViewCompat.LAYOUT_DIRECTION_RTL

package/android/src/main/java/com/unistyles/NativePlatform+insets.kt

@@ -38,7 +38,7 @@ class NativePlatformInsets(
     }
 
     fun getInsets(): Insets {
-        val density = reactContext.resources.displayMetrics.density
+        val density = (reactContext.currentActivity?.resources ?: reactContext.resources).displayMetrics.density
 
         return Insets(
             this._insets.top / density,

package/cxx/converters/BackgroundImageConverter.cpp

@@ -1,17 +1,177 @@
 #include "BackgroundImageConverter.h"
 
 #include <algorithm>
+#include <cxxreact/ReactNativeVersion.h>
+#include <react/featureflags/ReactNativeFeatureFlags.h>
 
-#if defined(RN_SERIALIZABLE_STATE) &&                                          \
-    __has_include(                                                             \
-        <react/renderer/components/view/BackgroundImagePropsConversions.h>)
-#include <react/renderer/components/view/BackgroundImagePropsConversions.h>
-#include <react/renderer/core/propsConversions.h>
+// React Native 0.83 added a C++ CSS parser for background images. Without
+// enableNativeCSSParsing, the native props parser only accepts the processed
+// form (array of gradient objects), so strings are converted here on both
+// platforms.
+#if __has_include(<react/renderer/css/CSSBackgroundImage.h>)
+#include <folly/Conv.h>
+#include <react/renderer/css/CSSBackgroundImage.h>
+#include <react/renderer/css/CSSValueParser.h>
 #define UNISTYLES_HAS_RN_BACKGROUND_IMAGE_PARSER 1
 #endif
 
 namespace margelo::nitro::unistyles::converters {
 
+#ifdef UNISTYLES_HAS_RN_BACKGROUND_IMAGE_PARSER
+namespace {
+
+using namespace facebook::react;
+
+using CSSLengthPercentage = std::variant<CSSLength, CSSPercentage>;
+using CSSGradientItems = std::vector<std::variant<CSSColorStop, CSSColorHint>>;
+
+// same output as React Native's processBackgroundImage.js
+folly::dynamic toPosition(const CSSLengthPercentage &value) {
+  if (std::holds_alternative<CSSLength>(value)) {
+    return std::get<CSSLength>(value).value;
+  }
+
+  return folly::to<std::string>(std::get<CSSPercentage>(value).value) + "%";
+}
+
+// ARGB, same as processColor
+int32_t toColor(const CSSColor &color) {
+  return static_cast<int32_t>((static_cast<uint32_t>(color.a) << 24) |
+                              (static_cast<uint32_t>(color.r) << 16) |
+                              (static_cast<uint32_t>(color.g) << 8) |
+                              static_cast<uint32_t>(color.b));
+}
+
+folly::dynamic toColorStops(const CSSGradientItems &items) {
+  folly::dynamic colorStops = folly::dynamic::array();
+
+  for (const auto &item : items) {
+    if (std::holds_alternative<CSSColorHint>(item)) {
+      colorStops.push_back(folly::dynamic::object("color", nullptr)(
+          "position", toPosition(std::get<CSSColorHint>(item).position)));
+
+      continue;
+    }
+
+    const auto &colorStop = std::get<CSSColorStop>(item);
+    auto color = toColor(colorStop.color);
+
+    colorStops.push_back(folly::dynamic::object("color", color)(
+        "position", colorStop.startPosition.has_value()
+                        ? toPosition(*colorStop.startPosition)
+                        : nullptr));
+
+    if (colorStop.endPosition.has_value()) {
+      colorStops.push_back(folly::dynamic::object("color", color)(
+          "position", toPosition(*colorStop.endPosition)));
+    }
+  }
+
+  return colorStops;
+}
+
+std::string toKeyword(CSSLinearGradientDirectionKeyword keyword) {
+  switch (keyword) {
+  case CSSLinearGradientDirectionKeyword::ToTopLeft:
+    return "to top left";
+  case CSSLinearGradientDirectionKeyword::ToTopRight:
+    return "to top right";
+  case CSSLinearGradientDirectionKeyword::ToBottomLeft:
+    return "to bottom left";
+  case CSSLinearGradientDirectionKeyword::ToBottomRight:
+    return "to bottom right";
+  }
+
+  return "to bottom right";
+}
+
+folly::dynamic toLinearGradient(const CSSLinearGradientFunction &gradient) {
+  folly::dynamic direction =
+      folly::dynamic::object("type", "angle")("value", 180.0);
+
+  if (gradient.direction.has_value()) {
+    const auto &value = gradient.direction->value;
+
+    direction =
+        std::holds_alternative<CSSAngle>(value)
+            ? folly::dynamic::object("type", "angle")(
+                  "value", std::get<CSSAngle>(value).degrees)
+            : folly::dynamic::object("type", "keyword")(
+                  "value",
+                  toKeyword(std::get<CSSLinearGradientDirectionKeyword>(value)));
+  }
+
+  return folly::dynamic::object("type", "linear-gradient")(
+      "direction", std::move(direction))("colorStops",
+                                         toColorStops(gradient.items));
+}
+
+std::string toSizeKeyword(CSSRadialGradientSizeKeyword keyword) {
+  switch (keyword) {
+  case CSSRadialGradientSizeKeyword::ClosestSide:
+    return "closest-side";
+  case CSSRadialGradientSizeKeyword::ClosestCorner:
+    return "closest-corner";
+  case CSSRadialGradientSizeKeyword::FarthestSide:
+    return "farthest-side";
+  case CSSRadialGradientSizeKeyword::FarthestCorner:
+    return "farthest-corner";
+  }
+
+  return "farthest-corner";
+}
+
+folly::dynamic toRadialGradient(const CSSRadialGradientFunction &gradient) {
+  folly::dynamic size = "farthest-corner";
+  folly::dynamic position = folly::dynamic::object("top", "50%")("left", "50%");
+
+  if (gradient.size.has_value()) {
+    const auto &value = *gradient.size;
+
+    if (std::holds_alternative<CSSRadialGradientSizeKeyword>(value)) {
+      size = toSizeKeyword(std::get<CSSRadialGradientSizeKeyword>(value));
+    } else {
+      const auto &explicitSize = std::get<CSSRadialGradientExplicitSize>(value);
+
+      size = folly::dynamic::object("x", toPosition(explicitSize.sizeX))(
+          "y", toPosition(explicitSize.sizeY));
+    }
+  }
+
+  if (gradient.position.has_value()) {
+    const auto &value = *gradient.position;
+
+    position = folly::dynamic::object();
+
+    if (value.top.has_value()) {
+      position["top"] = toPosition(*value.top);
+    }
+
+    if (value.bottom.has_value()) {
+      position["bottom"] = toPosition(*value.bottom);
+    }
+
+    if (value.left.has_value()) {
+      position["left"] = toPosition(*value.left);
+    }
+
+    if (value.right.has_value()) {
+      position["right"] = toPosition(*value.right);
+    }
+  }
+
+  auto isCircle = gradient.shape.has_value() &&
+                  *gradient.shape == CSSRadialGradientShape::Circle;
+
+  return folly::dynamic::object("type", "radial-gradient")(
+      "shape", isCircle ? "circle" : "ellipse")("size", std::move(size))(
+      "position", std::move(position))("colorStops",
+                                       toColorStops(gradient.items));
+}
+
+} // namespace
+#endif
+
 bool isBackgroundImagePropName(const std::string &propertyName) {
   return propertyName == "backgroundImage" ||
          propertyName == "experimental_backgroundImage";
@@ -37,19 +197,46 @@ bool hasSafeBackgroundImageColorStops(const folly::dynamic &backgroundImages) {
 std::optional<folly::dynamic>
 parseBackgroundImageString(const std::string &backgroundImageString) {
 #ifdef UNISTYLES_HAS_RN_BACKGROUND_IMAGE_PARSER
-  std::vector<facebook::react::BackgroundImage> backgroundImages;
+  using namespace facebook::react;
+
+  auto maybeBackgroundImages =
+      parseCSSProperty<CSSBackgroundImageList>(backgroundImageString);
 
-  facebook::react::parseUnprocessedBackgroundImageString(backgroundImageString,
-                                                         backgroundImages);
+  if (!std::holds_alternative<CSSBackgroundImageList>(maybeBackgroundImages)) {
+    return folly::dynamic::array();
+  }
+
+  folly::dynamic backgroundImages = folly::dynamic::array();
 
-  auto parsedBackgroundImages = facebook::react::toDynamic(backgroundImages);
+  for (const auto &backgroundImage :
+       std::get<CSSBackgroundImageList>(maybeBackgroundImages)) {
+    if (std::holds_alternative<CSSLinearGradientFunction>(backgroundImage)) {
+      backgroundImages.push_back(
+          toLinearGradient(std::get<CSSLinearGradientFunction>(backgroundImage)));
+    } else if (std::holds_alternative<CSSRadialGradientFunction>(
+                   backgroundImage)) {
+      backgroundImages.push_back(
+          toRadialGradient(std::get<CSSRadialGradientFunction>(backgroundImage)));
+    }
+  }
 
-  return hasSafeBackgroundImageColorStops(parsedBackgroundImages)
-             ? std::move(parsedBackgroundImages)
+  return hasSafeBackgroundImageColorStops(backgroundImages)
+             ? std::move(backgroundImages)
              : folly::dynamic::array();
 #else
   return std::nullopt;
 #endif
 }
 
+// React Native parses background image strings natively since 0.83, but only
+// with enableNativeCSSParsing. Otherwise its view props expect the processed
+// array and read a string as no background image.
+bool canReactNativeParseBackgroundImageString() {
+#if REACT_NATIVE_VERSION_MAJOR > 0 || REACT_NATIVE_VERSION_MINOR >= 83
+  return facebook::react::ReactNativeFeatureFlags::enableNativeCSSParsing();
+#else
+  return false;
+#endif
+}
+
 } // namespace margelo::nitro::unistyles::converters

package/cxx/converters/BackgroundImageConverter.h

@@ -10,5 +10,6 @@ bool isBackgroundImagePropName(const std::string &propertyName);
 bool hasSafeBackgroundImageColorStops(const folly::dynamic &backgroundImages);
 std::optional<folly::dynamic>
 parseBackgroundImageString(const std::string &backgroundImageString);
+bool canReactNativeParseBackgroundImageString();
 
 } // namespace margelo::nitro::unistyles::converters

package/cxx/core/HostUnistyle.cpp

@@ -19,6 +19,12 @@ std::vector<jsi::PropNameID> HostUnistyle::getPropertyNames(jsi::Runtime& rt) {
 
 HostUnistyle::~HostUnistyle() {
     if (this->_ownsStyleSheet) {
+        for (const auto& [_, unistyle] : this->_stylesheet->unistyles) {
+            if (unistyle->type == UnistyleType::DynamicFunction) {
+                std::static_pointer_cast<UnistyleDynamicFunction>(unistyle)->proxiedFunction.reset();
+            }
+        }
+
         this->_stylesheet->unistyles.clear();
     }
 }

package/cxx/core/UnistylesRegistry.cpp

@@ -407,7 +407,7 @@ core::UnistylesRegistry::OwnedState core::UnistylesRegistry::takeOwnedState() {
     ownedState.styleSheets = std::exchange(this->_styleSheetRegistry, {});
     ownedState.state = std::move(this->_state);
     this->_scopedTheme = std::nullopt;
-    this->_committedTags.clear();
+    this->_committedInstanceHandles.clear();
     _nextStyleSheetTag.store(0);
 
     return ownedState;
@@ -435,10 +435,10 @@ size_t core::UnistylesRegistry::getPendingUpdatesCount() {
     });
 }
 
-void core::UnistylesRegistry::setCommittedTags(std::vector<Tag>&& tags) {
-    this->_committedTags = std::move(tags);
+void core::UnistylesRegistry::setCommittedInstanceHandles(std::vector<InstanceHandle::Shared>&& instanceHandles) {
+    this->_committedInstanceHandles = std::move(instanceHandles);
 }
 
-std::vector<Tag> core::UnistylesRegistry::takeCommittedTags() {
-    return std::exchange(this->_committedTags, {});
+std::vector<InstanceHandle::Shared> core::UnistylesRegistry::takeCommittedInstanceHandles() {
+    return std::exchange(this->_committedInstanceHandles, {});
 }

package/cxx/core/UnistylesRegistry.h

@@ -70,8 +70,8 @@ struct UnistylesRegistry: public StyleSheetRegistry {
     core::Unistyle::Shared getUnistyleById(std::string unistyleID);
     std::vector<LinkedFamilySnapshot> getLinkedFamiliesSnapshot();
     size_t getPendingUpdatesCount();
-    void setCommittedTags(std::vector<Tag>&& tags);
-    std::vector<Tag> takeCommittedTags();
+    void setCommittedInstanceHandles(std::vector<InstanceHandle::Shared>&& instanceHandles);
+    std::vector<InstanceHandle::Shared> takeCommittedInstanceHandles();
 
     // newest installed runtime owns the registry, generation 0 means no owner
     // previous runtime's state is kept aside until it releases ownership, as it may still run JS
@@ -119,7 +119,7 @@ private:
     std::unordered_map<int, std::shared_ptr<core::StyleSheet>> _styleSheetRegistry{};
     std::unordered_map<const ShadowNodeFamily*, LinkedFamily> _shadowRegistry{};
     size_t _sweepThreshold = MIN_SWEEP_THRESHOLD;
-    std::vector<Tag> _committedTags{};
+    std::vector<InstanceHandle::Shared> _committedInstanceHandles{};
 };
 
 inline UnistylesRegistry& UnistylesRegistry::get() {

package/cxx/hybridObjects/HybridShadowRegistry.cpp

@@ -33,8 +33,7 @@ jsi::Value HybridShadowRegistry::link(jsi::Runtime &rt, const jsi::Value &thisVa
             try {
                 auto rawStyle = args[1].asObject(rt).asArray(rt).getValueAtIndex(rt, i);
                 auto rawStyleObj = rawStyle.getObject(rt);
-                auto unistyleHashKeys = core::getUnistylesHashKeys(rt, rawStyleObj);
-                auto secrets = rawStyleObj.getProperty(rt, unistyleHashKeys.at(0).c_str()).asObject(rt);
+                auto secrets = getUnistyleSecrets(rt, rawStyleObj, unistyleWrappers[i]).value();
                 auto secretArguments = secrets.getProperty(rt, helpers::ARGUMENTS.c_str()).asObject(rt).asArray(rt);
 
                 arguments.push_back(helpers::parseDynamicFunctionArguments(rt, secretArguments));
@@ -65,15 +64,14 @@ jsi::Value HybridShadowRegistry::link(jsi::Runtime &rt, const jsi::Value &thisVa
         core::Unistyle::Shared& unistyle = unistyleWrappers[i];
         auto rawStyle = args[1].asObject(rt).asArray(rt).getValueAtIndex(rt, i);
         auto rawStyleObj = rawStyle.getObject(rt);
-        auto unistyleHashKeys = core::getUnistylesHashKeys(rt, rawStyleObj);
+        auto secrets = getUnistyleSecrets(rt, rawStyleObj, unistyle);
         core::Variants variants{};
 
-        if (unistyleHashKeys.size() == 1) {
-            auto secrets = rawStyleObj.getProperty(rt, unistyleHashKeys.at(0).c_str()).asObject(rt);
-            auto hasVariants = secrets.hasProperty(rt, helpers::STYLESHEET_VARIANTS.c_str());
+        if (secrets.has_value()) {
+            auto rawVariants = secrets->getProperty(rt, helpers::STYLESHEET_VARIANTS.c_str());
 
-            if (hasVariants) {
-                variants = helpers::variantsToPairs(rt, secrets.getProperty(rt, helpers::STYLESHEET_VARIANTS.c_str()).asObject(rt));
+            if (rawVariants.isObject()) {
+                variants = helpers::variantsToPairs(rt, rawVariants.asObject(rt));
             }
         }
 
@@ -94,8 +92,18 @@ jsi::Value HybridShadowRegistry::link(jsi::Runtime &rt, const jsi::Value &thisVa
 
         // The shared cache can belong to another view by the time React attaches refs.
         // Restore this view's arguments and variants before saving its native styles.
+        // An object style without variants is the same for every view, so it's reused unless it's stale (dirty).
         if (!unistyleData->parsedStyle.has_value() && unistyle->parsedStyle.has_value()) {
-            parser.rebuildUnistyleWithVariants(rt, unistyleData);
+            auto isSharedStyle = unistyle->type == core::UnistyleType::Object &&
+                unistyle->styleKey != helpers::EXOTIC_STYLE_KEY &&
+                !unistyle->isDirty &&
+                !unistyle->rawValue.hasProperty(rt, "variants");
+
+            if (isSharedStyle) {
+                unistyleData->parsedStyle = jsi::Value(rt, unistyle->parsedStyle.value()).asObject(rt);
+            } else {
+                parser.rebuildUnistyleWithVariants(rt, unistyleData);
+            }
         }
 
         unistylesData.emplace_back(unistyleData);
@@ -131,6 +139,29 @@ jsi::Value HybridShadowRegistry::link(jsi::Runtime &rt, const jsi::Value &thisVa
     return jsi::Value::undefined();
 }
 
+// a style made by Unistyles keeps its secrets (variants, arguments) under the unistyle's id,
+// reading it directly spares enumerating (and converting to strings) every prop of every linked style
+std::optional<jsi::Object> HybridShadowRegistry::getUnistyleSecrets(jsi::Runtime& rt, jsi::Object& style, const core::Unistyle::Shared& unistyle) {
+    // inline and React Native styles have no secrets
+    if (unistyle->styleKey == helpers::EXOTIC_STYLE_KEY) {
+        return std::nullopt;
+    }
+
+    auto secrets = style.getProperty(rt, unistyle->unid.c_str());
+
+    if (secrets.isObject()) {
+        return secrets.asObject(rt);
+    }
+
+    auto unistyleHashKeys = core::getUnistylesHashKeys(rt, style);
+
+    if (unistyleHashKeys.size() != 1) {
+        return std::nullopt;
+    }
+
+    return style.getProperty(rt, unistyleHashKeys.at(0).c_str()).asObject(rt);
+}
+
 void HybridShadowRegistry::scheduleShadowTreeUpdate(jsi::Runtime& rt) {
     if (this->_isShadowTreeUpdateScheduled->exchange(true)) {
         return;
@@ -232,12 +263,20 @@ jsi::Value HybridShadowRegistry::verify(jsi::Runtime &rt, const jsi::Value &this
     return shadow::ShadowTreeDiagnostics::verify(rt, this->_unistylesRuntime);
 }
 
-jsi::Value HybridShadowRegistry::takeCommittedTags(jsi::Runtime &rt, const jsi::Value &thisValue, const jsi::Value *args, size_t count) {
-    auto tags = core::UnistylesRegistry::get().takeCommittedTags();
-    auto result = jsi::Array(rt, tags.size());
+// the fibers React created the committed nodes with (weak, null once collected)
+jsi::Value HybridShadowRegistry::takeCommittedInstanceHandles(jsi::Runtime &rt, const jsi::Value &thisValue, const jsi::Value *args, size_t count) {
+    // runtime was replaced, the handles belong to the next one
+    if (!this->_unistylesRuntime->ownsRegistry()) {
+        return jsi::Array(rt, 0);
+    }
+
+    auto instanceHandles = core::UnistylesRegistry::get().takeCommittedInstanceHandles();
+    auto result = jsi::Array(rt, instanceHandles.size());
+
+    for (size_t i = 0; i < instanceHandles.size(); i++) {
+        auto& instanceHandle = instanceHandles[i];
 
-    for (size_t i = 0; i < tags.size(); i++) {
-        result.setValueAtIndex(rt, i, jsi::Value(static_cast<double>(tags[i])));
+        result.setValueAtIndex(rt, i, instanceHandle ? instanceHandle->getInstanceHandle(rt) : jsi::Value::null());
     }
 
     return result;

package/cxx/hybridObjects/HybridShadowRegistry.h

@@ -44,7 +44,7 @@ struct HybridShadowRegistry: public HybridUnistylesShadowRegistrySpec {
                             const jsi::Value& thisValue,
                             const jsi::Value* args,
                             size_t count);
-    jsi::Value takeCommittedTags(jsi::Runtime& rt,
+    jsi::Value takeCommittedInstanceHandles(jsi::Runtime& rt,
                             const jsi::Value& thisValue,
                             const jsi::Value* args,
                             size_t count);
@@ -64,7 +64,7 @@ struct HybridShadowRegistry: public HybridUnistylesShadowRegistrySpec {
             prototype.registerRawHybridMethod("setScopedTheme", 1, &HybridShadowRegistry::setScopedTheme);
             prototype.registerRawHybridMethod("getScopedTheme", 0, &HybridShadowRegistry::getScopedTheme);
             prototype.registerRawHybridMethod("verify", 0, &HybridShadowRegistry::verify);
-            prototype.registerRawHybridMethod("takeCommittedTags", 0, &HybridShadowRegistry::takeCommittedTags);
+            prototype.registerRawHybridMethod("takeCommittedInstanceHandles", 0, &HybridShadowRegistry::takeCommittedInstanceHandles);
             prototype.registerRawHybridMethod("refreshReactNodes", 1, &HybridShadowRegistry::refreshReactNodes);
         });
     };
@@ -73,6 +73,7 @@ struct HybridShadowRegistry: public HybridUnistylesShadowRegistrySpec {
 
 private:
     void scheduleShadowTreeUpdate(jsi::Runtime& rt);
+    static std::optional<jsi::Object> getUnistyleSecrets(jsi::Runtime& rt, jsi::Object& style, const core::Unistyle::Shared& unistyle);
 
     std::shared_ptr<HybridUnistylesRuntime> _unistylesRuntime;
     std::shared_ptr<std::atomic<bool>> _isShadowTreeUpdateScheduled = std::make_shared<std::atomic<bool>>(false);

package/cxx/hybridObjects/HybridStyleSheet.cpp

@@ -362,14 +362,14 @@ void HybridStyleSheet::applyDependencyChanges(jsi::Runtime& rt, std::vector<Unis
         parser.rebuildShadowLeafUpdates(rt, dependencyMap);
     }
 
-    std::vector<Tag> committedTags;
+    std::vector<InstanceHandle::Shared> committedInstanceHandles;
 
     if (!dependencyMap.empty()) {
-        committedTags = shadow::ShadowTreeManager::updateShadowTree(rt);
+        committedInstanceHandles = shadow::ShadowTreeManager::updateShadowTree(rt);
     }
 
     // after the commit, so listeners can point React at the committed nodes
-    registry.setCommittedTags(std::move(committedTags));
+    registry.setCommittedInstanceHandles(std::move(committedInstanceHandles));
     // also when no StyleSheet depends on the change, hooks (useUnistyles, withUnistyles, Display, Hide) may
     this->notifyJSListeners(dependencies);
 }