react-native-unistyles 3.0.0-alpha.4 → 3.0.0-alpha.40

package/cxx/parser/Parser.h

@@ -17,36 +17,32 @@ 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, std::optional<UnistylesNativeMiniRuntime> maybeMiniRuntime);
+    void rebuildShadowLeafUpdates(jsi::Runtime& rt, core::DependencyMap& dependencyMap);
+    folly::dynamic parseStylesToShadowTreeStyles(jsi::Runtime& rt, const std::vector<std::shared_ptr<UnistyleData>>& unistyles);
+    void rebuildUnistyle(jsi::Runtime& rt, std::shared_ptr<StyleSheet> styleSheet, Unistyle::Shared unistyle, const Variants& variants, std::optional<std::vector<folly::dynamic>>);
 
 private:
-    void rebuildUnistyle(jsi::Runtime& rt, std::shared_ptr<StyleSheet> styleSheet, Unistyle::Shared unistyle);
-    jsi::Object unwrapStyleSheet(jsi::Runtime& rt, std::shared_ptr<StyleSheet> styleSheet);
-    jsi::Object parseFirstLevel(jsi::Runtime& rt, Unistyle::Shared unistyle, Variants& variants);
+    jsi::Object unwrapStyleSheet(jsi::Runtime& rt, std::shared_ptr<StyleSheet> styleSheet, std::optional<UnistylesNativeMiniRuntime>);
+    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,71 @@
+#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() {
+        this->_canCommit = false;
+    }
+
+    inline void resumeUnistylesTraffic() {
+        this->_canCommit = true;
+    }
+
+    inline shadow::ShadowLeafUpdates& getUpdates() {
+        std::lock_guard<std::mutex> lock(_mutex);
+ 
+        return _unistylesUpdates;
+    }
+
+    inline void setUpdates(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));
+        });
+    }
+    
+    inline void removeShadowNode(const ShadowNodeFamily* shadowNodeFamily) {
+        std::lock_guard<std::mutex> lock(_mutex);
+        
+        if (_unistylesUpdates.contains(shadowNodeFamily)) {
+            _unistylesUpdates.erase(shadowNodeFamily);
+        }
+    }
+
+    inline void restore() {
+        std::lock_guard<std::mutex> lock(_mutex);
+        
+        _unistylesUpdates = {};
+        _canCommit = false;
+    }
+
+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,29 @@ 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) {
-    auto& uiManager = UIManagerBinding::getBinding(rt)->getUIManager();
-    const auto &shadowTreeRegistry = uiManager.getShadowTreeRegistry();
+void shadow::ShadowTreeManager::updateShadowTree(const ShadowTreeRegistry& shadowTreeRegistry) {
+    auto& registry = core::UnistylesRegistry::get();
+    auto updates = registry.trafficController.getUpdates();
 
-    shadowTreeRegistry.enumerate([&updates, &rt](const ShadowTree& shadowTree, bool& stop){
+    if (updates.empty()) {
+        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 +39,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 +86,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 +96,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 +109,16 @@ ShadowNode::Unshared shadow::ShadowTreeManager::cloneShadowTree(jsi::Runtime& rt
             *shadowNode.getContextContainer()
         };
 
-        updatedProps = shadowNode.getProps();
+        #ifdef ANDROID
+            auto safeProps = rawPropsIt->second == nullptr ? folly::dynamic::object() : rawPropsIt->second;
+            auto newProps = folly::dynamic::merge(shadowNode.getProps()->rawProps, safeProps);
+        #else
+            auto newProps = rawPropsIt->second;
+        #endif
 
-        // 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(newProps));
     }
 
     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(const ShadowTreeRegistry& shadowTreeRegistry);
     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>, UnistylesNativeMiniRuntime) -> Void
+typealias CxxImeListener = (UnistylesNativeMiniRuntime) -> 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,15 +290,13 @@ class NativeIOSPlatform: HybridNativePlatformSpec {
     func getNavigationBarDimensions() -> Dimensions {
         return Dimensions(width: 0, height: 0);
     }
-    
+
     func setStatusBarHidden(isHidden: Bool) throws {
         self.onWindowChange(Notification(name: NSNotification.Name("RCTWindowFrameDidChangeNotification")))
     }
 
     // not implemented for iOS as there are no such APIs
-    func setNavigationBarBackgroundColor(color: Double) throws {}
     func setNavigationBarHidden(isHidden: Bool) throws {}
-    func setStatusBarBackgroundColor(color: Double) throws {}
 
     // implemented from JS
     func setImmersiveMode(isEnabled: Bool) throws {}

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.miniRuntime?.insets.ime = keyboardAnimation.animatedImeInset
+        self.emitImeEvent(updatedMiniRuntime: self.miniRuntime!)
+
+        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 ((UnistylesNativeMiniRuntime) -> Void)) throws {
+        self.imeListeners.append(callback)
     }
 
-    func emitCxxEvent(dependencies: Array<UnistyleDependency>) {
-        self.listeners.forEach { $0(dependencies) }
+    func emitCxxEvent(dependencies: Array<UnistyleDependency>, updatedMiniRuntime: UnistylesNativeMiniRuntime) {
+        self.dependencyListeners.forEach { $0(dependencies, updatedMiniRuntime) }
+    }
+
+    func emitImeEvent(updatedMiniRuntime: UnistylesNativeMiniRuntime) {
+        self.imeListeners.forEach { $0(updatedMiniRuntime) }
+    }
+    
+    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, updatedMiniRuntime: newMiniRuntime)
         }
     }
 }

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,19 @@
 #pragma once
 
