react-native-unistyles 3.0.0-alpha.3 → 3.0.0-alpha.31

package/cxx/parser/Parser.h

@@ -17,36 +17,33 @@ using namespace facebook;
 using namespace margelo::nitro::unistyles::core;
 
 using Variants = std::vector<std::pair<std::string, std::string>>;
-using DependencyMap = std::unordered_map<
-    std::shared_ptr<core::StyleSheet>,
-    std::unordered_map<const ShadowNodeFamily*, std::vector<core::Unistyle::Shared>>
->;
 
 struct Parser {
     Parser(std::shared_ptr<HybridUnistylesRuntime> unistylesRuntime): _unistylesRuntime{unistylesRuntime} {}
 
     void buildUnistyles(jsi::Runtime& rt, std::shared_ptr<StyleSheet> styleSheet);
     void parseUnistyles(jsi::Runtime& rt, std::shared_ptr<StyleSheet> styleSheet);
-    Variants variantsToPairs(jsi::Runtime& rt, jsi::Object&& variants);
-    void rebuildUnistylesWithVariants(jsi::Runtime& rt, std::shared_ptr<StyleSheet> styleSheet);
-    void rebuildUnistylesInDependencyMap(jsi::Runtime& rt, DependencyMap& dependencyMap);
-    shadow::ShadowLeafUpdates dependencyMapToShadowLeafUpdates(DependencyMap& dependencyMap);
+    void rebuildUnistylesWithVariants(jsi::Runtime& rt, std::shared_ptr<StyleSheet> styleSheet, Variants& variants);
+    void rebuildUnistylesInDependencyMap(jsi::Runtime& rt, core::DependencyMap& dependencyMap, std::vector<std::shared_ptr<core::StyleSheet>> styleSheets);
+    void rebuildShadowLeafUpdates(core::DependencyMap& dependencyMap);
+    folly::dynamic parseUnistyleToShadowTreeStyles(jsi::Runtime& rt, const Unistyle::Shared unistyle);
+    folly::dynamic parseStylesToShadowTreeStyles(jsi::Runtime& rt, const std::vector<std::shared_ptr<UnistyleData>>& unistyles);
 
 private:
-    void rebuildUnistyle(jsi::Runtime& rt, std::shared_ptr<StyleSheet> styleSheet, Unistyle::Shared unistyle);
+    void rebuildUnistyle(jsi::Runtime& rt, std::shared_ptr<StyleSheet> styleSheet, Unistyle::Shared unistyle, const Variants& variants, std::optional<std::vector<folly::dynamic>>);
     jsi::Object unwrapStyleSheet(jsi::Runtime& rt, std::shared_ptr<StyleSheet> styleSheet);
-    jsi::Object parseFirstLevel(jsi::Runtime& rt, Unistyle::Shared unistyle, Variants& variants);
+    jsi::Object parseFirstLevel(jsi::Runtime& rt, Unistyle::Shared unistyle, std::optional<Variants> variants);
     jsi::Value parseSecondLevel(jsi::Runtime& rt, Unistyle::Shared unistyle, jsi::Value& nestedObject);
-    jsi::Function createDynamicFunctionProxy(jsi::Runtime& rt, Unistyle::Shared unistyle, Variants& variants);
-    std::vector<folly::dynamic> parseDynamicFunctionArguments(jsi::Runtime& rt, size_t count, const jsi::Value* arguments);
+    jsi::Function createDynamicFunctionProxy(jsi::Runtime& rt, Unistyle::Shared unistyle);
     std::vector<UnistyleDependency> parseDependencies(jsi::Runtime &rt, jsi::Object&& dependencies);
     jsi::Value parseTransforms(jsi::Runtime& rt, Unistyle::Shared unistyle, jsi::Object& obj);
+    jsi::Value parseBoxShadow(jsi::Runtime& rt, Unistyle::Shared unistyle, jsi::Object& obj);
+    jsi::Value parseFilters(jsi::Runtime& rt, Unistyle::Shared unistyle, jsi::Object& obj);
     jsi::Value getValueFromBreakpoints(jsi::Runtime& rt, Unistyle::Shared unistyle, jsi::Object& obj);
     jsi::Object parseVariants(jsi::Runtime& rt, Unistyle::Shared unistyle, jsi::Object& obj, Variants& variants);
-    jsi::Value getStylesForVariant(jsi::Runtime& rt, jsi::Object&& groupValue, std::optional<std::string> selectedVariant);
+    jsi::Value getStylesForVariant(jsi::Runtime& rt, const std::string groupName, jsi::Object&& groupValue, std::optional<std::string> selectedVariant, Variants& variants);
     jsi::Object parseCompoundVariants(jsi::Runtime& rt, Unistyle::Shared unistyle, jsi::Object& obj, Variants& variants);
     bool shouldApplyCompoundVariants(jsi::Runtime& rt, const Variants& variants, jsi::Object& compoundVariant);
-    RawProps parseStylesToShadowTreeStyles(jsi::Runtime& rt, jsi::Object& parsedStyles);
     bool isColor(const std::string& propertyName);
 
     std::shared_ptr<HybridUnistylesRuntime> _unistylesRuntime;

package/cxx/shadowTree/ShadowLeafUpdate.h

@@ -1,6 +1,7 @@
 #pragma once
 
 #include <jsi/jsi.h>
+#include <folly/dynamic.h>
 #include <react/renderer/uimanager/UIManager.h>
 
 namespace margelo::nitro::unistyles::shadow {
@@ -8,6 +9,6 @@ namespace margelo::nitro::unistyles::shadow {
 using namespace facebook;
 using namespace facebook::react;
 
-using ShadowLeafUpdates = std::unordered_map<const ShadowNodeFamily*, std::vector<RawProps>>;
+using ShadowLeafUpdates = std::unordered_map<const ShadowNodeFamily*, folly::dynamic>;
 
 }

package/cxx/shadowTree/ShadowTrafficController.h

@@ -0,0 +1,60 @@
+#pragma once
+
+#import "mutex"
+#import "ShadowLeafUpdate.h"
+
+namespace margelo::nitro::unistyles::shadow {
+
+// Like a traffic officer managing a jam, this struct ensures everything
+// is synchronized within a set timeframe, controlling flow and preventing chaos.
+struct ShadowTrafficController {
+    inline bool shouldStop() {
+        return !_canCommit;
+    }
+
+    inline void stopUnistylesTraffic() {
+        std::lock_guard<std::mutex> lock(_mutex);
+
+        this->_canCommit = false;
+    }
+
+    inline void resumeUnistylesTraffic() {
+        std::lock_guard<std::mutex> lock(_mutex);
+
+        this->_canCommit = true;
+    }
+
+    inline shadow::ShadowLeafUpdates& getUpdates() {
+        std::lock_guard<std::mutex> lock(_mutex);
+
+        return _unistylesUpdates;
+    }
+
+    inline void setUpdates(jsi::Runtime& rt, shadow::ShadowLeafUpdates& newUpdates) {
+        std::lock_guard<std::mutex> lock(_mutex);
+
+        auto& targetUpdates = _unistylesUpdates;
+
+        // this is important as overriding updates may skip some interim changes
+        // Unistyles emits different events so this will make sure that everything is synced
+        std::for_each(newUpdates.begin(), newUpdates.end(), [&targetUpdates](auto& pair){
+            if (targetUpdates.contains(pair.first)) {
+                targetUpdates[pair.first] = std::move(pair.second);
+
+                return;
+            }
+
+            targetUpdates.emplace(pair.first, std::move(pair.second));
+        });
+    }
+
+private:
+    std::atomic<bool> _canCommit = false;
+    shadow::ShadowLeafUpdates _unistylesUpdates{};
+
+    // this struct should be accessed in thread-safe manner. Otherwise shadow tree updates
+    // from different threads will break it
+    std::mutex _mutex;
+};
+
+}

package/cxx/shadowTree/ShadowTreeManager.cpp

@@ -6,26 +6,31 @@ using namespace facebook;
 
 using AffectedNodes = std::unordered_map<const ShadowNodeFamily*, std::unordered_set<int>>;
 
-void shadow::ShadowTreeManager::updateShadowTree(facebook::jsi::Runtime& rt, shadow::ShadowLeafUpdates& updates) {
+void shadow::ShadowTreeManager::updateShadowTree(facebook::jsi::Runtime& rt) {
+    auto& registry = core::UnistylesRegistry::get();
     auto& uiManager = UIManagerBinding::getBinding(rt)->getUIManager();
     const auto &shadowTreeRegistry = uiManager.getShadowTreeRegistry();
+    auto updates = registry.trafficController.getUpdates();
 
-    shadowTreeRegistry.enumerate([&updates, &rt](const ShadowTree& shadowTree, bool& stop){
+    if (updates.size() == 0) {
+        return;
+    }
+
+    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 = [&](const RootShadowNode& oldRootShadowNode) {
             auto affectedNodes = shadow::ShadowTreeManager::findAffectedNodes(oldRootShadowNode, updates);
             auto newRootNode = std::static_pointer_cast<RootShadowNode>(shadow::ShadowTreeManager::cloneShadowTree(
-                rt,
                 oldRootShadowNode,
                 updates,
                 affectedNodes
             ));
-            
-            // set unistyles commit trait
+
+            // set unistyles trait
             auto unistylesRootNode = std::reinterpret_pointer_cast<core::UnistylesCommitShadowNode>(newRootNode);
-            
+
             unistylesRootNode->addUnistylesCommitTrait();
 
             return newRootNode;
@@ -36,7 +41,7 @@ void shadow::ShadowTreeManager::updateShadowTree(facebook::jsi::Runtime& rt, sha
         // 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
@@ -83,7 +88,7 @@ AffectedNodes shadow::ShadowTreeManager::findAffectedNodes(const RootShadowNode&
 
 // based on Reanimated algorithm
 // clone affected nodes recursively, inject props and commit tree
-ShadowNode::Unshared shadow::ShadowTreeManager::cloneShadowTree(jsi::Runtime& rt, const ShadowNode &shadowNode, ShadowLeafUpdates& updates, AffectedNodes& affectedNodes) {
+ShadowNode::Unshared shadow::ShadowTreeManager::cloneShadowTree(const ShadowNode &shadowNode, ShadowLeafUpdates& updates, AffectedNodes& affectedNodes) {
     const auto family = &shadowNode.getFamily();
     const auto rawPropsIt = updates.find(family);
     const auto childrenIt = affectedNodes.find(family);
@@ -93,7 +98,7 @@ ShadowNode::Unshared shadow::ShadowTreeManager::cloneShadowTree(jsi::Runtime& rt
     if (childrenIt != affectedNodes.end()) {
         // get all indexes of children and clone it recursively
         for (const auto index : childrenIt->second) {
-            children[index] = cloneShadowTree(rt, *children[index], updates, affectedNodes);
+            children[index] = cloneShadowTree(*children[index], updates, affectedNodes);
         }
     }
 
@@ -106,14 +111,9 @@ ShadowNode::Unshared shadow::ShadowTreeManager::cloneShadowTree(jsi::Runtime& rt
             *shadowNode.getContextContainer()
         };
 
-        updatedProps = shadowNode.getProps();
-
-        // we may have multiple Unistyles for single node, so we must apply them all
-        for (const auto& props: rawPropsIt->second) {
-            updatedProps = shadowNode
-                .getComponentDescriptor()
-                .cloneProps(propsParserContext, updatedProps, RawProps(props));
-        }
+        updatedProps = shadowNode
+            .getComponentDescriptor()
+            .cloneProps(propsParserContext, shadowNode.getProps(), RawProps(rawPropsIt->second));
     }
 
     return shadowNode.clone({

package/cxx/shadowTree/ShadowTreeManager.h

@@ -6,6 +6,7 @@
 #include <ranges>
 #include "ShadowLeafUpdate.h"
 #include "UnistylesCommitShadowNode.h"
+#include "UnistylesRegistry.h"
 
 namespace margelo::nitro::unistyles::shadow {
 
@@ -15,9 +16,9 @@ using namespace facebook;
 using AffectedNodes = std::unordered_map<const ShadowNodeFamily *, std::unordered_set<int>>;
 
 struct ShadowTreeManager {
-    static void updateShadowTree(jsi::Runtime& rt, shadow::ShadowLeafUpdates& updates);
+    static void updateShadowTree(jsi::Runtime& rt);
     static AffectedNodes findAffectedNodes(const RootShadowNode& rootNode, ShadowLeafUpdates& updates);
-    static ShadowNode::Unshared cloneShadowTree(jsi::Runtime& rt, const ShadowNode &shadowNode, ShadowLeafUpdates& updates, AffectedNodes& affectedNodes);
+    static ShadowNode::Unshared cloneShadowTree(const ShadowNode &shadowNode, ShadowLeafUpdates& updates, AffectedNodes& affectedNodes);
 };
 
 }

package/ios/Equatable.swift

@@ -36,7 +36,8 @@ extension UnistylesNativeMiniRuntime {
             dependencies.append(UnistyleDependency.breakpoints)
         }
 
-        if (lhs.orientation != rhs.orientation) {
+        // no need to check isLandscape, as it's always opposite
+        if (lhs.isPortrait != rhs.isPortrait) {
             dependencies.append(UnistyleDependency.orientation)
         }
 

package/ios/NativePlatform+ios.swift

@@ -1,14 +1,19 @@
 #if os(iOS)
 
 import Foundation
+import Combine
 import NitroModules
 
-typealias CxxListener = (Array<UnistyleDependency>) -> Void
+typealias CxxDependencyListener = (Array<UnistyleDependency>) -> Void
+typealias CxxImeListener = () -> Void
 
 class NativeIOSPlatform: HybridNativePlatformSpec {
     var miniRuntime: UnistylesNativeMiniRuntime?
+    var keyboardAnimation = KeyboardAnimation()
+    var cancellables = Set<AnyCancellable>()
 
-    var listeners: Array<CxxListener> = []
+    var dependencyListeners: Array<CxxDependencyListener> = []
+    var imeListeners: Array<CxxImeListener> = []
     var hybridContext = margelo.nitro.HybridContext()
     var memorySize: Int {
         return getSizeOf(self)
@@ -18,10 +23,12 @@ class NativeIOSPlatform: HybridNativePlatformSpec {
         self.miniRuntime = self.buildMiniRuntime()
 
         setupPlatformListeners()
+        setupKeyboardListeners()
     }
 
     deinit {
         removePlatformListeners()
+        removeKeyboardListeners()
     }
 
     func getMiniRuntime() -> UnistylesNativeMiniRuntime {
@@ -29,6 +36,8 @@ class NativeIOSPlatform: HybridNativePlatformSpec {
     }
 
     func buildMiniRuntime() -> UnistylesNativeMiniRuntime {
+        let orientation = self.getOrientation()
+
         return UnistylesNativeMiniRuntime(
             colorScheme: self.getColorScheme(),
             screen: self.getScreenDimensions(),
@@ -39,7 +48,8 @@ class NativeIOSPlatform: HybridNativePlatformSpec {
             rtl: self.getPrefersRtlDirection(),
             statusBar: self.getStatusBarDimensions(),
             navigationBar: self.getNavigationBarDimensions(),
-            orientation: self.getOrientation()
+            isPortrait: orientation == .portrait,
+            isLandscape: orientation == .landscape
         )
     }
 
@@ -188,7 +198,13 @@ class NativeIOSPlatform: HybridNativePlatformSpec {
 
             let safeArea = window.safeAreaInsets
 
-            return Insets(top: safeArea.top, bottom: safeArea.bottom, left: safeArea.left, right: safeArea.right, ime: 0)
+            return Insets(
+                top: safeArea.top,
+                bottom: safeArea.bottom,
+                left: safeArea.left,
+                right: safeArea.right,
+                ime: keyboardAnimation.animatedImeInset
+            )
         }
 
         if Thread.isMainThread {
@@ -274,7 +290,7 @@ class NativeIOSPlatform: HybridNativePlatformSpec {
     func getNavigationBarDimensions() -> Dimensions {
         return Dimensions(width: 0, height: 0);
     }
-    
+
     func setStatusBarHidden(isHidden: Bool) throws {
         self.onWindowChange(Notification(name: NSNotification.Name("RCTWindowFrameDidChangeNotification")))
     }

package/ios/NativePlatform+keyboard.swift

@@ -0,0 +1,83 @@
+import Foundation
+
+struct KeyboardAnimation {
+    var animatedImeInset: CGFloat = 0
+    var keyboardHeight: CGFloat = 0
+    var animationDuration: Double = 0
+    var displayLink: CADisplayLink?
+    var startTime: CFTimeInterval = 0
+    var from: CGFloat = 0
+    var to: CGFloat = 0
+}
+
+extension NativeIOSPlatform {
+    func setupKeyboardListeners() {
+        NotificationCenter.default.addObserver(self, selector: #selector(onKeyboardWillShow), name: UIResponder.keyboardWillShowNotification, object: nil)
+        NotificationCenter.default.addObserver(self, selector: #selector(onKeyboardWillHide), name: UIResponder.keyboardWillHideNotification, object: nil)
+    }
+
+    func removeKeyboardListeners() {
+        keyboardAnimation.displayLink?.invalidate()
+
+        NotificationCenter.default.removeObserver(
+             self,
+             name: UIResponder.keyboardWillShowNotification,
+             object: nil
+         )
+         NotificationCenter.default.removeObserver(
+             self,
+             name: UIResponder.keyboardWillHideNotification,
+             object: nil
+         )
+    }
+
+    @objc func onKeyboardWillShow(notification: NSNotification) {
+        guard let frame = notification.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? CGRect else { return }
+        guard let duration = notification.userInfo?[UIResponder.keyboardAnimationDurationUserInfoKey] as? Double else { return }
+
+        keyboardAnimation.keyboardHeight = frame.height
+        keyboardAnimation.animationDuration = duration
+
+        startAnimation(toValue: keyboardAnimation.keyboardHeight)
+    }
+
+    @objc func onKeyboardWillHide(notification: NSNotification) {
+        guard let duration = notification.userInfo?[UIResponder.keyboardAnimationDurationUserInfoKey] as? Double else { return }
+
+        keyboardAnimation.animationDuration = duration
+
+        startAnimation(toValue: 0)
+    }
+
+    func startAnimation(toValue targetValue: CGFloat) {
+        keyboardAnimation.startTime = CACurrentMediaTime()
+        keyboardAnimation.displayLink?.invalidate()
+
+        keyboardAnimation.from = keyboardAnimation.animatedImeInset
+        keyboardAnimation.to = targetValue
+
+        if (keyboardAnimation.from == keyboardAnimation.to) {
+            return
+        }
+
+        keyboardAnimation.displayLink = CADisplayLink(target: self, selector: #selector(updateAnimation))
+        keyboardAnimation.displayLink?.add(to: .main, forMode: .default)
+    }
+
+    @objc func updateAnimation() {
+        let elapsedTime = CACurrentMediaTime() - keyboardAnimation.startTime
+        let linearProgress = min(elapsedTime / keyboardAnimation.animationDuration, 1)
+        let easedProgress = 1 - pow(1 - linearProgress, 3)
+
+        // Interpolate between 'from' and 'to'
+        keyboardAnimation.animatedImeInset = keyboardAnimation.from + (keyboardAnimation.to - keyboardAnimation.from) * CGFloat(easedProgress)
+
+        self.emitImeEvent()
+        self.miniRuntime?.insets.ime = keyboardAnimation.animatedImeInset
+
+        if linearProgress >= 1 {
+            keyboardAnimation.displayLink?.invalidate()
+            keyboardAnimation.displayLink = nil
+        }
+    }
+}

package/ios/NativePlatformListener+ios.swift

@@ -2,40 +2,53 @@ import Foundation
 
 extension NativeIOSPlatform {
     func setupPlatformListeners() {
-        NotificationCenter.default.addObserver(
-            self,
-            selector: #selector(onWindowChange(_:)),
-            name: NSNotification.Name("RCTWindowFrameDidChangeNotification"),
-            object: nil
-        )
+        NotificationCenter.default.publisher(for: NSNotification.Name("RCTWindowFrameDidChangeNotification"))
+            // add small delay (10ms) to make sure all values are up ot date
+            // we MUST call it on current thread, otherwise random crashes occurs
+            .delay(for: .milliseconds(10), scheduler: RunLoop.current)
+            .sink { [weak self] notification in
+                self?.onWindowChange(notification)
+            }
+            .store(in: &cancellables)
     }
 
     func removePlatformListeners() {
-        NotificationCenter.default.removeObserver(self, name: NSNotification.Name("RCTWindowFrameDidChangeNotification"), object: nil)
+        self.unregisterPlatformListeners()
+    }
+
+    func registerPlatformListener(callback: @escaping (CxxDependencyListener)) throws {
+        self.dependencyListeners.append(callback)
     }
 
-    func registerPlatformListener(callback: @escaping (CxxListener)) throws {
-        listeners.append(callback)
+    func registerImeListener(callback: @escaping (() -> Void)) throws {
+        self.imeListeners.append(callback)
     }
 
     func emitCxxEvent(dependencies: Array<UnistyleDependency>) {
-        self.listeners.forEach { $0(dependencies) }
+        self.dependencyListeners.forEach { $0(dependencies) }
+    }
+
+    func emitImeEvent() {
+        self.imeListeners.forEach { $0() }
+    }
+    
+    func unregisterPlatformListeners() {
+        cancellables.removeAll()
+        dependencyListeners.removeAll()
+        imeListeners.removeAll()
     }
 
     @objc func onWindowChange(_ notification: Notification) {
-        // add small delay (10ms) to make sure all values are up ot date
-        DispatchQueue.main.asyncAfter(deadline: .now() + 0.01) {
-            guard let currentMiniRuntime = self.miniRuntime else {
-                return
-            }
-            
-            let newMiniRuntime = self.buildMiniRuntime()
-            let changedDependencies = UnistylesNativeMiniRuntime.diff(lhs: currentMiniRuntime, rhs: newMiniRuntime)
-  
-            if (changedDependencies.count > 0) {
-                self.miniRuntime = newMiniRuntime
-                self.emitCxxEvent(dependencies: changedDependencies)
-            }
+        guard let currentMiniRuntime = self.miniRuntime else {
+            return
+        }
+
+        let newMiniRuntime = self.buildMiniRuntime()
+        let changedDependencies = UnistylesNativeMiniRuntime.diff(lhs: currentMiniRuntime, rhs: newMiniRuntime)
+
+        if (changedDependencies.count > 0) {
+            self.miniRuntime = newMiniRuntime
+            self.emitCxxEvent(dependencies: changedDependencies)
         }
     }
 }

package/ios/Unistyles.h

@@ -1,3 +1,4 @@
 #pragma once
 
+#import "jsi/jsi.h"
 #import <React/RCTUtils.h>

package/ios/UnistylesModuleOnLoad.h

@@ -1,13 +1,24 @@
 #pragma once
 
+#ifndef RCT_NEW_ARCH_ENABLED
+    #error "Unistyles 3.0 requires your project to have New Architecture enabled."
+#endif
+
+#if __has_include(<ReactCommon/RCTTurboModuleWithJSIBindings.h>)
+    #import <ReactCommon/RCTTurboModuleWithJSIBindings.h>
+#else
+    #error "Unistyles 3.0 requires your project to use React Native 0.75 or higher."
+#endif
+
 #import <React/RCTEventEmitter.h>
-#import <ReactCommon/RCTTurboModuleWithJSIBindings.h>
 #import "TurboUnistyles/TurboUnistyles.h"
 #import <React/RCTSurfacePresenter.h>
 #import <React/RCTScheduler.h>
+#import <React/RCTRuntimeExecutorModule.h>
+#import <ReactCommon/RCTRuntimeExecutor.h>
 
 @interface UnistylesModule: RCTEventEmitter<NativeTurboUnistylesSpec>
 @end
 
-@interface UnistylesModule()<RCTTurboModuleWithJSIBindings>
+@interface UnistylesModule()<RCTTurboModuleWithJSIBindings, RCTRuntimeExecutorModule>
 @end

package/ios/UnistylesModuleOnLoad.mm

@@ -11,6 +11,7 @@ using namespace margelo::nitro;
 RCT_EXPORT_MODULE(Unistyles)
 
 __weak RCTSurfacePresenter* _surfacePresenter;
+@synthesize runtimeExecutor = _runtimeExecutor;
 
 + (BOOL)requiresMainQueueSetup {
     return YES;
@@ -35,8 +36,15 @@ __weak RCTSurfacePresenter* _surfacePresenter;
 }
 
 - (void)createHybrids:(jsi::Runtime&)rt {
+    auto runOnJSThread = ([executor = _runtimeExecutor](std::function<void(jsi::Runtime& rt)> &&callback) {
+        __block auto objcCallback = callback;
+
+        [executor execute:^(jsi::Runtime& rt){
+            objcCallback(rt);
+        }];
+    });
     auto nativePlatform = Unistyles::NativePlatform::create();
-    auto unistylesRuntime = std::make_shared<HybridUnistylesRuntime>(nativePlatform, rt);
+    auto unistylesRuntime = std::make_shared<HybridUnistylesRuntime>(nativePlatform, rt, runOnJSThread);
     auto uiManager = [_surfacePresenter scheduler].uiManager;
     auto styleSheet = std::make_shared<HybridStyleSheet>(unistylesRuntime, uiManager);
 

package/lib/commonjs/core/createUnistylesComponent.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createUnistylesComponent = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const createUnistylesComponent = (Component, _) => {
+  return props => {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
+      ...props
+    });
+  };
+};
+exports.createUnistylesComponent = createUnistylesComponent;
+//# sourceMappingURL=createUnistylesComponent.js.map

package/lib/commonjs/core/createUnistylesComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_jsxRuntime","e","__esModule","default","createUnistylesComponent","Component","_","props","jsx","exports"],"sourceRoot":"../../../src","sources":["core/createUnistylesComponent.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAsE,IAAAC,WAAA,GAAAD,OAAA;AAAA,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAK/D,MAAMG,wBAAwB,GAAGA,CAA+BC,SAAY,EAAEC,CAAc,KAAK;EACpG,OAAQC,KAAwB,IAAK;IACjC,oBAAO,IAAAP,WAAA,CAAAQ,GAAA,EAACH,SAAS;MAAA,GAAKE;IAAK,CAAG,CAAC;EACnC,CAAC;AACL,CAAC;AAAAE,OAAA,CAAAL,wBAAA,GAAAA,wBAAA","ignoreList":[]}

package/lib/commonjs/core/createUnistylesComponent.native.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createUnistylesComponent = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _specs = require("../specs");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const createUnistylesComponent = (Component, mappings) => {
+  return props => {
+    const [theme, setTheme] = (0, _react.useState)(_specs.UnistylesRuntime.getTheme());
+    const [, setRt] = (0, _react.useState)(0);
+    (0, _react.useEffect)(() => {
+      const removeChangeListener = _specs.StyleSheet.addChangeListener(dependencies => {
+        const componentDependencies = props.style?.uni__dependencies || mappings(theme).style?.uni__dependencies;
+        if (dependencies.includes(_specs.UnistyleDependency.Theme) && (!componentDependencies || componentDependencies.includes(_specs.UnistyleDependency.Theme))) {
+          setTheme(_specs.UnistylesRuntime.getTheme());
+        }
+        if (dependencies.some(dependency => dependency >= 2) && (!componentDependencies || componentDependencies.some(dependency => dependency >= 2))) {
+          setRt(prevState => prevState + 1);
+        }
+      });
+      return () => {
+        removeChangeListener();
+      };
+    }, []);
+    const mergedProps = {
+      ...mappings(theme)
+    };
+    Object.keys(props).forEach(key => {
+      if (key in mergedProps) {
+        mergedProps[key] = Object.assign(props[key], mergedProps[key]);
+        return;
+      }
+      mergedProps[key] = props[key];
+    });
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
+      ...mergedProps
+    });
+  };
+};
+exports.createUnistylesComponent = createUnistylesComponent;
+//# sourceMappingURL=createUnistylesComponent.native.js.map

package/lib/commonjs/core/createUnistylesComponent.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_specs","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","createUnistylesComponent","Component","mappings","props","theme","setTheme","useState","UnistylesRuntime","getTheme","setRt","useEffect","removeChangeListener","StyleSheet","addChangeListener","dependencies","componentDependencies","style","uni__dependencies","includes","UnistyleDependency","Theme","some","dependency","prevState","mergedProps","keys","forEach","key","assign","jsx","exports"],"sourceRoot":"../../../src","sources":["core/createUnistylesComponent.native.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/core/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "createUnistylesComponent", {
+  enumerable: true,
+  get: function () {
+    return _createUnistylesComponent.createUnistylesComponent;
+  }
+});
+Object.defineProperty(exports, "useBreakpoint", {
+  enumerable: true,
+  get: function () {
+    return _useBreakpoint.useBreakpoint;
+  }
+});
+Object.defineProperty(exports, "useTheme", {
+  enumerable: true,
+  get: function () {
+    return _useTheme.useTheme;
+  }
+});
+var _useBreakpoint = require("./useBreakpoint");
+var _useTheme = require("./useTheme");
+var _createUnistylesComponent = require("./createUnistylesComponent");
+//# sourceMappingURL=index.js.map

package/lib/commonjs/core/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_useBreakpoint","require","_useTheme","_createUnistylesComponent"],"sourceRoot":"../../../src","sources":["core/index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,cAAA,GAAAC,OAAA;AACA,IAAAC,SAAA,GAAAD,OAAA;AACA,IAAAE,yBAAA,GAAAF,OAAA","ignoreList":[]}