react-native-unistyles 3.2.5 → 3.4.0

package/README.md

@@ -58,9 +58,6 @@ Then follow [installation guides](https://unistyl.es/v3/start/getting-started) f
 <a href="https://codemask.com">
     <img src="https://avatars.githubusercontent.com/u/51229884?s=200&v=4" height="70px" width="70px" alt="codemask" />
 </a>
-<a href="https://galaxies.dev">
-     <img src="https://avatars.githubusercontent.com/u/118431096?s=200&v=4" height="70px" width="70px" alt="galaxies-dev" />
-</a>
 <a href="https://github.com/ryanlanciaux">
      <img src="https://avatars.githubusercontent.com/u/85041?v=4" height="70px" width="70px" alt="ryanlanciaux" />
 </a>
@@ -155,6 +152,9 @@ Then follow [installation guides](https://unistyl.es/v3/start/getting-started) f
 <a href="https://github.com/AdiRishi">
      <img src="https://avatars.githubusercontent.com/u/8351234?v=4" height="60px" width="60px" alt="AdiRishi" />
 </a>
+<a href="https://galaxies.dev">
+     <img src="https://avatars.githubusercontent.com/u/118431096?s=200&v=4" height="60px" width="60px" alt="galaxies-dev" />
+</a>
 
 ## Sponsor my work
 

package/android/CMakeLists.txt

@@ -2,7 +2,7 @@ cmake_minimum_required(VERSION 3.9.0)
 
 project(unistyles)
 
-file(GLOB_RECURSE CORE_SRC RELATIVE ${CMAKE_SOURCE_DIR} "../cxx/**/*.cpp")
+file(GLOB_RECURSE CORE_SRC CONFIGURE_DEPENDS RELATIVE ${CMAKE_SOURCE_DIR} "../cxx/*.cpp")
 file(GLOB_RECURSE PLATFORM_SRC RELATIVE ${CMAKE_SOURCE_DIR} "./src/main/cxx/*.cpp")
 
 if(ReactAndroid_VERSION_MINOR GREATER_EQUAL 80)
@@ -21,6 +21,7 @@ include_directories(
     ./src/main/cxx
     ../cxx
     ../cxx/common
+    ../cxx/converters
     ../cxx/core
     ../cxx/hybridObjects
     ../cxx/parser

package/cxx/converters/BackgroundImageConverter.cpp

@@ -0,0 +1,55 @@
+#include "BackgroundImageConverter.h"
+
+#include <algorithm>
+
+#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>
+#define UNISTYLES_HAS_RN_BACKGROUND_IMAGE_PARSER 1
+#endif
+
+namespace margelo::nitro::unistyles::converters {
+
+bool isBackgroundImagePropName(const std::string &propertyName) {
+  return propertyName == "backgroundImage" ||
+         propertyName == "experimental_backgroundImage";
+}
+
+bool hasSafeBackgroundImageColorStops(const folly::dynamic &backgroundImages) {
+  if (!backgroundImages.isArray()) {
+    return false;
+  }
+
+  return std::all_of(
+      backgroundImages.begin(), backgroundImages.end(), [](const auto &image) {
+        if (!image.isObject() || image.count("colorStops") == 0) {
+          return false;
+        }
+
+        const auto &colorStops = image["colorStops"];
+
+        return colorStops.isArray() && colorStops.size() >= 2;
+      });
+}
+
+std::optional<folly::dynamic>
+parseBackgroundImageString(const std::string &backgroundImageString) {
+#ifdef UNISTYLES_HAS_RN_BACKGROUND_IMAGE_PARSER
+  std::vector<facebook::react::BackgroundImage> backgroundImages;
+
+  facebook::react::parseUnprocessedBackgroundImageString(backgroundImageString,
+                                                         backgroundImages);
+
+  auto parsedBackgroundImages = facebook::react::toDynamic(backgroundImages);
+
+  return hasSafeBackgroundImageColorStops(parsedBackgroundImages)
+             ? std::move(parsedBackgroundImages)
+             : folly::dynamic::array();
+#else
+  return std::nullopt;
+#endif
+}
+
+} // namespace margelo::nitro::unistyles::converters

package/cxx/converters/BackgroundImageConverter.h

@@ -0,0 +1,14 @@
+#pragma once
+
+#include <folly/dynamic.h>
+#include <optional>
+#include <string>
+
+namespace margelo::nitro::unistyles::converters {
+
+bool isBackgroundImagePropName(const std::string &propertyName);
+bool hasSafeBackgroundImageColorStops(const folly::dynamic &backgroundImages);
+std::optional<folly::dynamic>
+parseBackgroundImageString(const std::string &backgroundImageString);
+
+} // namespace margelo::nitro::unistyles::converters

package/cxx/converters/TransformOriginConverter.cpp

@@ -0,0 +1,33 @@
+#include "TransformOriginConverter.h"
+
+#if defined(RN_SERIALIZABLE_STATE) &&                                          \
+    __has_include(<react/renderer/components/view/conversions.h>)
+#include <react/renderer/components/view/conversions.h>
+#define UNISTYLES_HAS_RN_TRANSFORM_ORIGIN_PARSER 1
+#endif
+
+namespace margelo::nitro::unistyles::converters {
+
+bool isTransformOriginPropName(const std::string &propertyName) {
+  return propertyName == "transformOrigin";
+}
+
+std::optional<folly::dynamic>
+parseTransformOriginString(const std::string &transformOriginString) {
+#ifdef UNISTYLES_HAS_RN_TRANSFORM_ORIGIN_PARSER
+  facebook::react::TransformOrigin transformOrigin;
+
+  facebook::react::parseUnprocessedTransformOriginString(transformOriginString,
+                                                         transformOrigin);
+
+  if (!transformOrigin.isSet()) {
+    return folly::dynamic(nullptr);
+  }
+
+  return static_cast<folly::dynamic>(transformOrigin);
+#else
+  return std::nullopt;
+#endif
+}
+
+} // namespace margelo::nitro::unistyles::converters

package/cxx/converters/TransformOriginConverter.h

@@ -0,0 +1,13 @@
+#pragma once
+
+#include <folly/dynamic.h>
+#include <optional>
+#include <string>
+
+namespace margelo::nitro::unistyles::converters {
+
+bool isTransformOriginPropName(const std::string &propertyName);
+std::optional<folly::dynamic>
+parseTransformOriginString(const std::string &transformOriginString);
+
+} // namespace margelo::nitro::unistyles::converters

package/cxx/core/UnistylesRegistry.cpp

@@ -1,6 +1,7 @@
 #include "UnistylesRegistry.h"
 #include "UnistylesState.h"
 #include "Parser.h"
+#include "NativeProps.h"
 
 using namespace margelo::nitro::unistyles;
 using namespace facebook;
@@ -60,37 +61,85 @@ void core::UnistylesRegistry::updateTheme(jsi::Runtime& rt, std::string& themeNa
 
 void core::UnistylesRegistry::linkShadowNodeWithUnistyle(
     jsi::Runtime& rt,
-    const ShadowNodeFamily* shadowNodeFamily,
+    const std::shared_ptr<const ShadowNodeFamily>& shadowNodeFamily,
     std::vector<std::shared_ptr<UnistyleData>>& unistylesData,
     std::optional<folly::dynamic> initialScopedUpdate
 ) {
-    this->trafficController.withLock([this, &rt, &unistylesData, shadowNodeFamily, &initialScopedUpdate](){
+    // released after unlocking, so a family destructor never runs within the lock
+    ReleasedFamilies releasedFamilies;
+
+    this->trafficController.withLock([this, &unistylesData, &shadowNodeFamily, &initialScopedUpdate, &releasedFamilies](){
+        auto family = shadowNodeFamily.get();
+        auto it = this->_shadowRegistry.find(family);
+
         // Clear suspension state if this family was previously suspended
-        if (_suspendedFamilies.erase(shadowNodeFamily) > 0) {
-            auto* mutableFamily = const_cast<ShadowNodeFamily*>(shadowNodeFamily);
-            mutableFamily->nativeProps_DEPRECATED.reset();
+        if (it != this->_shadowRegistry.end() && it->second.isSuspended) {
+            shadow::resetNativeProps(family);
             // Clear old registry entries to prevent stale UnistyleData accumulation
-            this->_shadowRegistry.erase(shadowNodeFamily);
-            // Remove any stale traffic controller entry (e.g. from a theme change during suspension)
-            this->trafficController.removeShadowNode(shadowNodeFamily);
+            // and any stale traffic controller entry (e.g. from a theme change during suspension)
+            this->forgetFamilyUnsafe(family, releasedFamilies);
         }
 
-        std::for_each(unistylesData.begin(), unistylesData.end(), [this, shadowNodeFamily](std::shared_ptr<UnistyleData> unistyleData){
-            this->_shadowRegistry[shadowNodeFamily].emplace_back(unistyleData);
-        });
+        auto& linkedFamily = this->_shadowRegistry[family];
+
+        linkedFamily.family = shadowNodeFamily;
+        linkedFamily.unistyles.insert(linkedFamily.unistyles.end(), unistylesData.begin(), unistylesData.end());
 
         // Required for scoped themes to apply on initial mount
         if (initialScopedUpdate.has_value()) {
-            shadow::ShadowLeafUpdates updates;
+            this->trafficController.setUpdate(shadowNodeFamily, std::move(*initialScopedUpdate));
+        }
 
-            updates.emplace(shadowNodeFamily, std::move(*initialScopedUpdate));
-            this->trafficController.setUpdates(updates);
+        // families unmounted without unlink (eg. while frozen) are pinned by us only
+        // sweep them once the registry doubles, so it's amortized O(1) per link
+        if (this->_shadowRegistry.size() >= this->_sweepThreshold) {
+            this->sweepUnownedFamiliesUnsafe(releasedFamilies);
+            this->_sweepThreshold = std::max(MIN_SWEEP_THRESHOLD, this->_shadowRegistry.size() * 2);
         }
     });
 }
 
+bool core::UnistylesRegistry::isOwnedOnlyByUnistyles(const LinkedFamily& linkedFamily) noexcept {
+    // shadow nodes own their family, so if nothing but our pin owns it, the family is not part of any
+    // shadow tree anymore. React Native can't get it back, as it only keeps weak references beside shadow nodes
+    return linkedFamily.family.use_count() == 1;
+}
+
+void core::UnistylesRegistry::forgetFamilyUnsafe(const ShadowNodeFamily* shadowNodeFamily, ReleasedFamilies& releasedFamilies) {
+    auto it = this->_shadowRegistry.find(shadowNodeFamily);
+
+    if (it != this->_shadowRegistry.end()) {
+        releasedFamilies.emplace_back(std::move(it->second.family));
+        this->_shadowRegistry.erase(it);
+    }
+
+    if (auto pendingFamily = this->trafficController.removeShadowNode(shadowNodeFamily)) {
+        releasedFamilies.emplace_back(std::move(pendingFamily));
+    }
+}
+
+void core::UnistylesRegistry::sweepUnownedFamiliesUnsafe(ReleasedFamilies& releasedFamilies) {
+    std::vector<const ShadowNodeFamily*> unownedFamilies;
+
+    for (const auto& [family, linkedFamily] : this->_shadowRegistry) {
+        if (isOwnedOnlyByUnistyles(linkedFamily)) {
+            unownedFamilies.emplace_back(family);
+        }
+    }
+
+    for (const auto* family : unownedFamilies) {
+        this->forgetFamilyUnsafe(family, releasedFamilies);
+    }
+}
+
 void core::UnistylesRegistry::removeDuplicatedUnistyles(const ShadowNodeFamily *shadowNodeFamily, std::vector<core::Unistyle::Shared>& unistyles) {
-    auto targetFamilyUnistyles = this->_shadowRegistry[shadowNodeFamily];
+    auto it = this->_shadowRegistry.find(shadowNodeFamily);
+
+    if (it == this->_shadowRegistry.end()) {
+        return;
+    }
+
+    auto& targetFamilyUnistyles = it->second.unistyles;
 
     unistyles.erase(
         std::remove_if(
@@ -111,23 +160,27 @@ void core::UnistylesRegistry::removeDuplicatedUnistyles(const ShadowNodeFamily *
 }
 
 void core::UnistylesRegistry::unlinkShadowNodeWithUnistyles(const ShadowNodeFamily* shadowNodeFamily) {
-    this->trafficController.withLock([this, shadowNodeFamily](){
-        this->_shadowRegistry.erase(shadowNodeFamily);
-        this->_suspendedFamilies.erase(shadowNodeFamily);
-        this->trafficController.removeShadowNode(shadowNodeFamily);
+    ReleasedFamilies releasedFamilies;
+
+    this->trafficController.withLock([this, shadowNodeFamily, &releasedFamilies](){
+        this->forgetFamilyUnsafe(shadowNodeFamily, releasedFamilies);
     });
 }
 
 void core::UnistylesRegistry::suspendShadowNode(const ShadowNodeFamily* shadowNodeFamily) {
     this->trafficController.withLock([this, shadowNodeFamily](){
-        if (this->_shadowRegistry.contains(shadowNodeFamily)) {
-            this->_suspendedFamilies.insert(shadowNodeFamily);
+        auto it = this->_shadowRegistry.find(shadowNodeFamily);
+
+        if (it != this->_shadowRegistry.end()) {
+            it->second.isSuspended = true;
         }
     });
 }
 
 bool core::UnistylesRegistry::isSuspended(const ShadowNodeFamily* family) const noexcept {
-    return _suspendedFamilies.count(family) > 0;
+    auto it = this->_shadowRegistry.find(family);
+
+    return it != this->_shadowRegistry.end() && it->second.isSuspended;
 }
 
 std::shared_ptr<core::StyleSheet> core::UnistylesRegistry::addStyleSheet(jsi::Runtime& rt, core::StyleSheetType type, jsi::Object&& rawValue) {
@@ -143,36 +196,56 @@ core::DependencyMap core::UnistylesRegistry::buildDependencyMap(std::vector<Unis
     core::DependencyMap dependencyMap;
 
     std::unordered_set<UnistyleDependency> uniqueDependencies(deps.begin(), deps.end());
+    ReleasedFamilies releasedFamilies;
+
+    // families stay pinned by the registry until the shadow tree update is committed
+    this->trafficController.withLock([this, &dependencyMap, &uniqueDependencies, &releasedFamilies](){
+        // we iterate whole registry anyway, so it's a free moment to drop families unmounted without unlink
+        this->sweepUnownedFamiliesUnsafe(releasedFamilies);
+
+        for (const auto& [family, linkedFamily] : this->_shadowRegistry) {
+            bool hasAnyOfDependencies = false;
+
+            // Check if any dependency matches
+            for (const auto& unistyleData : linkedFamily.unistyles) {
+                for (const auto& dep : unistyleData->unistyle->dependencies) {
+                    if (uniqueDependencies.count(dep)) {
+                        hasAnyOfDependencies = true;
+                        break;
+                    }
+                }
 
-    for (const auto& [family, unistyles] : this->_shadowRegistry) {
-        bool hasAnyOfDependencies = false;
-
-        // Check if any dependency matches
-        for (const auto& unistyleData : unistyles) {
-            for (const auto& dep : unistyleData->unistyle->dependencies) {
-                if (uniqueDependencies.count(dep)) {
-                    hasAnyOfDependencies = true;
+                if (hasAnyOfDependencies) {
                     break;
-                }
+                };
             }
 
-            if (hasAnyOfDependencies) {
-                break;
-            };
+            if (!hasAnyOfDependencies) {
+                continue;
+            }
+
+            dependencyMap[family].insert(
+                dependencyMap[family].end(),
+                linkedFamily.unistyles.begin(),
+                linkedFamily.unistyles.end()
+            );
         }
+    });
+
+    return dependencyMap;
+}
 
-        if (!hasAnyOfDependencies) {
+void core::UnistylesRegistry::queueShadowLeafUpdatesUnsafe(shadow::ShadowLeafUpdates& updates) {
+    for (auto& [family, props] : updates) {
+        auto it = this->_shadowRegistry.find(family);
+
+        // family was unlinked in the meantime, there is nothing to update
+        if (it == this->_shadowRegistry.end()) {
             continue;
         }
 
-        dependencyMap[family].insert(
-            dependencyMap[family].end(),
-            unistyles.begin(),
-            unistyles.end()
-        );
+        this->trafficController.setUpdate(it->second.family, std::move(props));
     }
-
-    return dependencyMap;
 }
 
 // called from proxied function only, we don't know host
@@ -185,15 +258,15 @@ void core::UnistylesRegistry::shadowLeafUpdateFromUnistyle(jsi::Runtime& rt, Uni
             ? std::make_optional(maybePressableId.asString(rt).utf8(rt))
             : std::nullopt;
 
-        for (const auto& [family, unistyles] : this->_shadowRegistry) {
-            for (const auto& unistyleData : unistyles) {
+        for (const auto& [family, linkedFamily] : this->_shadowRegistry) {
+            for (const auto& unistyleData : linkedFamily.unistyles) {
                 if (unistyleData->unistyle == unistyle) {
                     updates[family] = parser.parseStylesToShadowTreeStyles(rt, { unistyleData });
                 }
             }
         }
 
-        this->trafficController.setUpdates(updates);
+        this->queueShadowLeafUpdatesUnsafe(updates);
     });
 }
 
@@ -263,10 +336,25 @@ void core::UnistylesRegistry::setScopedTheme(std::optional<std::string> themeNam
 }
 
 void core::UnistylesRegistry::destroy() {
+    // called when module is invalidated, before React Native destroys the runtime
+    // pins must be released now, as families hold JS handles that can't outlive the runtime
+    ReleasedFamilies releasedFamilies;
+
+    this->trafficController.withLock([this, &releasedFamilies](){
+        for (auto& [_, linkedFamily] : this->_shadowRegistry) {
+            releasedFamilies.emplace_back(std::move(linkedFamily.family));
+        }
+
+        for (auto& [_, pendingUpdate] : this->trafficController.takeUpdates()) {
+            releasedFamilies.emplace_back(std::move(pendingUpdate.family));
+        }
+
+        this->_shadowRegistry.clear();
+        this->_sweepThreshold = MIN_SWEEP_THRESHOLD;
+    });
+
     this->_state.reset();
     this->_styleSheetRegistry.clear();
-    this->_shadowRegistry.clear();
-    this->_suspendedFamilies.clear();
     this->_scopedTheme = std::nullopt;
     _nextStyleSheetTag.store(0);
 }

package/cxx/core/UnistylesRegistry.h

@@ -23,6 +23,12 @@ using namespace facebook::react;
 
 using DependencyMap = std::unordered_map<const ShadowNodeFamily*, std::vector<std::shared_ptr<UnistyleData>>>;
 
+struct LinkedFamily {
+    std::shared_ptr<const ShadowNodeFamily> family;
+    std::vector<std::shared_ptr<UnistyleData>> unistyles;
+    bool isSuspended = false;
+};
+
 struct UnistylesRegistry: public StyleSheetRegistry {
     static UnistylesRegistry& get();
 
@@ -40,13 +46,15 @@ struct UnistylesRegistry: public StyleSheetRegistry {
     UnistylesState& getState();
     void createState();
     std::vector<std::shared_ptr<core::StyleSheet>> getStyleSheetsToRefresh(std::vector<UnistyleDependency>& unistylesDependencies);
-    void linkShadowNodeWithUnistyle(jsi::Runtime& rt, const ShadowNodeFamily*, std::vector<std::shared_ptr<UnistyleData>>& unistylesData, std::optional<folly::dynamic> initialScopedUpdate = std::nullopt);
+    void linkShadowNodeWithUnistyle(jsi::Runtime& rt, const std::shared_ptr<const ShadowNodeFamily>& shadowNodeFamily, std::vector<std::shared_ptr<UnistyleData>>& unistylesData, std::optional<folly::dynamic> initialScopedUpdate = std::nullopt);
     void unlinkShadowNodeWithUnistyles(const ShadowNodeFamily*);
     void suspendShadowNode(const ShadowNodeFamily*);
     bool isSuspended(const ShadowNodeFamily*) const noexcept;
     std::shared_ptr<core::StyleSheet> addStyleSheet(jsi::Runtime& rt, core::StyleSheetType type, jsi::Object&& rawValue);
     DependencyMap buildDependencyMap(std::vector<UnistyleDependency>& deps);
     void shadowLeafUpdateFromUnistyle(jsi::Runtime& rt, Unistyle::Shared unistyle, jsi::Value& maybePressableId);
+    // call it only within trafficController.withLock!
+    void queueShadowLeafUpdatesUnsafe(shadow::ShadowLeafUpdates& updates);
     shadow::ShadowTrafficController trafficController{};
     const std::optional<std::string> getScopedTheme();
     void removeDuplicatedUnistyles(const ShadowNodeFamily* shadowNodeFamily, std::vector<core::Unistyle::Shared>& unistyles);
@@ -55,14 +63,26 @@ struct UnistylesRegistry: public StyleSheetRegistry {
     void destroy();
 
 private:
+    using ReleasedFamilies = std::vector<std::shared_ptr<const ShadowNodeFamily>>;
+
     UnistylesRegistry() = default;
 
+    // call it only within trafficController.withLock!
+    // pins are moved to releasedFamilies, so they can be released after unlocking
+    void forgetFamilyUnsafe(const ShadowNodeFamily* shadowNodeFamily, ReleasedFamilies& releasedFamilies);
+    void sweepUnownedFamiliesUnsafe(ReleasedFamilies& releasedFamilies);
+
+    // React Native doesn't own the family anymore, it was unmounted without unlink
+    static bool isOwnedOnlyByUnistyles(const LinkedFamily& linkedFamily) noexcept;
+
+    static constexpr size_t MIN_SWEEP_THRESHOLD = 64;
+
     static std::atomic<int> _nextStyleSheetTag;
     std::optional<std::string> _scopedTheme{};
     std::unique_ptr<UnistylesState> _state{};
     std::unordered_map<int, std::shared_ptr<core::StyleSheet>> _styleSheetRegistry{};
-    std::unordered_map<const ShadowNodeFamily*, std::vector<std::shared_ptr<UnistyleData>>> _shadowRegistry{};
-    std::unordered_set<const ShadowNodeFamily*> _suspendedFamilies{};
+    std::unordered_map<const ShadowNodeFamily*, LinkedFamily> _shadowRegistry{};
+    size_t _sweepThreshold = MIN_SWEEP_THRESHOLD;
 };
 
 inline UnistylesRegistry& UnistylesRegistry::get() {

package/cxx/hybridObjects/HybridShadowRegistry.cpp

@@ -11,10 +11,11 @@ jsi::Value HybridShadowRegistry::link(jsi::Runtime &rt, const jsi::Value &thisVa
     std::vector<core::Unistyle::Shared> unistyleWrappers = core::unistyleFromValue(rt, args[1]);
     std::vector<std::vector<folly::dynamic>> arguments;
     auto& registry = core::UnistylesRegistry::get();
+    const bool wasSuspended = registry.isSuspended(&shadowNodeWrapper->getFamily());
 
     // this is special case for Animated, and prevents appending same unistyles to node
     // skip for suspended families - they need a full re-link with fresh UnistyleData
-    if (!registry.isSuspended(&shadowNodeWrapper->getFamily())) {
+    if (!wasSuspended) {
         registry.removeDuplicatedUnistyles(&shadowNodeWrapper->getFamily(), unistyleWrappers);
 
         if (unistyleWrappers.empty()) {
@@ -86,9 +87,10 @@ jsi::Value HybridShadowRegistry::link(jsi::Runtime &rt, const jsi::Value &thisVa
             parser.rebuildUnistyleWithScopedTheme(rt, parsedStyleSheet, unistyleData);
         }
 
-        // Initialize parsedStyle from the unistyle's current computed style from withUnistyles
+        // 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.
         if (!unistyleData->parsedStyle.has_value() && unistyle->parsedStyle.has_value()) {
-            unistyleData->parsedStyle = jsi::Value(rt, unistyle->parsedStyle.value()).asObject(rt);
+            parser.rebuildUnistyleWithVariants(rt, unistyleData);
         }
 
         unistylesData.emplace_back(unistyleData);
@@ -96,17 +98,21 @@ jsi::Value HybridShadowRegistry::link(jsi::Runtime &rt, const jsi::Value &thisVa
 
     std::optional<folly::dynamic> initialScopedUpdate;
 
-    if (scopedTheme.has_value()) {
+    if (scopedTheme.has_value() || wasSuspended) {
         initialScopedUpdate = parser.parseStylesToShadowTreeStyles(rt, unistylesData);
     }
 
     registry.linkShadowNodeWithUnistyle(
         rt,
-        &shadowNodeWrapper->getFamily(),
+        shadowNodeWrapper->getFamilyShared(),
         unistylesData,
         std::move(initialScopedUpdate)
     );
 
+    if (wasSuspended) {
+        shadow::ShadowTreeManager::updateShadowTree(rt);
+    }
+
     return jsi::Value::undefined();
 }
 
@@ -165,9 +171,5 @@ jsi::Value HybridShadowRegistry::getScopedTheme(jsi::Runtime &rt, const jsi::Val
 }
 
 std::shared_ptr<const core::ShadowNode> HybridShadowRegistry::getShadowNodeFromRef(jsi::Runtime& rt, const jsi::Value& maybeRef) {
-#if REACT_NATIVE_VERSION_MINOR >= 81
     return Bridging<std::shared_ptr<const ShadowNode>>::fromJs(rt, maybeRef);
-#else
-    return shadowNodeFromValue(rt, maybeRef);
-#endif
 }

package/cxx/parser/Parser.cpp

@@ -1,5 +1,7 @@
 #include "Parser.h"
 #include "UnistyleWrapper.h"
+#include "BackgroundImageConverter.h"
+#include "TransformOriginConverter.h"
 #include <iomanip>
 #include <sstream>
 #include <react/renderer/css/CSSFilter.h>
@@ -442,8 +444,7 @@ void parser::Parser::rebuildShadowLeafUpdates(jsi::Runtime& rt, core::Dependency
             updates.emplace(shadowNode, std::move(rawProps));
         }
 
-        registry.trafficController.setUpdates(updates);
-        registry.trafficController.resumeUnistylesTraffic();
+        registry.queueShadowLeafUpdatesUnsafe(updates);
     });
 }
 
@@ -1072,6 +1073,50 @@ folly::dynamic parser::Parser::parseStylesToShadowTreeStyles(jsi::Runtime& rt, c
             rt,
             unistyleData->parsedStyle.value(),
             [this, &rt, &state, &convertedStyles](const std::string& propertyName, jsi::Value& propertyValue) {
+                if (converters::isBackgroundImagePropName(propertyName) && propertyValue.isString()) {
+                    auto maybeBackgroundImage = converters::parseBackgroundImageString(propertyValue.asString(rt).utf8(rt));
+
+                    if (maybeBackgroundImage.has_value()) {
+                        convertedStyles.setProperty(
+                            rt,
+                            propertyName.c_str(),
+                            jsi::valueFromDynamic(rt, maybeBackgroundImage.value())
+                        );
+
+                        return;
+                    }
+
+                    convertedStyles.setProperty(
+                        rt,
+                        propertyName.c_str(),
+                        propertyValue
+                    );
+
+                    return;
+                }
+
+                if (converters::isTransformOriginPropName(propertyName) && propertyValue.isString()) {
+                    auto maybeTransformOrigin = converters::parseTransformOriginString(propertyValue.asString(rt).utf8(rt));
+
+                    if (maybeTransformOrigin.has_value()) {
+                        convertedStyles.setProperty(
+                            rt,
+                            propertyName.c_str(),
+                            jsi::valueFromDynamic(rt, maybeTransformOrigin.value())
+                        );
+
+                        return;
+                    }
+
+                    convertedStyles.setProperty(
+                        rt,
+                        propertyName.c_str(),
+                        propertyValue
+                    );
+
+                    return;
+                }
+
                 if (this->isColor(propertyName)) {
                     if (propertyValue.isString()) {
                         convertedStyles.setProperty(

package/cxx/shadowTree/NativeProps.h

@@ -0,0 +1,44 @@
+#pragma once
+
+#include <folly/dynamic.h>
+#include <react/renderer/core/ShadowNodeFamily.h>
+#include <cxxreact/ReactNativeVersion.h>
+#include <memory>
+#include <mutex>
+
+// React Native reads ShadowNodeFamily::nativeProps_DEPRECATED from any thread
+// (eg. ShadowNode::clone during main thread layout) and since 0.86.1 guards every access with nativePropsMutex
+// we need to hold the same lock, otherwise mutating / replacing the folly::dynamic races with RN copying it
+#if REACT_NATIVE_VERSION_MINOR > 86 || (REACT_NATIVE_VERSION_MINOR == 86 && REACT_NATIVE_VERSION_PATCH >= 1)
+#define UNISTYLES_HAS_NATIVE_PROPS_MUTEX 1
+#else
+#define UNISTYLES_HAS_NATIVE_PROPS_MUTEX 0
+#endif
+
+namespace margelo::nitro::unistyles::shadow {
+
+using namespace facebook::react;
+
+inline void mergeNativeProps(const ShadowNodeFamily* family, const folly::dynamic& props) {
+#if UNISTYLES_HAS_NATIVE_PROPS_MUTEX
+    std::lock_guard<std::mutex> lock(family->nativePropsMutex);
+#endif
+
+    if (family->nativeProps_DEPRECATED && family->nativeProps_DEPRECATED->isObject()) {
+        family->nativeProps_DEPRECATED->update(props);
+
+        return;
+    }
+
+    family->nativeProps_DEPRECATED = std::make_unique<folly::dynamic>(props);
+}
+
+inline void resetNativeProps(const ShadowNodeFamily* family) {
+#if UNISTYLES_HAS_NATIVE_PROPS_MUTEX
+    std::lock_guard<std::mutex> lock(family->nativePropsMutex);
+#endif
+
+    family->nativeProps_DEPRECATED.reset();
+}
+
+}