react-native-unistyles 3.5.3 → 3.7.0

package/cxx/hybridObjects/HybridShadowRegistry.cpp

@@ -1,4 +1,5 @@
 #include "HybridShadowRegistry.h"
+#include "PerformanceTracing.h"
 
 using namespace margelo::nitro::unistyles;
 using namespace facebook::react;
@@ -182,6 +183,8 @@ void HybridShadowRegistry::scheduleShadowTreeUpdate(jsi::Runtime& rt) {
                 return jsi::Value::undefined();
             }
 
+            UNISTYLES_TRACE_SECTION("updateShadowTree");
+
             shadow::ShadowTreeManager::updateShadowTree(rt);
 
             return jsi::Value::undefined();
@@ -225,6 +228,8 @@ jsi::Value HybridShadowRegistry::flush(jsi::Runtime &rt, const jsi::Value &thisV
         return jsi::Value::undefined();
     }
 
+    UNISTYLES_TRACE_SECTION("flush");
+
     shadow::ShadowTreeManager::updateShadowTree(rt);
 
     return jsi::Value::undefined();
@@ -265,6 +270,11 @@ jsi::Value HybridShadowRegistry::verify(jsi::Runtime &rt, const jsi::Value &this
 
 // the fibers React created the committed nodes with (weak, null once collected)
 jsi::Value HybridShadowRegistry::takeCommittedInstanceHandles(jsi::Runtime &rt, const jsi::Value &thisValue, const jsi::Value *args, size_t count) {
+    // runtime was replaced, the handles belong to the next one
+    if (!this->_unistylesRuntime->ownsRegistry()) {
+        return jsi::Array(rt, 0);
+    }
+
     auto instanceHandles = core::UnistylesRegistry::get().takeCommittedInstanceHandles();
     auto result = jsi::Array(rt, instanceHandles.size());
 
@@ -281,6 +291,9 @@ jsi::Value HybridShadowRegistry::refreshReactNodes(jsi::Runtime &rt, const jsi::
     helpers::assertThat(rt, count == 1 && args[0].isObject(), "Unistyles: refreshReactNodes expected to be called with an array of shadow nodes.");
 
     auto nodes = args[0].asObject(rt).asArray(rt);
+
+    UNISTYLES_TRACE_SECTION("refreshReactNodes", "nodes", static_cast<int64_t>(nodes.size(rt)));
+
     std::unordered_map<SurfaceId, std::shared_ptr<const RootShadowNode>> roots;
 
     UIManagerBinding::getBinding(rt)->getUIManager().getShadowTreeRegistry().enumerate([&roots](const ShadowTree& shadowTree, bool&) {

package/cxx/hybridObjects/HybridStyleSheet.cpp

@@ -18,6 +18,8 @@ jsi::Value HybridStyleSheet::create(jsi::Runtime& rt, const jsi::Value &thisVal,
     helpers::assertThat(rt, arguments[0].isObject(), "StyleSheet.create expected to be called with object or function.");
     helpers::assertThat(rt, this->_unistylesRuntime->ownsRegistry(), helpers::RUNTIME_REPLACED_ERROR);
 
+    UNISTYLES_TRACE_SECTION("createStyleSheet");
+
     auto thisStyleSheet = thisVal.asObject(rt);
     auto& registry = core::UnistylesRegistry::get();
 
@@ -345,6 +347,8 @@ void HybridStyleSheet::onImeChange(UnistylesNativeMiniRuntime miniRuntime) {
 }
 
 void HybridStyleSheet::applyDependencyChanges(jsi::Runtime& rt, std::vector<UnistyleDependency>& dependencies, std::optional<UnistylesNativeMiniRuntime> maybeMiniRuntime) {
+    UNISTYLES_TRACE_SECTION("applyDependencyChanges", "dependencies", helpers::dependenciesToString(dependencies));
+
     auto& registry = core::UnistylesRegistry::get();
     auto parser = parser::Parser(this->_unistylesRuntime);
     auto dependencyMap = registry.buildDependencyMap(dependencies);
@@ -355,10 +359,14 @@ void HybridStyleSheet::applyDependencyChanges(jsi::Runtime& rt, std::vector<Unis
 
     // rebuild rawValue BEFORE notifying listeners so JS rerenders read fresh closures
     if (!dependencyMap.empty() || !dependentStyleSheets.empty()) {
+        UNISTYLES_TRACE_SECTION("rebuildUnistyles");
+
         parser.rebuildUnistylesInDependencyMap(rt, dependencyMap, dependentStyleSheets, maybeMiniRuntime);
     }
 
     if (!dependencyMap.empty()) {
+        UNISTYLES_TRACE_SECTION("rebuildShadowLeafUpdates");
+
         parser.rebuildShadowLeafUpdates(rt, dependencyMap);
     }
 
@@ -370,6 +378,9 @@ void HybridStyleSheet::applyDependencyChanges(jsi::Runtime& rt, std::vector<Unis
 
     // after the commit, so listeners can point React at the committed nodes
     registry.setCommittedInstanceHandles(std::move(committedInstanceHandles));
+
+    UNISTYLES_TRACE_SECTION("notifyListeners");
+
     // also when no StyleSheet depends on the change, hooks (useUnistyles, withUnistyles, Display, Hide) may
     this->notifyJSListeners(dependencies);
 }

package/cxx/hybridObjects/HybridStyleSheet.h

@@ -9,6 +9,7 @@
 #include "HybridUnistylesStyleSheetSpec.hpp"
 #include "RNStyle.h"
 #include "Helpers.h"
+#include "PerformanceTracing.h"
 #include "UnistylesConstants.h"
 #include "Breakpoints.h"
 #include "Parser.h"

package/cxx/hybridObjects/HybridUnistylesRuntime.cpp

@@ -30,14 +30,8 @@ Dimensions HybridUnistylesRuntime::getScreen() {
     return this->_nativePlatform->getScreenDimensions();
 };
 
+// app theme, like getTheme(). ScopedTheme is read from React Context (useUnistyles) (#1295)
 std::optional<std::string> HybridUnistylesRuntime::getThemeName() {
-    auto& registry = core::UnistylesRegistry::get();
-    auto maybeScopedTheme = registry.getScopedTheme();
-
-    if (maybeScopedTheme.has_value()) {
-        return maybeScopedTheme.value();
-    }
-
     return this->getState().getCurrentThemeName();
 };
 
@@ -215,29 +209,13 @@ jsi::Value HybridUnistylesRuntime::createHybridNavigationBar(jsi::Runtime &rt, c
 
 UnistylesCxxMiniRuntime HybridUnistylesRuntime::getMiniRuntime() {
     UnistylesNativeMiniRuntime nativeMiniRuntime = this->_nativePlatform->getMiniRuntime();
-    UnistylesCxxMiniRuntime cxxMiniRuntime{
-        this->getThemeName(),
-        this->getBreakpoint(),
-        this->getHasAdaptiveThemes(),
-        nativeMiniRuntime.colorScheme,
-        nativeMiniRuntime.screen,
-        nativeMiniRuntime.contentSizeCategory,
-        nativeMiniRuntime.insets,
-        nativeMiniRuntime.pixelRatio,
-        nativeMiniRuntime.fontScale,
-        nativeMiniRuntime.rtl,
-        nativeMiniRuntime.statusBar,
-        nativeMiniRuntime.navigationBar,
-        nativeMiniRuntime.isPortrait,
-        nativeMiniRuntime.isLandscape
-    };
 
-    return cxxMiniRuntime;
+    return this->buildMiniRuntimeFromNativeRuntime(nativeMiniRuntime, this->getThemeName());
 }
 
-UnistylesCxxMiniRuntime HybridUnistylesRuntime::buildMiniRuntimeFromNativeRuntime(UnistylesNativeMiniRuntime& nativeMiniRuntime) {
+UnistylesCxxMiniRuntime HybridUnistylesRuntime::buildMiniRuntimeFromNativeRuntime(UnistylesNativeMiniRuntime& nativeMiniRuntime, std::optional<std::string> themeName) {
     UnistylesCxxMiniRuntime cxxMiniRuntime{
-        this->getThemeName(),
+        themeName,
         this->getBreakpoint(),
         this->getHasAdaptiveThemes(),
         nativeMiniRuntime.colorScheme,
@@ -256,11 +234,13 @@ UnistylesCxxMiniRuntime HybridUnistylesRuntime::buildMiniRuntimeFromNativeRuntim
     return cxxMiniRuntime;
 }
 
-jsi::Value HybridUnistylesRuntime::getMiniRuntimeAsValue(jsi::Runtime& rt, std::optional<UnistylesNativeMiniRuntime> maybeMiniRuntime) {
+// themeName is passed by the caller, so it matches the theme the StyleSheet is called with
+jsi::Value HybridUnistylesRuntime::getMiniRuntimeAsValue(jsi::Runtime& rt, std::optional<UnistylesNativeMiniRuntime> maybeMiniRuntime, std::optional<std::string> themeName) {
     jsi::Object obj(rt);
-    auto miniRuntime = maybeMiniRuntime.has_value()
-        ? this->buildMiniRuntimeFromNativeRuntime(maybeMiniRuntime.value())
-        : this->getMiniRuntime();
+    auto nativeMiniRuntime = maybeMiniRuntime.has_value()
+        ? maybeMiniRuntime.value()
+        : this->_nativePlatform->getMiniRuntime();
+    auto miniRuntime = this->buildMiniRuntimeFromNativeRuntime(nativeMiniRuntime, std::move(themeName));
 
     // auto generated by nitro, but can't be accessed due to static inline function
     obj.setProperty(rt, "themeName", JSIConverter<std::optional<std::string>>::toJSI(rt, miniRuntime.themeName));

package/cxx/hybridObjects/HybridUnistylesRuntime.h

@@ -71,8 +71,8 @@ struct HybridUnistylesRuntime: public HybridUnistylesRuntimeSpec {
 
     core::UnistylesState& getState();
     bool ownsRegistry() const;
-    UnistylesCxxMiniRuntime buildMiniRuntimeFromNativeRuntime(UnistylesNativeMiniRuntime& nativeMiniRuntime);
-    jsi::Value getMiniRuntimeAsValue(jsi::Runtime& rt, std::optional<UnistylesNativeMiniRuntime> maybeMiniRuntime);
+    UnistylesCxxMiniRuntime buildMiniRuntimeFromNativeRuntime(UnistylesNativeMiniRuntime& nativeMiniRuntime, std::optional<std::string> themeName);
+    jsi::Value getMiniRuntimeAsValue(jsi::Runtime& rt, std::optional<UnistylesNativeMiniRuntime> maybeMiniRuntime, std::optional<std::string> themeName);
     void includeDependenciesForColorSchemeChange(std::vector<UnistyleDependency>& deps);
     void calculateNewThemeAndDependencies(std::vector<UnistyleDependency>& deps);
     std::function<void(std::function<void(jsi::Runtime&)>&&)> runOnJSThread;

package/cxx/parser/Parser.cpp

@@ -1,6 +1,8 @@
 #include "Parser.h"
 #include "UnistyleWrapper.h"
 #include "BackgroundImageConverter.h"
+#include "BackgroundLayerConverter.h"
+#include "FontVariationSettingsConverter.h"
 #include "TransformOriginConverter.h"
 #include <iomanip>
 #include <sstream>
@@ -113,7 +115,7 @@ jsi::Value parser::Parser::getParsedStyleSheetForScopedTheme(jsi::Runtime& rt, c
             .asObject(rt);
     }
 
-    auto miniRuntime = this->_unistylesRuntime->getMiniRuntimeAsValue(rt, std::nullopt);
+    auto miniRuntime = this->_unistylesRuntime->getMiniRuntimeAsValue(rt, std::nullopt, scopedTheme);
 
     return unistyle->parent->rawValue
         .asFunction(rt)
@@ -198,7 +200,7 @@ jsi::Object parser::Parser::unwrapStyleSheet(jsi::Runtime& rt, std::shared_ptr<S
 
     // stylesheet also has a mini runtime dependency
     // StyleSheetType::ThemableWithMiniRuntime
-    auto miniRuntime = this->_unistylesRuntime->getMiniRuntimeAsValue(rt, maybeMiniRuntime);
+    auto miniRuntime = this->_unistylesRuntime->getMiniRuntimeAsValue(rt, maybeMiniRuntime, state.getCurrentThemeName());
 
     return styleSheet->rawValue
         .asFunction(rt)
@@ -563,9 +565,28 @@ jsi::Object parser::Parser::parseFirstLevel(jsi::Runtime& rt, Unistyle::Shared u
             return;
         }
 
+        // { wght: 700 } is the object syntax, not breakpoints
+        if (converters::isFontVariationSettingsPropName(propertyName) && converters::isFontVariationSettingsObject(rt, propertyValueObject)) {
+            parsedStyle.setProperty(rt, jsi::PropNameID::forUtf8(rt, propertyName), propertyValue);
+
+            return;
+        }
+
+        if (converters::isBackgroundLayerPropName(propertyName) && propertyValueObject.isArray(rt)) {
+            parsedStyle.setProperty(rt, jsi::PropNameID::forUtf8(rt, propertyName), propertyValue);
+
+            return;
+        }
+
         // 'mq' or 'breakpoints'
         auto valueFromBreakpoint = getValueFromBreakpoints(rt, unistyle, propertyValueObject);
 
+        if (converters::isBackgroundLayerPropName(propertyName) && valueFromBreakpoint.isObject() && valueFromBreakpoint.asObject(rt).isArray(rt)) {
+            parsedStyle.setProperty(rt, jsi::PropNameID::forUtf8(rt, propertyName), valueFromBreakpoint);
+
+            return;
+        }
+
         parsedStyle.setProperty(rt, jsi::PropNameID::forUtf8(rt, propertyName), this->parseSecondLevel(rt, unistyle, valueFromBreakpoint));
     });
 
@@ -1026,8 +1047,21 @@ jsi::Value parser::Parser::parseSecondLevel(jsi::Runtime &rt, Unistyle::Shared u
             return;
         }
 
+        // { wght: 700 } is the object syntax, not breakpoints
+        if (converters::isFontVariationSettingsPropName(propertyName) && converters::isFontVariationSettingsObject(rt, nestedObjectStyle)) {
+            parsedStyle.setProperty(rt, propertyName.c_str(), propertyValue);
+
+            return;
+        }
+
         auto isArray = nestedObjectStyle.isArray(rt);
 
+        if (converters::isBackgroundLayerPropName(propertyName) && isArray) {
+            parsedStyle.setProperty(rt, propertyName.c_str(), propertyValue);
+
+            return;
+        }
+
         if (!isArray) {
             parsedStyle.setProperty(rt, propertyName.c_str(), this->getValueFromBreakpoints(rt, unistyle, nestedObjectStyle));
         }
@@ -1071,6 +1105,7 @@ jsi::Value parser::Parser::parseSecondLevel(jsi::Runtime &rt, Unistyle::Shared u
 folly::dynamic parser::Parser::parseStylesToShadowTreeStyles(jsi::Runtime& rt, const std::vector<std::shared_ptr<UnistyleData>>& unistyles) {
     jsi::Object convertedStyles(rt);
     auto& state = core::UnistylesRegistry::get().getState();
+    std::unordered_set<std::string> skippedPropNames;
 
     for (const auto& unistyleData : unistyles) {
         if (!unistyleData->parsedStyle.has_value()) {
@@ -1080,8 +1115,22 @@ folly::dynamic parser::Parser::parseStylesToShadowTreeStyles(jsi::Runtime& rt, c
         helpers::enumerateJSIObject(
             rt,
             unistyleData->parsedStyle.value(),
-            [this, &rt, &state, &convertedStyles](const std::string& propertyName, jsi::Value& propertyValue) {
+            [this, &rt, &state, &convertedStyles, &skippedPropNames](const std::string& propertyName, jsi::Value& propertyValue) {
+                // a later style replaces a skipped value
+                skippedPropNames.erase(propertyName);
+
                 if (converters::isBackgroundImagePropName(propertyName) && propertyValue.isString()) {
+                    // React Native parses the raw string natively and reads an array as the unprocessed syntax
+                    if (converters::canReactNativeParseBackgroundImageString()) {
+                        convertedStyles.setProperty(
+                            rt,
+                            propertyName.c_str(),
+                            propertyValue
+                        );
+
+                        return;
+                    }
+
                     auto maybeBackgroundImage = converters::parseBackgroundImageString(propertyValue.asString(rt).utf8(rt));
 
                     if (maybeBackgroundImage.has_value()) {
@@ -1094,15 +1143,45 @@ folly::dynamic parser::Parser::parseStylesToShadowTreeStyles(jsi::Runtime& rt, c
                         return;
                     }
 
+                    // without a converter (React Native < 0.83) a raw string reads as no background image,
+                    // so leave the prop to React, which processes it in JS
+                    skippedPropNames.insert(propertyName);
+
+                    return;
+                }
+
+                // React Native processes these strings in JS, its native props only read the processed arrays
+                if (converters::isBackgroundLayerPropName(propertyName) && propertyValue.isString()) {
                     convertedStyles.setProperty(
                         rt,
                         propertyName.c_str(),
-                        propertyValue
+                        jsi::valueFromDynamic(rt, converters::parseBackgroundLayerString(propertyName, propertyValue.asString(rt).utf8(rt)))
                     );
 
                     return;
                 }
 
+                // React Native converts the object syntax in JS, its native props only read the string
+                if (converters::isFontVariationSettingsPropName(propertyName) && propertyValue.isObject()) {
+                    auto fontVariationSettings = propertyValue.asObject(rt);
+                    auto maybeFontVariationSettings = converters::fontVariationSettingsToString(rt, fontVariationSettings);
+
+                    if (maybeFontVariationSettings.has_value()) {
+                        convertedStyles.setProperty(
+                            rt,
+                            propertyName.c_str(),
+                            jsi::String::createFromUtf8(rt, maybeFontVariationSettings.value())
+                        );
+
+                        return;
+                    }
+
+                    // React throws for an invalid value, so leave the prop to React
+                    skippedPropNames.insert(propertyName);
+
+                    return;
+                }
+
                 if (converters::isTransformOriginPropName(propertyName) && propertyValue.isString()) {
                     auto maybeTransformOrigin = converters::parseTransformOriginString(propertyValue.asString(rt).utf8(rt));
 
@@ -1273,7 +1352,15 @@ folly::dynamic parser::Parser::parseStylesToShadowTreeStyles(jsi::Runtime& rt, c
         );
     }
 
-    return jsi::dynamicFromValue(rt, jsi::Value(rt, convertedStyles));
+    auto props = jsi::dynamicFromValue(rt, jsi::Value(rt, convertedStyles));
+
+    // a skipped value still wins over earlier styles in React,
+    // so drop the prop instead of writing an earlier style's value
+    for (const auto& propName : skippedPropNames) {
+        props.erase(propName);
+    }
+
+    return props;
 }
 
 // shadow tree updates skip the props an inline style sets last, React (or an animation) owns them

package/cxx/shadowTree/ShadowTreeDiagnostics.cpp

@@ -2,6 +2,7 @@
 
 #include <array>
 #include <cstdio>
+#include <cxxreact/ReactNativeVersion.h>
 #include <folly/Conv.h>
 #include <react/renderer/components/image/ImageProps.h>
 // ParagraphProps is platform specific and not exposed by the Android prefab
@@ -13,6 +14,13 @@
 #endif
 #include <react/renderer/components/text/TextProps.h>
 #include <react/renderer/components/view/BaseViewProps.h>
+// background size, position and repeat exist since React Native 0.83
+#if __has_include(<react/renderer/graphics/BackgroundSize.h>)
+#include <react/renderer/graphics/BackgroundPosition.h>
+#include <react/renderer/graphics/BackgroundRepeat.h>
+#include <react/renderer/graphics/BackgroundSize.h>
+#define UNISTYLES_HAS_BACKGROUND_LAYER_PROPS 1
+#endif
 #include <react/renderer/uimanager/UIManagerBinding.h>
 #include <string_view>
 #include "Parser.h"
@@ -74,6 +82,64 @@ std::string serialize(const std::optional<FontWeight>& fontWeight) {
     return fontWeight ? std::to_string(static_cast<int>(*fontWeight)) : "undefined";
 }
 
+#if UNISTYLES_HAS_BACKGROUND_LAYER_PROPS
+std::string serialize(const ValueUnit& valueUnit) {
+    switch (valueUnit.unit) {
+        case UnitType::Point:
+            return serialize(valueUnit.value) + "px";
+        case UnitType::Percent:
+            return serialize(valueUnit.value) + "%";
+        default:
+            return "undefined";
+    }
+}
+
+std::string serialize(const std::variant<std::monostate, ValueUnit>& value) {
+    return std::holds_alternative<ValueUnit>(value) ? serialize(std::get<ValueUnit>(value)) : "auto";
+}
+
+std::string serialize(const BackgroundSize& backgroundSize) {
+    if (std::holds_alternative<BackgroundSizeKeyword>(backgroundSize)) {
+        return std::get<BackgroundSizeKeyword>(backgroundSize) == BackgroundSizeKeyword::Cover ? "cover" : "contain";
+    }
+
+    const auto& size = std::get<BackgroundSizeLengthPercentage>(backgroundSize);
+
+    return serialize(size.x) + " " + serialize(size.y);
+}
+
+std::string serialize(const BackgroundPosition& backgroundPosition) {
+    std::string result;
+    auto append = [&result](const char* edge, const std::optional<ValueUnit>& value) {
+        if (value) {
+            result += (result.empty() ? "" : " ") + std::string(edge) + " " + serialize(*value);
+        }
+    };
+
+    append("top", backgroundPosition.top);
+    append("left", backgroundPosition.left);
+    append("right", backgroundPosition.right);
+    append("bottom", backgroundPosition.bottom);
+
+    return result;
+}
+
+std::string serialize(const BackgroundRepeat& backgroundRepeat) {
+    return std::to_string(static_cast<int>(backgroundRepeat.x)) + " " + std::to_string(static_cast<int>(backgroundRepeat.y));
+}
+
+template <typename T>
+std::string serialize(const std::vector<T>& values) {
+    std::string result;
+
+    for (const auto& value : values) {
+        result += (result.empty() ? "" : ", ") + serialize(value);
+    }
+
+    return "[" + result + "]";
+}
+#endif
+
 RectangleEdges<SharedColor> borderColors(const BaseViewProps& props) {
     return props.borderColors.resolve(false, {});
 }
@@ -87,6 +153,11 @@ const VerifiedProps<BaseViewProps> viewProps{
     {"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); }},
+#if UNISTYLES_HAS_BACKGROUND_LAYER_PROPS
+    {"backgroundSize", [](const BaseViewProps& props) { return serialize(props.backgroundSize); }},
+    {"backgroundPosition", [](const BaseViewProps& props) { return serialize(props.backgroundPosition); }},
+    {"backgroundRepeat", [](const BaseViewProps& props) { return serialize(props.backgroundRepeat); }},
+#endif
 };
 
 const VerifiedProps<BaseTextProps> textProps{
@@ -95,6 +166,9 @@ const VerifiedProps<BaseTextProps> textProps{
     {"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); }},
+#if REACT_NATIVE_VERSION_MAJOR > 0 || REACT_NATIVE_VERSION_MINOR >= 88
+    {"fontVariationSettings", [](const BaseTextProps& props) { return props.textAttributes.fontVariationSettings.value_or("undefined"); }},
+#endif
 };
 
 const VerifiedProps<ImageProps> imageProps{

package/cxx/shadowTree/ShadowTreeManager.cpp

@@ -1,4 +1,5 @@
 #include "ShadowTreeManager.h"
+#include "PerformanceTracing.h"
 
 using namespace margelo::nitro::unistyles;
 using namespace facebook::react;
@@ -19,6 +20,8 @@ std::vector<InstanceHandle::Shared> shadow::ShadowTreeManager::updateShadowTree(
             return;
         }
 
+        UNISTYLES_TRACE_SECTION("commit", "nodes", static_cast<int64_t>(updates.size()));
+
         std::unordered_map<Tag, folly::dynamic> tagToProps;
 
         committedInstanceHandles.reserve(updates.size());

package/ios/NativePlatform+ios.swift

@@ -14,6 +14,7 @@ class NativeIOSPlatform: HybridNativePlatformSpec {
 
     var dependencyListeners: Array<CxxDependencyListener> = []
     var imeListeners: Array<CxxImeListener> = []
+    var interfaceStyle: UIUserInterfaceStyle?
 
     override init() {
         super.init()
@@ -52,17 +53,27 @@ class NativeIOSPlatform: HybridNativePlatformSpec {
     }
 
     func getColorScheme() -> ColorScheme {
-        let interfaceStyle = UIScreen.main.traitCollection.userInterfaceStyle
-
-        switch (interfaceStyle) {
-        case .dark:
-            return ColorScheme.dark
-        case .light:
-            return ColorScheme.light
-        case .unspecified:
-            return ColorScheme.unspecified
-        default:
-            return ColorScheme.unspecified
+        func getColorSchemeFn() -> ColorScheme {
+            let interfaceStyle = self.interfaceStyle ?? (RCTKeyWindow()?.traitCollection ?? UIScreen.main.traitCollection).userInterfaceStyle
+
+            switch (interfaceStyle) {
+            case .dark:
+                return ColorScheme.dark
+            case .light:
+                return ColorScheme.light
+            case .unspecified:
+                return ColorScheme.unspecified
+            default:
+                return ColorScheme.unspecified
+            }
+        }
+
+        if Thread.isMainThread {
+            return getColorSchemeFn()
+        }
+
+        return DispatchQueue.main.sync {
+            return getColorSchemeFn()
         }
     }
 

package/ios/NativePlatformListener+ios.swift

@@ -7,6 +7,15 @@ extension NativeIOSPlatform {
         let orientationPublisher = NotificationCenter.default.publisher(for: UIDevice.orientationDidChangeNotification)
         let colorSchemePublisher = NotificationCenter.default.publisher(for: NSNotification.Name("RCTUserInterfaceStyleDidChangeNotification"))
 
+        colorSchemePublisher
+            .sink { [weak self] notification in
+                if let traitCollection = notification.userInfo?["traitCollection"] as? UITraitCollection,
+                   traitCollection.userInterfaceStyle != .unspecified {
+                    self?.interfaceStyle = traitCollection.userInterfaceStyle
+                }
+            }
+            .store(in: &cancellables)
+
         Publishers
             .MergeMany([windowPublisher, orientationPublisher, colorSchemePublisher])
             .throttle(for: .milliseconds(25), scheduler: RunLoop.main, latest: true)

package/lib/commonjs/components/NamedTheme.js

@@ -19,6 +19,10 @@ const NamedTheme = ({
   const scope = (0, _react.useMemo)(() => ({
     name
   }), [name]);
+  (0, _react.useLayoutEffect)(() => {
+    // this will affect only scoped styles as other styles are not yet mounted
+    _specs.UnistylesShadowRegistry.flush();
+  });
   const mappedChildren = [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ApplyScopedTheme.ApplyScopedTheme, {
     name: name
   }, "apply"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScopedThemeContext.ScopedThemeContext.Provider, {
@@ -27,10 +31,6 @@ const NamedTheme = ({
   }, "scope"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ApplyScopedTheme.ApplyScopedTheme, {
     name: previousScopedTheme
   }, "dispose")];
-  (0, _react.useLayoutEffect)(() => {
-    // this will affect only scoped styles as other styles are not yet mounted
-    _specs.UnistylesShadowRegistry.flush();
-  });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.default.Fragment, {
     children: mappedChildren
   });

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_specs","_ApplyScopedTheme","_scopeChildren","_ScopedThemeContext","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","NamedTheme","name","children","previousScopedTheme","scope","useMemo","mappedChildren","jsx","ApplyScopedTheme","ScopedThemeContext","Provider","value","scopeChildren","useLayoutEffect","UnistylesShadowRegistry","flush","Fragment","exports"],"sourceRoot":"../../../src","sources":["components/NamedTheme.tsx"],"mappings":";;;;;;AAEA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAIA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,iBAAA,GAAAF,OAAA;AACA,IAAAG,cAAA,GAAAH,OAAA;AACA,IAAAI,mBAAA,GAAAJ,OAAA;AAAyD,IAAAK,WAAA,GAAAL,OAAA;AAAA,SAAAD,wBAAAO,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAT,uBAAA,YAAAA,CAAAO,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAOlD,MAAMkB,UAAoD,GAAGA,CAAC;EAAEC,IAAI;EAAEC,QAAQ;EAAEC;AAAoB,CAAC,KAAK;EAC7G,MAAMC,KAAK,GAAG,IAAAC,cAAO,EAAC,OAAO;IAAEJ;EAAK,CAAC,CAAC,EAAE,CAACA,IAAI,CAAC,CAAC;EAE/C,MAAMK,cAAc,GAAG,cACnB,IAAA1B,WAAA,CAAA2B,GAAA,EAAC9B,iBAAA,CAAA+B,gBAAgB;IAAaP,IAAI,EAAEA;EAAK,GAAnB,OAAqB,CAAC,eAC5C,IAAArB,WAAA,CAAA2B,GAAA,EAAC5B,mBAAA,CAAA8B,kBAAkB,CAACC,QAAQ;IAAaC,KAAK,EAAEP,KAAM;IAAAF,QAAA,EACjD,IAAAU,4BAAa,EAACX,IAAI,EAAEC,QAAQ;EAAC,GADD,OAEJ,CAAC,eAC9B,IAAAtB,WAAA,CAAA2B,GAAA,EAAC9B,iBAAA,CAAA+B,gBAAgB;IAAeP,IAAI,EAAEE;EAAyD,GAAzE,SAA2E,CAAC,CACrG;EAED,IAAAU,sBAAe,EAAC,MAAM;IAClB;IACAC,8BAAuB,CAACC,KAAK,CAAC,CAAC;EACnC,CAAC,CAAC;EAEF,oBAAO,IAAAnC,WAAA,CAAA2B,GAAA,EAAClC,MAAA,CAAAkB,OAAK,CAACyB,QAAQ;IAAAd,QAAA,EAAEI;EAAc,CAAiB,CAAC;AAC5D,CAAC;AAAAW,OAAA,CAAAjB,UAAA,GAAAA,UAAA","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_specs","_ApplyScopedTheme","_scopeChildren","_ScopedThemeContext","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","NamedTheme","name","children","previousScopedTheme","scope","useMemo","useLayoutEffect","UnistylesShadowRegistry","flush","mappedChildren","jsx","ApplyScopedTheme","ScopedThemeContext","Provider","value","scopeChildren","Fragment","exports"],"sourceRoot":"../../../src","sources":["components/NamedTheme.tsx"],"mappings":";;;;;;AAEA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAIA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,iBAAA,GAAAF,OAAA;AACA,IAAAG,cAAA,GAAAH,OAAA;AACA,IAAAI,mBAAA,GAAAJ,OAAA;AAAyD,IAAAK,WAAA,GAAAL,OAAA;AAAA,SAAAD,wBAAAO,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAT,uBAAA,YAAAA,CAAAO,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAOlD,MAAMkB,UAAoD,GAAGA,CAAC;EAAEC,IAAI;EAAEC,QAAQ;EAAEC;AAAoB,CAAC,KAAK;EAC7G,MAAMC,KAAK,GAAG,IAAAC,cAAO,EAAC,OAAO;IAAEJ;EAAK,CAAC,CAAC,EAAE,CAACA,IAAI,CAAC,CAAC;EAE/C,IAAAK,sBAAe,EAAC,MAAM;IAClB;IACAC,8BAAuB,CAACC,KAAK,CAAC,CAAC;EACnC,CAAC,CAAC;EAEF,MAAMC,cAAc,GAAG,cACnB,IAAA7B,WAAA,CAAA8B,GAAA,EAACjC,iBAAA,CAAAkC,gBAAgB;IAAaV,IAAI,EAAEA;EAAK,GAAnB,OAAqB,CAAC,eAC5C,IAAArB,WAAA,CAAA8B,GAAA,EAAC/B,mBAAA,CAAAiC,kBAAkB,CAACC,QAAQ;IAAaC,KAAK,EAAEV,KAAM;IAAAF,QAAA,EACjD,IAAAa,4BAAa,EAACd,IAAI,EAAEC,QAAQ;EAAC,GADD,OAEJ,CAAC,eAC9B,IAAAtB,WAAA,CAAA8B,GAAA,EAACjC,iBAAA,CAAAkC,gBAAgB;IAAeV,IAAI,EAAEE;EAAyD,GAAzE,SAA2E,CAAC,CACrG;EAED,oBAAO,IAAAvB,WAAA,CAAA8B,GAAA,EAACrC,MAAA,CAAAkB,OAAK,CAACyB,QAAQ;IAAAd,QAAA,EAAEO;EAAc,CAAiB,CAAC;AAC5D,CAAC;AAAAQ,OAAA,CAAAjB,UAAA,GAAAA,UAAA","ignoreList":[]}

package/lib/commonjs/components/ScopedThemeContext.js

@@ -5,5 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ScopedThemeContext = void 0;
 var _react = require("react");
-const ScopedThemeContext = exports.ScopedThemeContext = /*#__PURE__*/(0, _react.createContext)(null);
+// React Server Components load a React build without createContext (or useContext). The Next.js App Router
+// setup imports Unistyles from the root layout, a server component, and nothing can read this context there.
+const ScopedThemeContext = exports.ScopedThemeContext = typeof _react.createContext === 'function' ? /*#__PURE__*/(0, _react.createContext)(null) : null;
 //# sourceMappingURL=ScopedThemeContext.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_react","require","ScopedThemeContext","exports","createContext"],"sourceRoot":"../../../src","sources":["components/ScopedThemeContext.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAQO,MAAMC,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,gBAAG,IAAAE,oBAAa,EAAe,IAAI,CAAC","ignoreList":[]}
+{"version":3,"names":["_react","require","ScopedThemeContext","exports","createContext"],"sourceRoot":"../../../src","sources":["components/ScopedThemeContext.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAQA;AACA;AACO,MAAMC,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAC3B,OAAOE,oBAAa,KAAK,UAAU,gBAAG,IAAAA,oBAAa,EAAe,IAAI,CAAC,GAAG,IACpD","ignoreList":[]}

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

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ActivityIndicator", {
+  enumerable: true,
+  get: function () {
+    return _ActivityIndicator.ActivityIndicator;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _ActivityIndicator.ActivityIndicator;
+  }
+});
+var _ActivityIndicator = require("../ActivityIndicator");
+//# sourceMappingURL=ActivityIndicator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_ActivityIndicator","require"],"sourceRoot":"../../../../../src","sources":["components/native/deep/ActivityIndicator.ts"],"mappings":";;;;;;;;;;;;;;;;;AACA,IAAAA,kBAAA,GAAAC,OAAA","ignoreList":[]}

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

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Animated", {
+  enumerable: true,
+  get: function () {
+    return _Animated.Animated;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Animated.Animated;
+  }
+});
+var _Animated = require("../Animated");
+//# sourceMappingURL=Animated.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_Animated","require"],"sourceRoot":"../../../../../src","sources":["components/native/deep/Animated.ts"],"mappings":";;;;;;;;;;;;;;;;;AACA,IAAAA,SAAA,GAAAC,OAAA","ignoreList":[]}

package/lib/commonjs/components/native/deep/FlatList.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "FlatList", {
+  enumerable: true,
+  get: function () {
+    return _FlatList.FlatList;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _FlatList.FlatList;
+  }
+});
+var _FlatList = require("../FlatList");
+//# sourceMappingURL=FlatList.js.map