react-native-unistyles 3.2.4 → 3.3.0

package/nitrogen/generated/android/c++/JUnistyleDependency.hpp

@@ -15,7 +15,7 @@ namespace margelo::nitro::unistyles {
   using namespace facebook;
 
   /**
-   * The C++ JNI bridge between the C++ enum "UnistyleDependency" and the the Kotlin enum "UnistyleDependency".
+   * The C++ JNI bridge between the C++ enum "UnistyleDependency" and the Kotlin enum "UnistyleDependency".
    */
   struct JUnistyleDependency final: public jni::JavaClass<JUnistyleDependency> {
   public:

package/nitrogen/generated/android/c++/JUnistylesNativeMiniRuntime.hpp

@@ -23,7 +23,7 @@ namespace margelo::nitro::unistyles {
   using namespace facebook;
 
   /**
-   * The C++ JNI bridge between the C++ struct "UnistylesNativeMiniRuntime" and the the Kotlin data class "UnistylesNativeMiniRuntime".
+   * The C++ JNI bridge between the C++ struct "UnistylesNativeMiniRuntime" and the Kotlin data class "UnistylesNativeMiniRuntime".
    */
   struct JUnistylesNativeMiniRuntime final: public jni::JavaClass<JUnistylesNativeMiniRuntime> {
   public:

package/nitrogen/generated/android/kotlin/com/margelo/nitro/unistyles/Dimensions.kt

@@ -35,7 +35,7 @@ data class Dimensions(
   }
 
   override fun hashCode(): Int {
-    return arrayOf(
+    return arrayOf<Any?>(
       width,
       height
     ).contentDeepHashCode()

package/nitrogen/generated/android/kotlin/com/margelo/nitro/unistyles/Insets.kt

@@ -47,7 +47,7 @@ data class Insets(
   }
 
   override fun hashCode(): Int {
-    return arrayOf(
+    return arrayOf<Any?>(
       top,
       bottom,
       left,

package/nitrogen/generated/android/kotlin/com/margelo/nitro/unistyles/UnistylesNativeMiniRuntime.kt

@@ -71,7 +71,7 @@ data class UnistylesNativeMiniRuntime(
   }
 
   override fun hashCode(): Int {
-    return arrayOf(
+    return arrayOf<Any?>(
       colorScheme,
       screen,
       contentSizeCategory,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-unistyles",
-  "version": "3.2.4",
+  "version": "3.3.0",
   "description": "Level up your React Native StyleSheet",
   "scripts": {
     "test": "NODE_ENV=babel-test jest ./plugin ./src/__tests__",
@@ -31,6 +31,7 @@
       "default": "./lib/commonjs/index.js"
     },
     "./mocks": {
+      "types": "./lib/typescript/src/mocks.d.ts",
       "import": "./lib/module/mocks.js",
       "browser": "./lib/module/mocks.js",
       "react-native": "./src/mocks.ts",
@@ -132,7 +133,7 @@
   "devDependencies": {
     "@callstack/repack": "5.2.4",
     "@commitlint/config-conventional": "20.4.2",
-    "@react-native/normalize-colors": "0.83.2",
+    "@react-native/normalize-colors": "0.85.3",
     "@rspack/core": "1.7.6",
     "@types/jest": "30.0.0",
     "@types/react": "19.2.14",
@@ -144,15 +145,15 @@
     "jest": "30.2.0",
     "@babel/plugin-syntax-jsx": "7.28.6",
     "@babel/runtime": "7.28.6",
-    "@react-native/babel-preset": "0.83.2",
-    "nitrogen": "0.35.5",
+    "@react-native/babel-preset": "0.85.3",
+    "nitrogen": "0.36.1",
     "oxfmt": "0.35.0",
     "oxlint": "1.50.0",
-    "react": "19.2.0",
-    "react-native": "0.83.2",
+    "react": "19.2.3",
+    "react-native": "0.85.3",
     "react-native-builder-bob": "0.40.18",
-    "react-native-nitro-modules": "0.35.5",
-    "react-native-reanimated": "4.2.2",
+    "react-native-nitro-modules": "0.36.1",
+    "react-native-reanimated": "4.3.1",
     "react-native-web": "0.21.2",
     "typescript": "5.9.3"
   },

package/plugin/index.js

@@ -219,6 +219,18 @@ var UnistyleDependency = {
   Ime: 14,
   Rtl: 15
 };
+function getStyleKeyName(key) {
+  if (!key) {
+    return null;
+  }
+  if (t4.isIdentifier(key)) {
+    return key.name;
+  }
+  if (t4.isStringLiteral(key) || t4.isNumericLiteral(key) || t4.isBooleanLiteral(key)) {
+    return String(key.value);
+  }
+  return null;
+}
 function getProperty(property) {
   if (!property) {
     return void 0;
@@ -389,28 +401,30 @@ function getStylesDependenciesFromObject(path2) {
   const stylesheet = path2.node.arguments[0];
   if (t4.isObjectExpression(stylesheet)) {
     stylesheet?.properties.forEach((property) => {
-      if (!t4.isObjectProperty(property) || !t4.isIdentifier(property.key)) {
+      if (!t4.isObjectProperty(property)) {
         return;
       }
-      if (t4.isObjectProperty(property)) {
-        if (t4.isObjectExpression(property.value)) {
-          property.value.properties.forEach((innerProp) => {
-            if (t4.isObjectProperty(innerProp) && t4.isIdentifier(innerProp.key) && t4.isIdentifier(property.key) && innerProp.key.name === "variants") {
-              detectedStylesWithVariants.add({
-                label: "variants",
-                key: property.key.name
-              });
-            }
-          });
-        }
+      const styleKey = getStyleKeyName(property.key);
+      if (!styleKey) {
+        return;
+      }
+      if (t4.isObjectExpression(property.value)) {
+        property.value.properties.forEach((innerProp) => {
+          if (t4.isObjectProperty(innerProp) && t4.isIdentifier(innerProp.key) && innerProp.key.name === "variants") {
+            detectedStylesWithVariants.add({
+              label: "variants",
+              key: styleKey
+            });
+          }
+        });
       }
       if (t4.isArrowFunctionExpression(property.value)) {
         if (t4.isObjectExpression(property.value.body)) {
           property.value.body.properties.forEach((innerProp) => {
-            if (t4.isObjectProperty(innerProp) && t4.isIdentifier(innerProp.key) && t4.isIdentifier(property.key) && innerProp.key.name === "variants") {
+            if (t4.isObjectProperty(innerProp) && t4.isIdentifier(innerProp.key) && innerProp.key.name === "variants") {
               detectedStylesWithVariants.add({
                 label: "variants",
-                key: property.key.name
+                key: styleKey
               });
             }
           });
@@ -493,10 +507,10 @@ function getStylesDependenciesFromFunction(funcPath) {
     if (Array.isArray(stylePath)) {
       return;
     }
-    if (!stylePath.isIdentifier()) {
+    const styleKey = getStyleKeyName(stylePath.node);
+    if (!styleKey) {
       return;
     }
-    const styleKey = stylePath.node.name;
     const valuePath = propPath.get("value");
     if (Array.isArray(valuePath)) {
       return;
@@ -901,13 +915,12 @@ function index_default() {
           if (detectedDependencies) {
             if (t6.isObjectExpression(arg)) {
               arg.properties.forEach((property) => {
-                if (t6.isObjectProperty(property) && t6.isIdentifier(property.key) && Object.prototype.hasOwnProperty.call(detectedDependencies, property.key.name)) {
-                  addDependencies(
-                    state,
-                    property.key.name,
-                    property,
-                    detectedDependencies[property.key.name] ?? []
-                  );
+                if (!t6.isObjectProperty(property)) {
+                  return;
+                }
+                const styleKey = getStyleKeyName(property.key);
+                if (styleKey && Object.prototype.hasOwnProperty.call(detectedDependencies, styleKey)) {
+                  addDependencies(state, styleKey, property, detectedDependencies[styleKey] ?? []);
                 }
               });
             }
@@ -920,13 +933,12 @@ function index_default() {
             const body = t6.isBlockStatement(arg.body) ? arg.body.body.find((statement) => t6.isReturnStatement(statement))?.argument : arg.body;
             if (t6.isObjectExpression(body)) {
               body.properties.forEach((property) => {
-                if (t6.isObjectProperty(property) && t6.isIdentifier(property.key) && Object.prototype.hasOwnProperty.call(detectedDependencies, property.key.name)) {
-                  addDependencies(
-                    state,
-                    property.key.name,
-                    property,
-                    detectedDependencies[property.key.name] ?? []
-                  );
+                if (!t6.isObjectProperty(property)) {
+                  return;
+                }
+                const styleKey = getStyleKeyName(property.key);
+                if (styleKey && Object.prototype.hasOwnProperty.call(detectedDependencies, styleKey)) {
+                  addDependencies(state, styleKey, property, detectedDependencies[styleKey] ?? []);
                 }
               });
             }

package/src/index.ts

@@ -6,7 +6,7 @@ if (majorReactVersions === undefined || majorReactVersions < 19) {
     throw new Error('Unistyles 🦄: To enable full Fabric power you need to use React 19.0.0 or higher')
 }
 
-export { StyleSheet, UnistylesRuntime, StatusBar, NavigationBar } from './specs'
+export { StyleSheet, UnistylesRuntime } from './specs'
 export { UnistyleDependency } from './specs'
 export { mq } from './mq'
 export type { UnistylesThemes, UnistylesBreakpoints } from './global'

package/src/reanimated/useAnimatedTheme.native.ts

@@ -1,22 +1,37 @@
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { type SharedValue, useSharedValue } from 'react-native-reanimated'
 
 import type { UnistylesTheme } from '../types'
 
-import { StyleSheet, UnistyleDependency, UnistylesRuntime } from '../specs'
+import { StyleSheet, UnistyleDependency, UnistylesRuntime, UnistylesShadowRegistry } from '../specs'
 
 export const useAnimatedTheme = () => {
-    const theme = useSharedValue(UnistylesRuntime.getTheme())
+    const [scopedTheme, setScopedTheme] = useState(
+        () => UnistylesShadowRegistry.getScopedTheme() as UnistylesTheme | undefined,
+    )
+    const theme = useSharedValue(UnistylesRuntime.getTheme(scopedTheme))
+    const maybeNewScopedTheme = UnistylesShadowRegistry.getScopedTheme() as UnistylesTheme | undefined
+
+    if (scopedTheme !== maybeNewScopedTheme) {
+        setScopedTheme(maybeNewScopedTheme)
+        theme.set(UnistylesRuntime.getTheme(maybeNewScopedTheme))
+    }
 
     useEffect(() => {
         const dispose = StyleSheet.addChangeListener((changedDependencies) => {
-            if (changedDependencies.includes(UnistyleDependency.Theme)) {
-                theme.set(UnistylesRuntime.getTheme())
+            if (!changedDependencies.includes(UnistyleDependency.Theme)) {
+                return
+            }
+
+            if (scopedTheme) {
+                return
             }
+
+            theme.set(UnistylesRuntime.getTheme())
         })
 
         return () => dispose()
-    }, [])
+    }, [scopedTheme])
 
     return theme as SharedValue<UnistylesTheme>
 }

package/src/reanimated/useAnimatedTheme.ts

@@ -1,23 +1,36 @@
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { type SharedValue, useSharedValue } from 'react-native-reanimated'
 
 import type { UnistylesTheme } from '../types'
 
-import { UnistyleDependency, UnistylesRuntime } from '../specs'
+import { UnistyleDependency, UnistylesRuntime, UnistylesShadowRegistry } from '../specs'
 import { services } from '../web/services'
 
 export const useAnimatedTheme = () => {
-    const theme = useSharedValue(UnistylesRuntime.getTheme())
+    const [scopedTheme, setScopedTheme] = useState(
+        () => UnistylesShadowRegistry.getScopedTheme() as UnistylesTheme | undefined,
+    )
+    const theme = useSharedValue(UnistylesRuntime.getTheme(scopedTheme))
+    const maybeNewScopedTheme = UnistylesShadowRegistry.getScopedTheme() as UnistylesTheme | undefined
+
+    if (scopedTheme !== maybeNewScopedTheme) {
+        setScopedTheme(maybeNewScopedTheme)
+        theme.set(UnistylesRuntime.getTheme(maybeNewScopedTheme))
+    }
 
     useEffect(() => {
-        const dispose = services.listener.addListeners([UnistyleDependency.Theme], () =>
-            theme.set(UnistylesRuntime.getTheme()),
-        )
+        const dispose = services.listener.addListeners([UnistyleDependency.Theme], () => {
+            if (scopedTheme) {
+                return
+            }
+
+            theme.set(UnistylesRuntime.getTheme())
+        })
 
         return () => {
             dispose()
         }
-    }, [])
+    }, [scopedTheme])
 
     return theme as SharedValue<UnistylesTheme>
 }

package/src/server/resetServerUnistyles.ts

@@ -7,4 +7,6 @@ export const resetServerUnistyles = () => {
     }
 
     unistyles.services.registry.reset()
+    unistyles.services.shadowRegistry.reset()
+    unistyles.services.listener.reset()
 }

package/src/specs/ShadowRegistry/index.ts

@@ -19,12 +19,13 @@ interface ShadowRegistry extends UnistylesShadowRegistrySpec {
 const HybridShadowRegistry = NitroModules.createHybridObject<ShadowRegistry>('UnistylesShadowRegistry')
 
 const SUSPENSE_TAG = 13
+const OFFSCREEN_TAG = 22
 
 const isInsideSuspendedBoundary = (fiber: any): boolean => {
     let current = fiber?.return
 
     while (current) {
-        if (current.tag === SUSPENSE_TAG && current.memoizedState !== null) {
+        if ((current.tag === SUSPENSE_TAG || current.tag === OFFSCREEN_TAG) && current.memoizedState !== null) {
             return true
         }
 

package/src/specs/StyleSheet/index.ts

@@ -35,7 +35,7 @@ export type UnistylesConfig = {
 }
 
 export interface UnistylesStyleSheet extends UnistylesStyleSheetSpec {
-    absoluteFillObject: typeof NativeStyleSheetType.absoluteFillObject
+    absoluteFillObject: typeof NativeStyleSheetType.absoluteFill
     absoluteFill: typeof NativeStyleSheetType.absoluteFill
     compose: typeof NativeStyleSheetType.compose
     flatten: typeof NativeStyleSheetType.flatten
@@ -52,7 +52,7 @@ export interface UnistylesStyleSheet extends UnistylesStyleSheetSpec {
 
 const HybridUnistylesStyleSheet = NitroModules.createHybridObject<UnistylesStyleSheet>('UnistylesStyleSheet')
 
-HybridUnistylesStyleSheet.absoluteFillObject = NativeStyleSheet.absoluteFillObject
+HybridUnistylesStyleSheet.absoluteFillObject = NativeStyleSheet.absoluteFill
 HybridUnistylesStyleSheet.absoluteFill = NativeStyleSheet.absoluteFill
 HybridUnistylesStyleSheet.flatten = NativeStyleSheet.flatten
 HybridUnistylesStyleSheet.compose = NativeStyleSheet.compose

package/src/web/convert/object/boxShadow.ts

@@ -7,7 +7,7 @@ import { normalizeNumericValue } from '../utils'
 const createBoxShadowValue = (style: BoxShadowValue) => {
     const { offsetX, offsetY, blurRadius = 0, spreadDistance = 0, color = '#000', inset } = style
 
-    return `${inset ? 'inset ' : ''}${normalizeNumericValue(offsetX)} ${normalizeNumericValue(offsetY)} ${normalizeNumericValue(blurRadius as number)} ${normalizeNumericValue(spreadDistance as number)} ${color}`
+    return `${inset ? 'inset ' : ''}${normalizeNumericValue(offsetX)} ${normalizeNumericValue(offsetY)} ${normalizeNumericValue(blurRadius as number)} ${normalizeNumericValue(spreadDistance as number)} ${String(color)}`
 }
 
 export const getBoxShadow = (boxShadow: Array<BoxShadowValue>) => {

package/src/web/index.ts

@@ -33,5 +33,3 @@ export const StyleSheet = {
 export const UnistylesRuntime = unistyles.services.runtime as unknown as typeof NativeUnistylesRuntime
 export const UnistylesShadowRegistry = unistyles.services
     .shadowRegistry as unknown as typeof NativeUnistylesShadowRegistry
-
-export * from './mock'

package/src/web/listener.ts

@@ -48,6 +48,12 @@ export class UnistylesListener {
         }
     }
 
+    reset = () => {
+        this.listeners.forEach((listeners) => listeners.clear())
+        this.stylesheetListeners.forEach((listeners) => listeners.clear())
+        this.changeListeners.clear()
+    }
+
     initListeners = () => {
         if (this.isInitialized) {
             return

package/src/web/registry.ts

@@ -126,7 +126,9 @@ export class UnistylesRegistry {
     }
 
     reset = () => {
+        this.disposeListenersMap.forEach((dispose) => dispose())
         this.css.reset()
+        this.stylesheets.clear()
         this.stylesCache.clear()
         this.dependenciesMap.clear()
         this.disposeListenersMap.clear()

package/src/web/shadowRegistry.ts

@@ -121,5 +121,10 @@ export class UnistylesShadowRegistry {
         })
     }
 
+    reset = () => {
+        this.disposeMap.forEach((dispose) => dispose())
+        this.disposeMap.clear()
+    }
+
     flush = () => {}
 }