react-native-unistyles 3.3.0 → 3.5.0

package/cxx/shadowTree/ShadowTreeDiagnostics.cpp

@@ -0,0 +1,339 @@
+#include "ShadowTreeDiagnostics.h"
+
+#include <array>
+#include <cstdio>
+#include <folly/Conv.h>
+#include <react/renderer/components/image/ImageProps.h>
+// ParagraphProps is platform specific and not exposed by the Android prefab
+#if __has_include(<react/renderer/components/text/BaseParagraphProps.h>)
+#include <react/renderer/components/text/BaseParagraphProps.h>
+#define UNISTYLES_HAS_BASE_PARAGRAPH_PROPS 1
+#else
+#define UNISTYLES_HAS_BASE_PARAGRAPH_PROPS 0
+#endif
+#include <react/renderer/components/text/TextProps.h>
+#include <react/renderer/components/view/BaseViewProps.h>
+#include <react/renderer/uimanager/UIManagerBinding.h>
+#include <string_view>
+#include "Parser.h"
+#include "UnistylesRegistry.h"
+
+using namespace margelo::nitro::unistyles;
+using namespace facebook::react;
+
+namespace {
+
+struct PropDifference {
+    std::string prop;
+    std::string expected;
+    std::string actual;
+};
+
+struct Mismatch {
+    Tag tag;
+    std::string component;
+    std::string styleKey;
+    PropDifference difference;
+};
+
+template <typename P>
+using VerifiedProps = std::vector<std::pair<const char*, std::string (*)(const P&)>>;
+
+// SharedColor::toString exists since React Native 0.83, same format
+std::string serialize(const SharedColor& color) {
+    if (!color) {
+        return "undefined";
+    }
+
+    auto components = colorComponentsFromColor(color);
+    std::array<char, 64> buffer{};
+
+    std::snprintf(
+        buffer.data(),
+        buffer.size(),
+        "rgba(%.0f, %.0f, %.0f, %g)",
+        components.red * 255.f,
+        components.green * 255.f,
+        components.blue * 255.f,
+        components.alpha
+    );
+
+    return buffer.data();
+}
+
+std::string serialize(Float value) {
+    return folly::to<std::string>(value);
+}
+
+std::string serialize(const std::optional<FontWeight>& fontWeight) {
+    return fontWeight ? std::to_string(static_cast<int>(*fontWeight)) : "undefined";
+}
+
+RectangleEdges<SharedColor> borderColors(const BaseViewProps& props) {
+    return props.borderColors.resolve(false, {});
+}
+
+// theme dependent props, add new ones here
+const VerifiedProps<BaseViewProps> viewProps{
+    {"backgroundColor", [](const BaseViewProps& props) { return serialize(props.backgroundColor); }},
+    {"borderLeftColor", [](const BaseViewProps& props) { return serialize(borderColors(props).left); }},
+    {"borderTopColor", [](const BaseViewProps& props) { return serialize(borderColors(props).top); }},
+    {"borderRightColor", [](const BaseViewProps& props) { return serialize(borderColors(props).right); }},
+    {"borderBottomColor", [](const BaseViewProps& props) { return serialize(borderColors(props).bottom); }},
+    {"opacity", [](const BaseViewProps& props) { return serialize(props.opacity); }},
+    {"shadowColor", [](const BaseViewProps& props) { return serialize(props.shadowColor); }},
+};
+
+const VerifiedProps<BaseTextProps> textProps{
+    {"color", [](const BaseTextProps& props) { return serialize(props.textAttributes.foregroundColor); }},
+    {"textBackgroundColor", [](const BaseTextProps& props) { return serialize(props.textAttributes.backgroundColor); }},
+    {"fontSize", [](const BaseTextProps& props) { return serialize(props.textAttributes.fontSize); }},
+    {"fontWeight", [](const BaseTextProps& props) { return serialize(props.textAttributes.fontWeight); }},
+    {"textDecorationColor", [](const BaseTextProps& props) { return serialize(props.textAttributes.textDecorationColor); }},
+};
+
+const VerifiedProps<ImageProps> imageProps{
+    {"tintColor", [](const ImageProps& props) { return serialize(props.tintColor); }},
+};
+
+template <typename P>
+void diff(const VerifiedProps<P>& verifiedProps, const P& expected, const P& actual, std::vector<PropDifference>& differences) {
+    for (const auto& [name, read] : verifiedProps) {
+        auto expectedValue = read(expected);
+        auto actualValue = read(actual);
+
+        if (expectedValue != actualValue) {
+            differences.push_back({name, std::move(expectedValue), std::move(actualValue)});
+        }
+    }
+}
+
+const BaseTextProps* asTextProps(std::string_view componentName, const Props& props) {
+#if UNISTYLES_HAS_BASE_PARAGRAPH_PROPS
+    if (componentName == "Paragraph") {
+        return &static_cast<const BaseParagraphProps&>(props);
+    }
+#endif
+
+    if (componentName == "Text") {
+        return &static_cast<const TextProps&>(props);
+    }
+
+    return nullptr;
+}
+
+std::vector<PropDifference> diffVerifiedProps(const ShadowNode& shadowNode, const Props& expected) {
+    const auto& actual = *shadowNode.getProps();
+    const std::string_view componentName = shadowNode.getComponentName();
+    std::vector<PropDifference> differences;
+
+    if (shadowNode.getTraits().check(ShadowNodeTraits::Trait::ViewKind)) {
+        diff(viewProps, static_cast<const BaseViewProps&>(expected), static_cast<const BaseViewProps&>(actual), differences);
+    }
+
+    if (const auto* expectedText = asTextProps(componentName, expected)) {
+        diff(textProps, *expectedText, *asTextProps(componentName, actual), differences);
+    }
+
+    if (componentName == "Image") {
+        diff(imageProps, static_cast<const ImageProps&>(expected), static_cast<const ImageProps&>(actual), differences);
+    }
+
+    return differences;
+}
+
+// current revision of every surface
+std::unordered_map<SurfaceId, std::shared_ptr<const RootShadowNode>> getCommittedRoots(const UIManager& uiManager) {
+    std::unordered_map<SurfaceId, std::shared_ptr<const RootShadowNode>> roots;
+
+    uiManager.getShadowTreeRegistry().enumerate([&roots](const ShadowTree& shadowTree, bool&) {
+        roots.emplace(shadowTree.getSurfaceId(), shadowTree.getCurrentRevision().rootShadowNode);
+    });
+
+    return roots;
+}
+
+// nullptr when the family is not part of the committed tree
+std::shared_ptr<const ShadowNode> findCommittedNode(
+    const std::unordered_map<SurfaceId, std::shared_ptr<const RootShadowNode>>& roots,
+    const ShadowNodeFamily& family
+) {
+    const auto rootIt = roots.find(family.getSurfaceId());
+
+    if (rootIt == roots.end() || !rootIt->second) {
+        return nullptr;
+    }
+
+    auto ancestors = family.getAncestors(*rootIt->second);
+
+    if (ancestors.empty()) {
+        return nullptr;
+    }
+
+    const auto& [parent, index] = ancestors.back();
+
+    return parent.get().getChildren().at(index);
+}
+
+// rebuilds a copy of every UnistyleData, so the registry and shared parsed styles stay untouched
+folly::dynamic getExpectedProps(
+    jsi::Runtime& rt,
+    parser::Parser& parser,
+    const std::vector<std::shared_ptr<core::UnistyleData>>& unistyles
+) {
+    std::vector<std::shared_ptr<core::UnistyleData>> expectedUnistyles;
+    // prop name -> set last by an inline style
+    std::unordered_map<std::string, bool> propOwners;
+
+    expectedUnistyles.reserve(unistyles.size());
+
+    for (const auto& unistyleData : unistyles) {
+        auto arguments = unistyleData->dynamicFunctionMetadata.value_or(std::vector<folly::dynamic>{});
+        auto expectedData = std::make_shared<core::UnistyleData>(
+            unistyleData->unistyle,
+            unistyleData->variants,
+            arguments,
+            unistyleData->scopedTheme
+        );
+
+        // inline styles don't depend on the theme, React (or an animation) owns the props they set last
+        if (unistyleData->unistyle->styleKey == helpers::EXOTIC_STYLE_KEY) {
+            if (unistyleData->parsedStyle.has_value()) {
+                helpers::enumerateJSIObject(rt, unistyleData->parsedStyle.value(), [&propOwners](const std::string& propName, jsi::Value&) {
+                    propOwners[propName] = true;
+                });
+            }
+
+            continue;
+        }
+
+        if (expectedData->scopedTheme.has_value()) {
+            jsi::Value scopedStyleSheet = jsi::Value::undefined();
+
+            parser.rebuildUnistyleWithScopedTheme(rt, scopedStyleSheet, expectedData);
+        }
+
+        // static StyleSheets have no scoped version
+        if (!expectedData->parsedStyle.has_value()) {
+            parser.rebuildUnistyleWithVariants(rt, expectedData);
+        }
+
+        if (expectedData->parsedStyle.has_value()) {
+            helpers::enumerateJSIObject(rt, expectedData->parsedStyle.value(), [&propOwners](const std::string& propName, jsi::Value&) {
+                propOwners[propName] = false;
+            });
+        }
+
+        expectedUnistyles.emplace_back(std::move(expectedData));
+    }
+
+    auto expectedProps = parser.parseStylesToShadowTreeStyles(rt, expectedUnistyles);
+
+    for (const auto& [propName, isOwnedByInlineStyle] : propOwners) {
+        if (isOwnedByInlineStyle) {
+            expectedProps.erase(propName);
+        }
+    }
+
+    return expectedProps;
+}
+
+}
+
+jsi::Value shadow::ShadowTreeDiagnostics::verify(jsi::Runtime& rt, std::shared_ptr<HybridUnistylesRuntime> unistylesRuntime) {
+    auto& registry = core::UnistylesRegistry::get();
+    auto& uiManager = UIManagerBinding::getBinding(rt)->getUIManager();
+    auto snapshot = registry.getLinkedFamiliesSnapshot();
+    auto roots = getCommittedRoots(uiManager);
+    auto parser = parser::Parser(unistylesRuntime);
+
+    double checked = 0;
+    double detached = 0;
+    double suspended = 0;
+    double orphans = 0;
+    std::vector<Mismatch> mismatches;
+    std::vector<std::string> errors;
+
+    for (const auto& linkedFamily : snapshot) {
+        const auto& family = *linkedFamily.family;
+
+        // React Native dropped it, eg. unmounted while frozen
+        if (linkedFamily.isOwnedOnlyByUnistyles) {
+            orphans++;
+
+            continue;
+        }
+
+        // hidden by Suspense or a frozen screen, it gets fresh styles when restored
+        if (linkedFamily.isSuspended) {
+            suspended++;
+
+            continue;
+        }
+
+        auto committed = findCommittedNode(roots, family);
+
+        if (!committed) {
+            detached++;
+
+            continue;
+        }
+
+        checked++;
+
+        try {
+            auto expectedRawProps = getExpectedProps(rt, parser, linkedFamily.unistyles);
+            PropsParserContext propsParserContext{committed->getSurfaceId(), *committed->getContextContainer()};
+            auto expectedProps = committed->getComponentDescriptor().cloneProps(
+                propsParserContext,
+                committed->getProps(),
+                RawProps(expectedRawProps)
+            );
+
+            for (auto& difference : diffVerifiedProps(*committed, *expectedProps)) {
+                mismatches.push_back({
+                    family.getTag(),
+                    committed->getComponentName(),
+                    linkedFamily.unistyles.empty() ? "" : linkedFamily.unistyles.back()->unistyle->styleKey,
+                    std::move(difference)
+                });
+            }
+        } catch (const std::exception& error) {
+            errors.emplace_back("tag " + std::to_string(family.getTag()) + ": " + error.what());
+        }
+    }
+
+    auto jsMismatches = jsi::Array(rt, mismatches.size());
+
+    for (size_t i = 0; i < mismatches.size(); i++) {
+        auto& mismatch = mismatches[i];
+        auto jsMismatch = jsi::Object(rt);
+
+        jsMismatch.setProperty(rt, "tag", static_cast<double>(mismatch.tag));
+        jsMismatch.setProperty(rt, "component", jsi::String::createFromUtf8(rt, mismatch.component));
+        jsMismatch.setProperty(rt, "styleKey", jsi::String::createFromUtf8(rt, mismatch.styleKey));
+        jsMismatch.setProperty(rt, "prop", jsi::String::createFromUtf8(rt, mismatch.difference.prop));
+        jsMismatch.setProperty(rt, "expected", jsi::String::createFromUtf8(rt, mismatch.difference.expected));
+        jsMismatch.setProperty(rt, "actual", jsi::String::createFromUtf8(rt, mismatch.difference.actual));
+        jsMismatches.setValueAtIndex(rt, i, std::move(jsMismatch));
+    }
+
+    auto jsErrors = jsi::Array(rt, errors.size());
+
+    for (size_t i = 0; i < errors.size(); i++) {
+        jsErrors.setValueAtIndex(rt, i, jsi::String::createFromUtf8(rt, errors[i]));
+    }
+
+    auto report = jsi::Object(rt);
+
+    report.setProperty(rt, "linked", static_cast<double>(snapshot.size()));
+    report.setProperty(rt, "checked", checked);
+    report.setProperty(rt, "detached", detached);
+    report.setProperty(rt, "suspended", suspended);
+    report.setProperty(rt, "orphans", orphans);
+    report.setProperty(rt, "pendingUpdates", static_cast<double>(registry.getPendingUpdatesCount()));
+    report.setProperty(rt, "mismatches", std::move(jsMismatches));
+    report.setProperty(rt, "errors", std::move(jsErrors));
+
+    return report;
+}

