react-native-unistyles 3.5.1 → 3.5.2

package/lib/typescript/src/reanimated/useAnimatedTheme.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAnimatedTheme.native.d.ts","sourceRoot":"","sources":["../../../../src/reanimated/useAnimatedTheme.native.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,WAAW,EAAkB,MAAM,yBAAyB,CAAA;AAE1E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAI9C,eAAO,MAAM,gBAAgB,QA4BT,WAAW,CAAC,cAAc,CAC7C,CAAA"}
+{"version":3,"file":"useAnimatedTheme.native.d.ts","sourceRoot":"","sources":["../../../../src/reanimated/useAnimatedTheme.native.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,WAAW,EAAkB,MAAM,yBAAyB,CAAA;AAE1E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAK9C,eAAO,MAAM,gBAAgB,QA2BT,WAAW,CAAC,cAAc,CAC7C,CAAA"}

package/lib/typescript/src/specs/ShadowRegistry/index.d.ts

@@ -1,8 +1,9 @@
+import type { Scope } from '../../components/ScopedThemeContext';
 import type { VerifyReport } from '../../diagnostics/types';
 import type { UnistylesShadowRegistry as UnistylesShadowRegistrySpec } from './ShadowRegistry.nitro';
 import type { ShadowNode, Unistyle, ViewHandle } from './types';
 interface ShadowRegistry extends UnistylesShadowRegistrySpec {
-    add(handle?: ViewHandle, styles?: Array<Unistyle>): void;
+    add(handle?: ViewHandle, styles?: Array<Unistyle>, scope?: Scope | null): void;
     remove(handle?: ViewHandle): void;
     link(node: ShadowNode, styles?: Array<Unistyle>): void;
     unlink(node: ShadowNode): void;

package/lib/typescript/src/specs/ShadowRegistry/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/specs/ShadowRegistry/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA;AAC3D,OAAO,KAAK,EAAE,uBAAuB,IAAI,2BAA2B,EAAE,MAAM,wBAAwB,CAAA;AACpG,OAAO,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAI/D,UAAU,cAAe,SAAQ,2BAA2B;IAExD,GAAG,CAAC,MAAM,CAAC,EAAE,UAAU,EAAE,MAAM,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAA;IACxD,MAAM,CAAC,MAAM,CAAC,EAAE,UAAU,GAAG,IAAI,CAAA;IAEjC,IAAI,CAAC,IAAI,EAAE,UAAU,EAAE,MAAM,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAA;IACtD,MAAM,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,CAAA;IAC9B,OAAO,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,CAAA;IAC/B,KAAK,IAAI,IAAI,CAAA;IACb,cAAc,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACxC,cAAc,IAAI,MAAM,GAAG,SAAS,CAAA;IACpC,MAAM,IAAI,YAAY,CAAA;IACtB,iBAAiB,IAAI,KAAK,CAAC,MAAM,CAAC,CAAA;IAClC,iBAAiB,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,GAAG,IAAI,CAAA;CACpD;AAyND,KAAK,cAAc,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,mBAAmB,GAAG,mBAAmB,CAAA;AAElH,eAAO,MAAM,uBAAuB,EAA2B,IAAI,CAAC,cAAc,EAAE,cAAc,CAAC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/specs/ShadowRegistry/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,qCAAqC,CAAA;AAChE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA;AAC3D,OAAO,KAAK,EAAE,uBAAuB,IAAI,2BAA2B,EAAE,MAAM,wBAAwB,CAAA;AACpG,OAAO,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAI/D,UAAU,cAAe,SAAQ,2BAA2B;IAExD,GAAG,CAAC,MAAM,CAAC,EAAE,UAAU,EAAE,MAAM,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,CAAA;IAC9E,MAAM,CAAC,MAAM,CAAC,EAAE,UAAU,GAAG,IAAI,CAAA;IAEjC,IAAI,CAAC,IAAI,EAAE,UAAU,EAAE,MAAM,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAA;IACtD,MAAM,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,CAAA;IAC9B,OAAO,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,CAAA;IAC/B,KAAK,IAAI,IAAI,CAAA;IACb,cAAc,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACxC,cAAc,IAAI,MAAM,GAAG,SAAS,CAAA;IACpC,MAAM,IAAI,YAAY,CAAA;IACtB,iBAAiB,IAAI,KAAK,CAAC,MAAM,CAAC,CAAA;IAClC,iBAAiB,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,GAAG,IAAI,CAAA;CACpD;AAoOD,KAAK,cAAc,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,mBAAmB,GAAG,mBAAmB,CAAA;AAElH,eAAO,MAAM,uBAAuB,EAA2B,IAAI,CAAC,cAAc,EAAE,cAAc,CAAC,CAAA"}

package/lib/typescript/src/web/css/state.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"state.d.ts","sourceRoot":"","sources":["../../../../../src/web/css/state.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAClD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAMjD,KAAK,OAAO,GAAG,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC,CAAA;AACzD,KAAK,QAAQ,GAAG;IACZ,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,WAAW,EAAE,MAAM,CAAA;IACnB,KAAK,EAAE,GAAG,CAAA;CACb,CAAA;AACD,KAAK,YAAY,GAAG,KAAK,CAAC,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;AAgB1E,qBAAa,QAAQ;IAML,OAAO,CAAC,QAAQ;IAL5B,OAAO,EAAE,OAAO,CAAY;IAC5B,KAAK,EAAE,OAAO,CAAY;IAC1B,OAAO,CAAC,QAAQ,CAAgC;IAChD,OAAO,CAAC,SAAS,CAA4B;gBAEzB,QAAQ,EAAE,iBAAiB;IAkB/C,GAAG,GAAI,qDAA0D,QAAQ,UAMxE;IAED,GAAG,GAAI,MAAM,MAAM,EAAE,QAAQ,eAAe,UAG3C;IAED,QAAQ,aAIP;IAED,QAAQ,GAAI,OAAO,MAAM,EAAE,QAAQ,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,UAsBrD;IAED,MAAM,GAAI,MAAM,MAAM,UAQrB;IAED,SAAS,eAsCR;IAED,QAAQ;;;;MAsBP;IAED,OAAO,GAAI,wBAAwB,UAAU,CAAC,OAAO,IAAI,CAAC,QAAQ,CAAC,UAmBlE;IAED,KAAK,aAGJ;CACJ"}
+{"version":3,"file":"state.d.ts","sourceRoot":"","sources":["../../../../../src/web/css/state.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAClD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAMjD,KAAK,OAAO,GAAG,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC,CAAA;AACzD,KAAK,QAAQ,GAAG;IACZ,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,WAAW,EAAE,MAAM,CAAA;IACnB,KAAK,EAAE,GAAG,CAAA;CACb,CAAA;AACD,KAAK,YAAY,GAAG,KAAK,CAAC,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;AAgB1E,qBAAa,QAAQ;IAML,OAAO,CAAC,QAAQ;IAL5B,OAAO,EAAE,OAAO,CAAY;IAC5B,KAAK,EAAE,OAAO,CAAY;IAC1B,OAAO,CAAC,QAAQ,CAAgC;IAChD,OAAO,CAAC,SAAS,CAA4B;gBAEzB,QAAQ,EAAE,iBAAiB;IAkB/C,GAAG,GAAI,qDAA0D,QAAQ,UAMxE;IAED,GAAG,GAAI,MAAM,MAAM,EAAE,QAAQ,eAAe,UAG3C;IAED,QAAQ,aAIP;IAED,QAAQ,GAAI,OAAO,MAAM,EAAE,QAAQ,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,UA8BrD;IAED,MAAM,GAAI,MAAM,MAAM,UAQrB;IAED,SAAS,eAsCR;IAED,QAAQ;;;;MAsBP;IAED,OAAO,GAAI,wBAAwB,UAAU,CAAC,OAAO,IAAI,CAAC,QAAQ,CAAC,UAmBlE;IAED,KAAK,aAGJ;CACJ"}

package/lib/typescript/src/web/shadowRegistry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shadowRegistry.d.ts","sourceRoot":"","sources":["../../../../src/web/shadowRegistry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAC/D,OAAO,KAAK,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAOnE,qBAAa,uBAAuB;IAYpB,OAAO,CAAC,QAAQ;IAV5B,IAAI,SAA4B;IAChC,MAAM,SAAQ;IACd,MAAM,gBAAa;IACnB,QAAQ,eAAkC;IAC1C,OAAO,aAAW;IAGlB,OAAO,CAAC,WAAW,CAAwC;IAC3D,OAAO,CAAC,UAAU,CAAkC;gBAEhC,QAAQ,EAAE,iBAAiB;IAE/C,GAAG,GAAI,KAAK,GAAG,EAAE,OAAO,MAAM,UAM7B;IAED,SAAS,GAAI,WAAW,KAAK,CAAC,eAAe,CAAC,EAAE,WAAW,OAAO;;;;MAsEjE;IAED,cAAc,GAAI,QAAQ,cAAc,UAEvC;IAED,cAAc,kBAAyB;IAEvC,MAAM,GAAI,KAAK,GAAG,EAAE,OAAO,MAAM,UAahC;IAED,KAAK,aAGJ;IAED,KAAK,aAAW;CACnB"}
+{"version":3,"file":"shadowRegistry.d.ts","sourceRoot":"","sources":["../../../../src/web/shadowRegistry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAC/D,OAAO,KAAK,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAOnE,qBAAa,uBAAuB;IAYpB,OAAO,CAAC,QAAQ;IAV5B,IAAI,SAA4B;IAChC,MAAM,SAAQ;IACd,MAAM,gBAAa;IACnB,QAAQ,eAAkC;IAC1C,OAAO,aAAW;IAGlB,OAAO,CAAC,WAAW,CAAwC;IAC3D,OAAO,CAAC,UAAU,CAAkC;gBAEhC,QAAQ,EAAE,iBAAiB;IAE/C,GAAG,GAAI,KAAK,GAAG,EAAE,OAAO,MAAM,UAM7B;IAED,SAAS,GAAI,WAAW,KAAK,CAAC,eAAe,CAAC,EAAE,WAAW,OAAO;;;;MAsEjE;IAED,cAAc,GAAI,QAAQ,cAAc,UAIvC;IAED,cAAc,kBAAyB;IAEvC,MAAM,GAAI,KAAK,GAAG,EAAE,OAAO,MAAM,UAahC;IAED,KAAK,aAGJ;IAED,KAAK,aAAW;CACnB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-unistyles",
-  "version": "3.5.1",
+  "version": "3.5.2",
   "description": "Level up your React Native StyleSheet",
   "scripts": {
     "test": "NODE_ENV=babel-test jest ./plugin ./src/__tests__",

package/src/components/AdaptiveTheme.tsx

@@ -1,12 +1,14 @@
 import type { PropsWithChildren } from 'react'
 
-import React, { useLayoutEffect } from 'react'
+import React, { useLayoutEffect, useMemo } from 'react'
 
 import type { UnistylesThemes } from '../global'
 
 import { useUnistyles } from '../core'
 import { UnistylesShadowRegistry } from '../specs'
 import { ApplyScopedTheme } from './ApplyScopedTheme'
+import { scopeChildren } from './scopeChildren'
+import { ScopedThemeContext } from './ScopedThemeContext'
 
 interface AdaptiveThemeProps extends PropsWithChildren {
     previousScopedTheme?: string
@@ -15,9 +17,13 @@ interface AdaptiveThemeProps extends PropsWithChildren {
 export const AdaptiveTheme: React.FunctionComponent<AdaptiveThemeProps> = ({ children, previousScopedTheme }) => {
     const { rt } = useUnistyles()
     const name = (rt.colorScheme === 'dark' ? 'light' : 'dark') as keyof UnistylesThemes
+    const scope = useMemo(() => ({ name }), [name])
+
     const mappedChildren = [
         <ApplyScopedTheme key={name} name={name} />,
-        children,
+        <ScopedThemeContext.Provider key="scope" value={scope}>
+            {scopeChildren(name, children)}
+        </ScopedThemeContext.Provider>,
         <ApplyScopedTheme key="dispose" name={previousScopedTheme as keyof UnistylesThemes | undefined} />,
     ]
 

package/src/components/NamedTheme.tsx

@@ -1,11 +1,13 @@
 import type { PropsWithChildren } from 'react'
 
-import React, { useLayoutEffect } from 'react'
+import React, { useLayoutEffect, useMemo } from 'react'
 
 import type { UnistylesThemes } from '../global'
 
 import { UnistylesShadowRegistry } from '../specs'
 import { ApplyScopedTheme } from './ApplyScopedTheme'
+import { scopeChildren } from './scopeChildren'
+import { ScopedThemeContext } from './ScopedThemeContext'
 
 interface NamedThemeProps extends PropsWithChildren {
     name: keyof UnistylesThemes | undefined
@@ -13,9 +15,13 @@ interface NamedThemeProps extends PropsWithChildren {
 }
 
 export const NamedTheme: React.FunctionComponent<NamedThemeProps> = ({ name, children, previousScopedTheme }) => {
+    const scope = useMemo(() => ({ name }), [name])
+
     const mappedChildren = [
         <ApplyScopedTheme key="apply" name={name} />,
-        children,
+        <ScopedThemeContext.Provider key="scope" value={scope}>
+            {scopeChildren(name, children)}
+        </ScopedThemeContext.Provider>,
         <ApplyScopedTheme key="dispose" name={previousScopedTheme as keyof UnistylesThemes | undefined} />,
     ]
 

package/src/components/ScopedThemeContext.ts

@@ -0,0 +1,9 @@
+import { createContext } from 'react'
+
+import type { UnistylesThemes } from '../global'
+
+export type Scope = {
+    name: keyof UnistylesThemes | undefined
+}
+
+export const ScopedThemeContext = createContext<Scope | null>(null)

package/src/components/native/Pressable.native.tsx

@@ -1,12 +1,13 @@
 import type { PressableProps as Props, View } from 'react-native'
 
-import React, { forwardRef, useLayoutEffect, useRef } from 'react'
+import React, { forwardRef, useContext, useLayoutEffect, useRef } from 'react'
 import { Pressable as NativePressableReactNative } from 'react-native'
 
 import type { Nullable } from '../../types'
 
 import { passForwardedRef } from '../../core'
 import { UnistylesShadowRegistry } from '../../specs'
+import { ScopedThemeContext } from '../ScopedThemeContext'
 
 // instance type of View for both legacy and Strict TypeScript API (RN 0.87+)
 type ViewRef = React.ComponentRef<typeof View>
@@ -34,7 +35,7 @@ export const Pressable: React.ForwardRefExoticComponent<PressableProps & React.R
     PressableProps
 >(({ variants, style, ...props }, forwardedRef) => {
     const storedRef = useRef<Nullable<ViewRef>>(null)
-    const scopedTheme = UnistylesShadowRegistry.getScopedTheme()
+    const scope = useContext(ScopedThemeContext)
 
     useLayoutEffect(() => {
         return () => {
@@ -63,7 +64,7 @@ export const Pressable: React.ForwardRefExoticComponent<PressableProps & React.R
                     forwardedRef,
                     () => {
                         // @ts-expect-error - this is hidden from TS
-                        UnistylesShadowRegistry.add(ref, unistyles)
+                        UnistylesShadowRegistry.add(ref, unistyles, scope)
                     },
                     () => {
                         // @ts-expect-error - this is hidden from TS
@@ -75,12 +76,14 @@ export const Pressable: React.ForwardRefExoticComponent<PressableProps & React.R
                 const isPropStyleAFunction = typeof style === 'function'
                 const previousScopedTheme = UnistylesShadowRegistry.getScopedTheme()
 
-                UnistylesShadowRegistry.setScopedTheme(scopedTheme)
+                UnistylesShadowRegistry.setScopedTheme(scope?.name)
 
                 const unistyles = isPropStyleAFunction
                     ? style.call(style, state)
                     : getStyles(style as unknown as Record<string, any>)
 
+                UnistylesShadowRegistry.setScopedTheme(previousScopedTheme)
+
                 if (!storedRef.current) {
                     return unistyles
                 }
@@ -89,9 +92,7 @@ export const Pressable: React.ForwardRefExoticComponent<PressableProps & React.R
                 UnistylesShadowRegistry.remove(storedRef.current)
 
                 // @ts-expect-error - this is hidden from TS
-                UnistylesShadowRegistry.add(storedRef.current, unistyles)
-
-                UnistylesShadowRegistry.setScopedTheme(previousScopedTheme)
+                UnistylesShadowRegistry.add(storedRef.current, unistyles, scope)
 
                 return unistyles
             }}

package/src/components/scopeChildren.native.ts

@@ -0,0 +1,5 @@
+import type React from 'react'
+
+import type { UnistylesThemes } from '../global'
+
+export const scopeChildren = (_name: keyof UnistylesThemes | undefined, children: React.ReactNode) => children

package/src/components/scopeChildren.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+
+import type { UnistylesThemes } from '../global'
+
+import { services } from '../web/services'
+
+export const scopeChildren = (name: keyof UnistylesThemes | undefined, children: React.ReactNode) => {
+    if (!services.state.CSSVars) {
+        return children
+    }
+
+    const scopeProps = name ? { 'data-unistyles-theme': name } : { 'data-unistyles-reset': '' }
+
+    return (
+        <div style={{ display: 'contents' }} {...scopeProps}>
+            {children}
+        </div>
+    )
+}

package/src/core/createUnistylesActivityIndicator.tsx

@@ -1,8 +1,9 @@
 import type { ActivityIndicator } from 'react-native'
 
-import React from 'react'
+import React, { useContext } from 'react'
 
 import { isAndroid } from '../common'
+import { ScopedThemeContext } from '../components/ScopedThemeContext'
 import { UnistylesShadowRegistry } from '../specs'
 import { copyComponentProperties } from '../utils'
 import { passForwardedRef } from './passForwardRef'
@@ -18,6 +19,8 @@ const getWrapperHandle = (ref: any) => {
 
 export const createUnistylesActivityIndicator = (Component: typeof ActivityIndicator) => {
     const UnistylesActivityIndicator = (props: any) => {
+        const scope = useContext(ScopedThemeContext)
+
         return (
             <Component
                 {...props}
@@ -31,7 +34,7 @@ export const createUnistylesActivityIndicator = (Component: typeof ActivityIndic
                         props.ref,
                         () => {
                             // @ts-ignore this is hidden from TS
-                            UnistylesShadowRegistry.add(wrapperHandle, props.style)
+                            UnistylesShadowRegistry.add(wrapperHandle, props.style, scope)
                         },
                         () => {
                             // @ts-ignore this is hidden from TS

package/src/core/createUnistylesElement.native.tsx

@@ -1,7 +1,8 @@
 import type { ScrollView } from 'react-native'
 
-import React, { useRef } from 'react'
+import React, { useContext, useRef } from 'react'
 
+import { ScopedThemeContext } from '../components/ScopedThemeContext'
 import { UnistylesShadowRegistry } from '../specs'
 import { copyComponentProperties } from '../utils'
 import { passForwardedRef } from './passForwardRef'
@@ -10,6 +11,7 @@ import { maybeWarnAboutMultipleUnistyles } from './warn'
 export const createUnistylesElement = (Component: any) => {
     const UnistylesComponent = (props: any) => {
         const scrollViewRef = useRef<ScrollView>(null)
+        const scope = useContext(ScopedThemeContext)
 
         return (
             <Component
@@ -38,7 +40,7 @@ export const createUnistylesElement = (Component: any) => {
                         props.ref,
                         () => {
                             // @ts-ignore this is hidden from TS
-                            UnistylesShadowRegistry.add(ref, props.style)
+                            UnistylesShadowRegistry.add(ref, props.style, scope)
                         },
                         () => {
                             // @ts-ignore this is hidden from TS

package/src/core/createUnistylesImageBackground.tsx

@@ -1,7 +1,8 @@
 import type { ImageBackground, ImageBackgroundProps } from 'react-native'
 
-import React from 'react'
+import React, { useContext } from 'react'
 
+import { ScopedThemeContext } from '../components/ScopedThemeContext'
 import { UnistylesShadowRegistry } from '../specs'
 import { copyComponentProperties } from '../utils'
 import { passForwardedRef } from './passForwardRef'
@@ -9,6 +10,8 @@ import { maybeWarnAboutMultipleUnistyles } from './warn'
 
 export const createUnistylesImageBackground = (Component: typeof ImageBackground) => {
     const UnistylesImageBackground = React.forwardRef<ImageBackground, ImageBackgroundProps>((props, forwardedRef) => {
+        const scope = useContext(ScopedThemeContext)
+
         // @ts-expect-error we don't know the type of the component
         maybeWarnAboutMultipleUnistyles(props.style, 'ImageBackground')
         // @ts-ignore we don't know the type of the component
@@ -23,7 +26,7 @@ export const createUnistylesImageBackground = (Component: typeof ImageBackground
                         forwardedRef,
                         () => {
                             // @ts-expect-error - this is hidden from TS
-                            UnistylesShadowRegistry.add(ref, props.style)
+                            UnistylesShadowRegistry.add(ref, props.style, scope)
                         },
                         () => {
                             // @ts-expect-error - this is hidden from TS
@@ -33,7 +36,7 @@ export const createUnistylesImageBackground = (Component: typeof ImageBackground
                 }}
                 imageRef={(ref) => {
                     // @ts-expect-error web types are not compatible with RN styles
-                    UnistylesShadowRegistry.add(ref, props.imageStyle)
+                    UnistylesShadowRegistry.add(ref, props.imageStyle, scope)
 
                     return () => {
                         // @ts-ignore this is hidden from TS

package/src/core/createUnistylesTouchableHighlight.tsx

@@ -1,7 +1,8 @@
 import type { TouchableHighlight } from 'react-native'
 
-import React, { useCallback, useLayoutEffect, useRef, useState } from 'react'
+import React, { useCallback, useContext, useLayoutEffect, useRef, useState } from 'react'
 
+import { ScopedThemeContext } from '../components/ScopedThemeContext'
 import { UnistylesShadowRegistry } from '../specs'
 import { copyComponentProperties } from '../utils'
 import { passForwardedRef } from './passForwardRef'
@@ -9,6 +10,7 @@ import { maybeWarnAboutMultipleUnistyles } from './warn'
 
 export const createUnistylesTouchableHighlight = (Component: typeof TouchableHighlight) => {
     const UnistylesTouchableHighlight = (props: any) => {
+        const scope = useContext(ScopedThemeContext)
         const relinkRef = useRef<() => void>(undefined)
         const [hiddenUnderlays, setHiddenUnderlays] = useState(0)
 
@@ -18,22 +20,16 @@ export const createUnistylesTouchableHighlight = (Component: typeof TouchableHig
             }
         }, [hiddenUnderlays])
 
-        // new props come with a parent render, re-renders for the underlay keep the ref and the scoped theme it captured
+        // new props come with a parent render, re-renders for the underlay keep the ref
         const ref = useCallback(
             (ref: unknown) => {
                 maybeWarnAboutMultipleUnistyles(props.style, 'TouchableHighlight')
 
-                const scopedTheme = UnistylesShadowRegistry.getScopedTheme()
-
                 relinkRef.current = () => {
-                    const previousScopedTheme = UnistylesShadowRegistry.getScopedTheme()
-
-                    UnistylesShadowRegistry.setScopedTheme(scopedTheme)
                     // @ts-ignore this is hidden from TS
                     UnistylesShadowRegistry.remove(ref)
                     // @ts-ignore this is hidden from TS
-                    UnistylesShadowRegistry.add(ref, props.style)
-                    UnistylesShadowRegistry.setScopedTheme(previousScopedTheme)
+                    UnistylesShadowRegistry.add(ref, props.style, scope)
                 }
 
                 return passForwardedRef(
@@ -41,7 +37,7 @@ export const createUnistylesTouchableHighlight = (Component: typeof TouchableHig
                     props.ref,
                     () => {
                         // @ts-ignore this is hidden from TS
-                        UnistylesShadowRegistry.add(ref, props.style)
+                        UnistylesShadowRegistry.add(ref, props.style, scope)
                     },
                     () => {
                         relinkRef.current = undefined
@@ -50,7 +46,7 @@ export const createUnistylesTouchableHighlight = (Component: typeof TouchableHig
                     },
                 )
             },
-            [props],
+            [props, scope],
         )
 
         return (

package/src/core/useProxifiedUnistyles/useProxifiedUnistyles.ts

@@ -1,8 +1,9 @@
-import { useEffect, useLayoutEffect, useReducer, useRef, useState } from 'react'
+import { useContext, useEffect, useLayoutEffect, useReducer, useRef, useState } from 'react'
 
 import type { UnistylesTheme } from '../../types'
 
-import { type UnistylesMiniRuntime, UnistylesRuntime, UnistylesShadowRegistry } from '../../specs'
+import { ScopedThemeContext } from '../../components/ScopedThemeContext'
+import { type UnistylesMiniRuntime, UnistylesRuntime } from '../../specs'
 // It's imported that way because of circular dependency
 import { UnistyleDependency } from '../../specs/NativePlatform'
 import { listener } from './listener'
@@ -29,10 +30,9 @@ const RTDependencyMap = {
     rtl: UnistyleDependency.Rtl,
 } satisfies Partial<Record<keyof UnistylesMiniRuntime, UnistyleDependency>>
 
-export const useProxifiedUnistyles = (forcedTheme?: UnistylesTheme) => {
-    const [scopedTheme, setScopedTheme] = useState(
-        forcedTheme ?? (UnistylesShadowRegistry.getScopedTheme() as UnistylesTheme),
-    )
+export const useProxifiedUnistyles = () => {
+    const scope = useContext(ScopedThemeContext)
+    const [scopedTheme, setScopedTheme] = useState(scope?.name as UnistylesTheme)
     const [dependencies] = useState(() => new Set<number>())
     const [theme, setTheme] = useState(UnistylesRuntime.getTheme(scopedTheme))
     const [_, runtimeChanged] = useReducer(() => ({}), {})
@@ -68,10 +68,11 @@ export const useProxifiedUnistyles = (forcedTheme?: UnistylesTheme) => {
         }
     }, [disposeRef])
 
-    const maybeNewScopedTheme = UnistylesShadowRegistry.getScopedTheme() as UnistylesTheme
-
-    if (scopedTheme && maybeNewScopedTheme && scopedTheme !== maybeNewScopedTheme) {
-        setScopedTheme(maybeNewScopedTheme)
+    // Follow the closest ScopedTheme, `reset` included. Every ScopedTheme provides the context, so the registry isn't read:
+    // a suspended ScopedTheme can leave its theme there
+    if (scope && scopedTheme !== scope.name) {
+        setScopedTheme(scope.name as UnistylesTheme)
+        setTheme(UnistylesRuntime.getTheme(scope.name as UnistylesTheme))
     }
 
     const proxifiedTheme = new Proxy(theme, {

package/src/core/withUnistyles/withUnistyles.native.tsx

@@ -1,8 +1,16 @@
-import React, { forwardRef, useEffect, useRef, type ComponentProps, type ComponentRef, type ComponentType } from 'react'
-
-import type { UnistylesTheme, UnistylesValues } from '../../types'
+import React, {
+    forwardRef,
+    useContext,
+    useEffect,
+    type ComponentProps,
+    type ComponentRef,
+    type ComponentType,
+} from 'react'
+
+import type { UnistylesValues } from '../../types'
 import type { Mappings } from './types'
 
+import { ScopedThemeContext } from '../../components/ScopedThemeContext'
 import { type UnistyleDependency, UnistylesShadowRegistry } from '../../specs'
 import { deepMergeObjects } from '../../utils'
 import { useProxifiedUnistyles } from '../useProxifiedUnistyles'
@@ -72,8 +80,8 @@ export const withUnistyles = <TComponent, TMappings extends GenericComponentProp
         // prettier-ignore
         maybeWarnAboutMultipleUnistyles(narrowedProps.contentContainerStyle, `withUnistyles(${Component.displayName ?? Component.name ?? 'Unknown'})`)
 
-        const scopedTheme = useRef(UnistylesShadowRegistry.getScopedTheme() as UnistylesTheme)
-        const { proxifiedRuntime, proxifiedTheme, addDependencies } = useProxifiedUnistyles(scopedTheme.current)
+        const scope = useContext(ScopedThemeContext)
+        const { proxifiedRuntime, proxifiedTheme, addDependencies } = useProxifiedUnistyles()
 
         // Always track Theme dependency — accessing any property on proxifiedTheme
         // triggers the Proxy get trap which adds Theme to the dependency Set
@@ -93,9 +101,20 @@ export const withUnistyles = <TComponent, TMappings extends GenericComponentProp
             ? narrowedProps.uniProps(proxifiedTheme, proxifiedRuntime)
             : {}
 
+        // styles resolve in the registry's scoped theme, which is already restored when this re-renders or mounts later
+        const previousScopedTheme = scope ? UnistylesShadowRegistry.getScopedTheme() : undefined
+
+        if (scope) {
+            UnistylesShadowRegistry.setScopedTheme(scope.name)
+        }
+
         const styleSecrets = getSecrets(narrowedProps.style)
         const contentContainerStyleSecrets = getSecrets(narrowedProps.contentContainerStyle)
 
+        if (scope) {
+            UnistylesShadowRegistry.setScopedTheme(previousScopedTheme)
+        }
+
         const finalProps = {
             ...deepMergeObjects(mappingsProps, unistyleProps, props),
             ...(narrowedProps.style

package/src/reanimated/useAnimatedTheme.native.ts

@@ -1,20 +1,20 @@
-import { useEffect, useState } from 'react'
+import { useContext, useEffect, useState } from 'react'
 import { type SharedValue, useSharedValue } from 'react-native-reanimated'
 
 import type { UnistylesTheme } from '../types'
 
-import { StyleSheet, UnistyleDependency, UnistylesRuntime, UnistylesShadowRegistry } from '../specs'
+import { ScopedThemeContext } from '../components/ScopedThemeContext'
+import { StyleSheet, UnistyleDependency, UnistylesRuntime } from '../specs'
 
 export const useAnimatedTheme = () => {
-    const [scopedTheme, setScopedTheme] = useState(
-        () => UnistylesShadowRegistry.getScopedTheme() as UnistylesTheme | undefined,
-    )
+    const scope = useContext(ScopedThemeContext)
+    const [scopedTheme, setScopedTheme] = useState(scope?.name 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))
+    // Follow the closest ScopedTheme, see useProxifiedUnistyles
+    if (scope && scopedTheme !== scope.name) {
+        setScopedTheme(scope.name as UnistylesTheme | undefined)
+        theme.set(UnistylesRuntime.getTheme(scope.name as UnistylesTheme | undefined))
     }
 
     useEffect(() => {

package/src/reanimated/useAnimatedTheme.ts

@@ -1,21 +1,21 @@
-import { useEffect, useState } from 'react'
+import { useContext, useEffect, useState } from 'react'
 import { type SharedValue, useSharedValue } from 'react-native-reanimated'
 
 import type { UnistylesTheme } from '../types'
 
-import { UnistyleDependency, UnistylesRuntime, UnistylesShadowRegistry } from '../specs'
+import { ScopedThemeContext } from '../components/ScopedThemeContext'
+import { UnistyleDependency, UnistylesRuntime } from '../specs'
 import { services } from '../web/services'
 
 export const useAnimatedTheme = () => {
-    const [scopedTheme, setScopedTheme] = useState(
-        () => UnistylesShadowRegistry.getScopedTheme() as UnistylesTheme | undefined,
-    )
+    const scope = useContext(ScopedThemeContext)
+    const [scopedTheme, setScopedTheme] = useState(scope?.name 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))
+    // Follow the closest ScopedTheme, see useProxifiedUnistyles
+    if (scope && scopedTheme !== scope.name) {
+        setScopedTheme(scope.name as UnistylesTheme | undefined)
+        theme.set(UnistylesRuntime.getTheme(scope.name as UnistylesTheme | undefined))
     }
 
     useEffect(() => {

package/src/specs/ShadowRegistry/index.ts

@@ -1,5 +1,6 @@
 import { NitroModules } from 'react-native-nitro-modules'
 
+import type { Scope } from '../../components/ScopedThemeContext'
 import type { VerifyReport } from '../../diagnostics/types'
 import type { UnistylesShadowRegistry as UnistylesShadowRegistrySpec } from './ShadowRegistry.nitro'
 import type { ShadowNode, Unistyle, ViewHandle } from './types'
@@ -8,7 +9,7 @@ import { StyleSheet } from '../StyleSheet'
 
 interface ShadowRegistry extends UnistylesShadowRegistrySpec {
     // Babel API
-    add(handle?: ViewHandle, styles?: Array<Unistyle>): void
+    add(handle?: ViewHandle, styles?: Array<Unistyle>, scope?: Scope | null): void
     remove(handle?: ViewHandle): void
     // JSI
     link(node: ShadowNode, styles?: Array<Unistyle>): void
@@ -189,18 +190,17 @@ const splitMergedUnistyles = (style: any) => {
     return style
 }
 
-HybridShadowRegistry.add = (handle, styles) => {
+HybridShadowRegistry.add = (handle, styles, scope) => {
     // virtualized nodes can be null
     if (!handle || !styles) {
         return
     }
 
-    const stylesArray = Array.isArray(styles) ? styles.flat() : [styles]
+    const stylesArray = Array.isArray(styles) ? styles.flat(Infinity) : [styles]
 
     // filter styles that are undefined or with no keys
     const filteredStyles = stylesArray
         .filter((style) => style && Object.keys(style).length > 0)
-        .flat()
         .filter(Boolean)
         .flatMap(splitMergedUnistyles)
 
@@ -213,7 +213,19 @@ HybridShadowRegistry.add = (handle, styles) => {
             )
         }
 
+        // the view can link after its ScopedTheme rendered, when the registry is already restored
+        const previousScopedTheme = scope ? HybridShadowRegistry.getScopedTheme() : undefined
+
+        if (scope) {
+            HybridShadowRegistry.setScopedTheme(scope.name)
+        }
+
         HybridShadowRegistry.link(node, filteredStyles)
+
+        if (scope) {
+            HybridShadowRegistry.setScopedTheme(previousScopedTheme)
+        }
+
         trackHandle(handle)
     }
 }

package/src/web/css/state.ts

@@ -89,11 +89,19 @@ export class CSSState {
 
         Object.entries(values).forEach(([key, value]) => convertToCSS(key, value))
 
+        // ScopedTheme renders an element with data-unistyles-theme (or data-unistyles-reset for `reset`),
+        // so the variables follow the closest scope and styles don't need to know it while they render
         if (theme === 'light' || theme === 'dark') {
-            this.themesCSS.set(`media ${theme}`, `@media (prefers-color-scheme: ${theme}){:root{${themeVars}}}`)
+            this.themesCSS.set(
+                `media ${theme}`,
+                `@media (prefers-color-scheme: ${theme}){:root,[data-unistyles-reset]{${themeVars}}}`,
+            )
         }
 
-        this.themesCSS.set(theme, `:root.${theme}{${themeVars}}`)
+        this.themesCSS.set(
+            theme,
+            `:root.${theme},:root.${theme} [data-unistyles-reset],[data-unistyles-theme="${theme}"]{${themeVars}}`,
+        )
     }
 
     remove = (hash: string) => {

package/src/web/shadowRegistry.ts

@@ -101,7 +101,9 @@ export class UnistylesShadowRegistry {
     }
 
     setScopedTheme = (theme?: UnistylesTheme) => {
-        this.scopedTheme = theme
+        // With CSS variables, the closest ScopedTheme element picks the theme, so styles are the same in every scope.
+        // Keeping no scope here also means a suspended ScopedTheme can't leave it behind
+        this.scopedTheme = this.services.state.CSSVars ? undefined : theme
     }
 
     getScopedTheme = () => this.scopedTheme