react-native-unistyles 3.5.0 → 3.5.2

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/createUnistylesElement.tsx

@@ -10,7 +10,12 @@ import { isServer } from '../web/utils'
 import { getClassName } from './getClassname'
 import { maybeWarnAboutMultipleUnistyles } from './warn'
 
-const STYLE_PROPS = ['contentContainerStyle', 'columnWrapperStyle'] as const
+const STYLE_PROPS = [
+    'contentContainerStyle',
+    'columnWrapperStyle',
+    'ListHeaderComponentStyle',
+    'ListFooterComponentStyle',
+] as const
 
 type StyleProp = (typeof STYLE_PROPS)[number] | 'style'
 

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/passForwardRef.ts

@@ -6,7 +6,7 @@ export const passForwardedRef = <T>(
     onMount?: () => void,
     onUnmount?: () => void,
 ) => {
-    const passForwardedRef = () => {
+    const passForwardedRef = (): unknown => {
         if (typeof forwardedRef === 'function') {
             return forwardedRef(ref)
         }
@@ -15,14 +15,26 @@ export const passForwardedRef = <T>(
             forwardedRef.current = ref
         }
 
-        return () => {}
+        return undefined
     }
     const forwardedRefReturnFn = passForwardedRef()
 
     onMount?.()
 
     return () => {
-        forwardedRefReturnFn?.()
-        onUnmount?.()
+        try {
+            // React 19 allows a callback ref to return a cleanup function, but returning
+            // any other value is still valid, so it can't be called unconditionally.
+            // Without a cleanup function React detaches the ref with null, so do we.
+            if (typeof forwardedRefReturnFn === 'function') {
+                forwardedRefReturnFn()
+            } else if (typeof forwardedRef === 'function') {
+                forwardedRef(null)
+            } else if (forwardedRef) {
+                forwardedRef.current = null
+            }
+        } finally {
+            onUnmount?.()
+        }
     }
 }

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/mocks.ts

@@ -11,6 +11,10 @@ type Registry = {
     breakpoints: UnistylesBreakpoints
 }
 
+type GlobalWithRegistry = typeof globalThis & {
+    __UNISTYLES_MOCK_REGISTRY__?: Registry
+}
+
 jest.mock('react-native-nitro-modules', () => ({
     NitroModules: {
         createHybridObject: () => ({
@@ -26,10 +30,10 @@ jest.mock('react-native-nitro-modules', () => ({
 
 jest.mock('react-native-unistyles', () => {
     const React = require('react')
-    const _REGISTRY: Registry = {
+    const _REGISTRY = ((globalThis as GlobalWithRegistry).__UNISTYLES_MOCK_REGISTRY__ ??= {
         themes: {},
         breakpoints: {},
-    }
+    })
     const miniRuntime = {
         themeName: undefined,
         breakpoint: undefined,

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/runtime.ts

@@ -80,6 +80,12 @@ export class UnistylesRuntime {
             return Orientation.Portrait
         }
 
+        // `screen.orientation` is undefined in browsers without the Screen
+        // Orientation API (e.g. iOS Safari <= 16.3), fall back to the viewport
+        if (!screen.orientation) {
+            return window.matchMedia('(orientation: portrait)').matches ? Orientation.Portrait : Orientation.Landscape
+        }
+
         return screen.orientation.type.includes('portrait') ? Orientation.Portrait : Orientation.Landscape
     }
 

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