+#ifndef RCT_NEW_ARCH_ENABLED
+    #error "Unistyles 3.0 requires your project to have New Architecture enabled."
+#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>
+#import <ReactCommon/RCTTurboModuleWithJSIBindings.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/components/Display.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Display = void 0;
+var _useMedia = require("./useMedia");
+const Display = ({
+  children,
+  ...props
+}) => {
+  const {
+    isVisible
+  } = (0, _useMedia.useMedia)(props);
+  return isVisible ? children : null;
+};
+exports.Display = Display;
+//# sourceMappingURL=Display.js.map

package/lib/commonjs/components/Display.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_useMedia","require","Display","children","props","isVisible","useMedia","exports"],"sourceRoot":"../../../src","sources":["components/Display.tsx"],"mappings":";;;;;;AACA,IAAAA,SAAA,GAAAC,OAAA;AAIO,MAAMC,OAA8C,GAAGA,CAAC;EAAEC,QAAQ;EAAE,GAAGC;AAAM,CAAC,KAAK;EACtF,MAAM;IAAEC;EAAU,CAAC,GAAG,IAAAC,kBAAQ,EAACF,KAAK,CAAC;EAErC,OAAOC,SAAS,GACVF,QAAQ,GACR,IAAI;AACd,CAAC;AAAAI,OAAA,CAAAL,OAAA,GAAAA,OAAA","ignoreList":[]}

package/lib/commonjs/components/Hide.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Hide = void 0;
+var _useMedia = require("./useMedia");
+const Hide = ({
+  children,
+  ...props
+}) => {
+  const {
+    isVisible
+  } = (0, _useMedia.useMedia)(props);
+  return !isVisible ? children : null;
+};
+exports.Hide = Hide;
+//# sourceMappingURL=Hide.js.map

package/lib/commonjs/components/Hide.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_useMedia","require","Hide","children","props","isVisible","useMedia","exports"],"sourceRoot":"../../../src","sources":["components/Hide.tsx"],"mappings":";;;;;;AACA,IAAAA,SAAA,GAAAC,OAAA;AAIO,MAAMC,IAAwC,GAAGA,CAAC;EAAEC,QAAQ;EAAE,GAAGC;AAAM,CAAC,KAAK;EAChF,MAAM;IAAEC;EAAU,CAAC,GAAG,IAAAC,kBAAQ,EAACF,KAAK,CAAC;EAErC,OAAO,CAACC,SAAS,GACXF,QAAQ,GACR,IAAI;AACd,CAAC;AAAAI,OAAA,CAAAL,IAAA,GAAAA,IAAA","ignoreList":[]}

package/lib/commonjs/components/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Display", {
+  enumerable: true,
+  get: function () {
+    return _Display.Display;
+  }
+});
+Object.defineProperty(exports, "Hide", {
+  enumerable: true,
+  get: function () {
+    return _Hide.Hide;
+  }
+});
+var _Hide = require("./Hide");
+var _Display = require("./Display");
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_Hide","require","_Display"],"sourceRoot":"../../../src","sources":["components/index.ts"],"mappings":";;;;;;;;;;;;;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA","ignoreList":[]}