package/cxx/shadowTree/ShadowTreeDiagnostics.h

@@ -0,0 +1,18 @@
+#pragma once
+
+#include <jsi/jsi.h>
+#include <memory>
+#include "HybridUnistylesRuntime.h"
+
+namespace margelo::nitro::unistyles::shadow {
+
+using namespace facebook;
+
+// Diagnostics for tests (react-native-unistyles/diagnostics), never commits anything
+struct ShadowTreeDiagnostics {
+    // rebuilds styles of every linked node with its own arguments, variants and current theme,
+    // and compares them with props committed to the shadow tree
+    static jsi::Value verify(jsi::Runtime& rt, std::shared_ptr<HybridUnistylesRuntime> unistylesRuntime);
+};
+
+}

package/cxx/shadowTree/ShadowTreeManager.cpp

@@ -4,169 +4,35 @@ using namespace margelo::nitro::unistyles;
 using namespace facebook::react;
 using namespace facebook;
 
-using AffectedNodes = std::unordered_map<const ShadowNodeFamily*, std::unordered_set<int>>;
-
-void shadow::ShadowTreeManager::updateShadowTree(jsi::Runtime& rt) {
+std::vector<Tag> shadow::ShadowTreeManager::updateShadowTree(jsi::Runtime& rt) {
     auto& registry = core::UnistylesRegistry::get();
 
+    // updates pin their families, so raw pointers stay valid during the commit
+    // declared outside of the lock, so the last pin is released after unlocking
+    PinnedShadowLeafUpdates updates;
+    std::vector<Tag> committedTags;
+
     registry.trafficController.withLock([&](){
-        auto updates = registry.trafficController.getUpdates();
+        updates = registry.trafficController.takeUpdates();
 
         if (updates.empty()) {
             return;
         }
 
-#if REACT_NATIVE_VERSION_MINOR >= 81
         std::unordered_map<Tag, folly::dynamic> tagToProps;
 
-        for (const auto& [family, props] : updates) {
-            auto safeProps = props.isObject() ? props : folly::dynamic::object();
+        committedTags.reserve(updates.size());
 
-            tagToProps.insert({family->getTag(), safeProps});
+        for (const auto& [family, update] : updates) {
+            auto safeProps = update.props.isObject() ? update.props : folly::dynamic::object();
 
-            auto* mutableFamily = const_cast<ShadowNodeFamily*>(family);
-
-            if (mutableFamily->nativeProps_DEPRECATED && mutableFamily->nativeProps_DEPRECATED->isObject()) {
-                mutableFamily->nativeProps_DEPRECATED->update(safeProps);
-            } else {
-                mutableFamily->nativeProps_DEPRECATED = std::make_unique<folly::dynamic>(safeProps);
-            }
+            tagToProps.insert({family->getTag(), safeProps});
+            committedTags.push_back(family->getTag());
+            shadow::mergeNativeProps(family, safeProps);
         }
 
         UIManagerBinding::getBinding(rt)->getUIManager().updateShadowTree(std::move(tagToProps));
-#else
-        const auto& shadowTreeRegistry = UIManagerBinding::getBinding(rt)->getUIManager().getShadowTreeRegistry();
-
-        shadowTreeRegistry.enumerate([&updates](const ShadowTree& shadowTree, bool& stop){
-            // we could iterate via updates and create multiple commits
-            // but it can cause performance issues for hundreds of nodes
-            // so let's mutate Shadow Tree in single transaction
-            auto transaction = [&updates](const RootShadowNode& oldRootShadowNode) {
-                auto affectedNodes = shadow::ShadowTreeManager::findAffectedNodes(oldRootShadowNode, updates);
-
-                for (const auto& [family, props] : updates) {
-                    // Merge props to fix glitches caused by REA updates
-                    auto* mutableFamily = const_cast<ShadowNodeFamily*>(family);
-                    auto safeProps = props.isObject() ? props : folly::dynamic::object();
-
-                    if (mutableFamily->nativeProps_DEPRECATED && mutableFamily->nativeProps_DEPRECATED->isObject()) {
-                        mutableFamily->nativeProps_DEPRECATED->update(safeProps);
-                    } else {
-                        mutableFamily->nativeProps_DEPRECATED = std::make_unique<folly::dynamic>(safeProps);
-                    }
-                }
-
-                return  std::static_pointer_cast<RootShadowNode>(shadow::ShadowTreeManager::cloneShadowTree(
-                    oldRootShadowNode,
-                    updates,
-                    affectedNodes
-                ));
-            };
-
-            // commit once!
-            // CommitOptions:
-            // enableStateReconciliation: https://reactnative.dev/architecture/render-pipeline#react-native-renderer-state-updates
-            // mountSynchronously: must be true as this is update from C++ not React
-            shadowTree.commit(transaction, {false, true});
-
-            // for now we're assuming single surface, can be improved in the future
-            // stop = true means stop enumerating next shadow tree
-            // so in other words first shadow tree is our desired tree
-            stop = true;
-        });
-#endif
     });
-}
-
-// based on Reanimated algorithm
-// For each affected family we're gathering affected nodes (their indexes)
-// Example:
-//      A
-//    /   \
-//   B     C
-//  / \
-// D   E*
-//    / \
-//   F   G
-//
-// For ShadowFamily E* we will get:
-//[
-//  0 - because B is a first children of A,
-//  1 - because E is a second children of B
-//]
-// A, B and E are affected now
-AffectedNodes shadow::ShadowTreeManager::findAffectedNodes(const RootShadowNode& rootNode, ShadowLeafUpdates& updates) {
-    AffectedNodes affectedNodes;
-
-    for (const auto& [family, _] : updates) {
-        auto familyAncestors = family->getAncestors(rootNode);
-
-        for (auto it = familyAncestors.rbegin(); it != familyAncestors.rend(); ++it) {
-            const auto& [parentNode, index] = *it;
-            const auto parentFamily = &parentNode.get().getFamily();
-            auto [setIt, inserted] = affectedNodes.try_emplace(parentFamily, std::unordered_set<int>{});
-
-            setIt->second.insert(index);
-        }
-    }
 
-    return affectedNodes;
-}
-
-Props::Shared shadow::ShadowTreeManager::computeUpdatedProps(const ShadowNode &shadowNode, ShadowLeafUpdates& updates) {
-    const auto family = &shadowNode.getFamily();
-    const auto rawPropsIt = updates.find(family);
-
-    if (rawPropsIt == updates.end()) {
-        return ShadowNodeFragment::propsPlaceholder();
-    }
-
-    const auto& componentDescriptor = shadowNode.getComponentDescriptor();
-    const auto& props = shadowNode.getProps();
-
-    PropsParserContext propsParserContext{
-        shadowNode.getSurfaceId(),
-        *shadowNode.getContextContainer()
-    };
-
-    folly::dynamic newProps = rawPropsIt->second == nullptr
-        ? folly::dynamic::object()
-        : rawPropsIt->second;
-
-    return componentDescriptor.cloneProps(
-        propsParserContext,
-        props,
-        RawProps(newProps)
-    );
-}
-
-// based on Reanimated algorithm
-// clone affected nodes recursively, inject props and commit tree
-std::shared_ptr<ShadowNode> shadow::ShadowTreeManager::cloneShadowTree(const ShadowNode &shadowNode, ShadowLeafUpdates& updates, AffectedNodes& affectedNodes) {
-    const auto family = &shadowNode.getFamily();
-    const auto childrenIt = affectedNodes.find(family);
-
-    // Only copy children if we need to update them
-    std::shared_ptr<std::vector<std::shared_ptr<const ShadowNode>>> childrenPtr;
-    const auto& originalChildren = shadowNode.getChildren();
-
-    if (childrenIt != affectedNodes.end()) {
-        auto children = originalChildren;
-
-        for (const auto index : childrenIt->second) {
-            children[index] = cloneShadowTree(*children[index], updates, affectedNodes);
-        }
-
-        childrenPtr = std::make_shared<std::vector<std::shared_ptr<const ShadowNode>>>(std::move(children));
-    } else {
-        childrenPtr = std::make_shared<std::vector<std::shared_ptr<const ShadowNode>>>(originalChildren);
-    }
-
-    Props::Shared updatedProps = computeUpdatedProps(shadowNode, updates);
-
-    return shadowNode.clone({
-        .props = updatedProps,
-        .children = childrenPtr,
-        .state = shadowNode.getState()
-    });
+    return committedTags;
 }

package/cxx/shadowTree/ShadowTreeManager.h

@@ -5,6 +5,7 @@
 #include <react/renderer/uimanager/UIManager.h>
 #include <ranges>
 #include "ShadowLeafUpdate.h"
+#include "NativeProps.h"
 #include "UnistylesRegistry.h"
 #include <cxxreact/ReactNativeVersion.h>
 
@@ -13,13 +14,8 @@ namespace margelo::nitro::unistyles::shadow {
 using namespace facebook::react;
 using namespace facebook;
 
-using AffectedNodes = std::unordered_map<const ShadowNodeFamily *, std::unordered_set<int>>;
-
 struct ShadowTreeManager {
-    static void updateShadowTree(jsi::Runtime& rt);
-    static AffectedNodes findAffectedNodes(const RootShadowNode& rootNode, ShadowLeafUpdates& updates);
-    static std::shared_ptr<ShadowNode> cloneShadowTree(const ShadowNode& shadowNode, ShadowLeafUpdates& updates, AffectedNodes& affectedNodes);
-    static Props::Shared computeUpdatedProps(const ShadowNode &shadowNode, ShadowLeafUpdates& updates);
+    static std::vector<Tag> updateShadowTree(jsi::Runtime& rt);
 };
 
 }

package/diagnostics/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../lib/commonjs/diagnostics/index",
+  "module": "../lib/module/diagnostics/index",
+  "react-native": "../src/diagnostics/index",
+  "types": "../lib/typescript/src/diagnostics/index"
+}

package/ios/UnistylesModuleOnLoad.mm

@@ -6,7 +6,9 @@
 
 using namespace margelo::nitro;
 
-@implementation UnistylesModule
+@implementation UnistylesModule {
+    uint64_t _generation;
+}
 
 RCT_EXPORT_MODULE(Unistyles)
 
@@ -16,6 +18,9 @@ RCT_EXPORT_MODULE(Unistyles)
 
 - (void)installJSIBindingsWithRuntime:(jsi::Runtime&)rt callInvoker:(const std::shared_ptr<facebook::react::CallInvoker> &)callInvoker {
     // function is called on: first init and every live reload
+    // newest runtime owns the registry, previous runtime's state is kept until it releases ownership
+    _generation = core::UnistylesRegistry::get().takeOwnership();
+
     // check if this is live reload, if so let's replace UnistylesRuntime with new runtime
     auto hasUnistylesRuntime = HybridObjectRegistry::hasHybridObject("UnistylesRuntime");
 
@@ -34,7 +39,7 @@ RCT_EXPORT_MODULE(Unistyles)
     };
 
     auto nativePlatform = Unistyles::NativePlatform::create().getCxxPart();
-    auto unistylesRuntime = std::make_shared<HybridUnistylesRuntime>(nativePlatform, runOnJSThread);
+    auto unistylesRuntime = std::make_shared<HybridUnistylesRuntime>(nativePlatform, runOnJSThread, _generation);
     auto styleSheet = std::make_shared<HybridStyleSheet>(unistylesRuntime);
 
     HybridObjectRegistry::registerHybridObjectConstructor("UnistylesRuntime", [unistylesRuntime]() -> std::shared_ptr<HybridObject>{
@@ -53,7 +58,8 @@ RCT_EXPORT_MODULE(Unistyles)
 }
 
 - (void)invalidate {
-    core::UnistylesRegistry::get().destroy();
+    // releases this runtime's state, also when a newer runtime already replaced it
+    core::UnistylesRegistry::get().releaseOwnership(_generation);
 
     [super invalidate];
 }

package/lib/commonjs/components/native/ActivityIndicator.native.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ActivityIndicator = void 0;
+var _reactNative = require("react-native");
+var _core = require("../../core");
+const ActivityIndicator = exports.ActivityIndicator = (0, _core.createUnistylesActivityIndicator)(_reactNative.ActivityIndicator);
+//# sourceMappingURL=ActivityIndicator.native.js.map

package/lib/commonjs/components/native/ActivityIndicator.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNative","require","_core","ActivityIndicator","exports","createUnistylesActivityIndicator","NativeActivityIndicator"],"sourceRoot":"../../../../src","sources":["components/native/ActivityIndicator.native.tsx"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AAEA,IAAAC,KAAA,GAAAD,OAAA;AAEO,MAAME,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAG,IAAAE,sCAAgC,EAACC,8BAAuB,CAAC","ignoreList":[]}

package/lib/commonjs/components/native/Animated.js

@@ -11,6 +11,8 @@ var _ScrollView = require("./ScrollView");
 var _SectionList = require("./SectionList");
 var _Text = require("./Text");
 var _View = require("./View");
+// explicit type keeps emitted declarations portable (RN 0.87+ Strict TypeScript API references private paths)
+
 const Animated = exports.Animated = {
   ..._reactNative.Animated,
   View: _reactNative.Animated.createAnimatedComponent(_View.View),

package/lib/commonjs/components/native/Animated.js.map

@@ -1 +1 @@
-{"version":3,"names":["_reactNative","require","_FlatList","_Image","_ScrollView","_SectionList","_Text","_View","Animated","exports","RNAnimated","View","createAnimatedComponent","Text","FlatList","Image","ScrollView","SectionList"],"sourceRoot":"../../../../src","sources":["components/native/Animated.tsx"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AAEA,IAAAC,SAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,WAAA,GAAAH,OAAA;AACA,IAAAI,YAAA,GAAAJ,OAAA;AACA,IAAAK,KAAA,GAAAL,OAAA;AACA,IAAAM,KAAA,GAAAN,OAAA;AAEO,MAAMO,QAAQ,GAAAC,OAAA,CAAAD,QAAA,GAAG;EACpB,GAAGE,qBAAU;EACbC,IAAI,EAAED,qBAAU,CAACE,uBAAuB,CAACD,UAAI,CAAC;EAC9CE,IAAI,EAAEH,qBAAU,CAACE,uBAAuB,CAACC,UAAI,CAAC;EAC9CC,QAAQ,EAAEJ,qBAAU,CAACE,uBAAuB,CAACE,kBAAQ,CAAC;EACtDC,KAAK,EAAEL,qBAAU,CAACE,uBAAuB,CAACG,YAAK,CAAC;EAChDC,UAAU,EAAEN,qBAAU,CAACE,uBAAuB,CAACI,sBAAU,CAAC;EAC1DC,WAAW,EAAEP,qBAAU,CAACE,uBAAuB,CAACK,wBAAW;AAC/D,CAAC","ignoreList":[]}
+{"version":3,"names":["_reactNative","require","_FlatList","_Image","_ScrollView","_SectionList","_Text","_View","Animated","exports","RNAnimated","View","createAnimatedComponent","Text","FlatList","Image","ScrollView","SectionList"],"sourceRoot":"../../../../src","sources":["components/native/Animated.tsx"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AAEA,IAAAC,SAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,WAAA,GAAAH,OAAA;AACA,IAAAI,YAAA,GAAAJ,OAAA;AACA,IAAAK,KAAA,GAAAL,OAAA;AACA,IAAAM,KAAA,GAAAN,OAAA;AAMA;;AAaO,MAAMO,QAA2B,GAAAC,OAAA,CAAAD,QAAA,GAAG;EACvC,GAAGE,qBAAU;EACbC,IAAI,EAAED,qBAAU,CAACE,uBAAuB,CAACD,UAAI,CAAC;EAC9CE,IAAI,EAAEH,qBAAU,CAACE,uBAAuB,CAACC,UAAI,CAAC;EAC9CC,QAAQ,EAAEJ,qBAAU,CAACE,uBAAuB,CAACE,kBAAQ,CAAC;EACtDC,KAAK,EAAEL,qBAAU,CAACE,uBAAuB,CAACG,YAAK,CAAC;EAChDC,UAAU,EAAEN,qBAAU,CAACE,uBAAuB,CAACI,sBAAU,CAAC;EAC1DC,WAAW,EAAEP,qBAAU,CAACE,uBAAuB,CAACK,wBAAW;AAC/D,CAAC","ignoreList":[]}

package/lib/commonjs/components/native/NativeText.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "NativeText", {
+  enumerable: true,
+  get: function () {
+    return _Text.Text;
+  }
+});
 Object.defineProperty(exports, "Text", {
   enumerable: true,
   get: function () {

package/lib/commonjs/components/native/NativeText.js.map

@@ -1 +1 @@
-{"version":3,"names":["_Text","require"],"sourceRoot":"../../../../src","sources":["components/native/NativeText.tsx"],"mappings":";;;;;;;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA","ignoreList":[]}
+{"version":3,"names":["_Text","require"],"sourceRoot":"../../../../src","sources":["components/native/NativeText.tsx"],"mappings":";;;;;;;;;;;;;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA","ignoreList":[]}