react-native-unistyles 3.0.0-rc.4 → 3.0.0

package/src/core/createUnistylesElement.tsx

@@ -7,14 +7,16 @@ import { createUnistylesRef } from '../web/utils/createUnistylesRef'
 import { getClassName } from './getClassname'
 import { maybeWarnAboutMultipleUnistyles } from './warn'
 
-const STYLE_PROPS = ['style', 'contentContainerStyle', 'columnWrapperStyle'] as const
+const STYLE_PROPS = ['contentContainerStyle', 'columnWrapperStyle'] as const
+
+type StyleProp = typeof STYLE_PROPS[number] | 'style'
 
 type ComponentProps = {
-    [K in typeof STYLE_PROPS[number]]?: UnistylesValues
+    [K in StyleProp]?: UnistylesValues
 }
 
 const buildUnistylesProps = (Component: any, props: ComponentProps, forwardedRef: React.ForwardedRef<unknown>) => {
-    const componentStyleProps = STYLE_PROPS.filter(styleProp => styleProp in props)
+    const componentStyleProps = ['style' as const, ...STYLE_PROPS.filter(styleProp => styleProp in props)]
     const classNames = Object.fromEntries(componentStyleProps.map(styleProp => [styleProp, getClassName(props[styleProp])]))
     const refs = componentStyleProps.map(styleProp => {
         return createUnistylesRef(
@@ -34,14 +36,14 @@ const buildUnistylesProps = (Component: any, props: ComponentProps, forwardedRef
 }
 
 export const createUnistylesElement = (Component: any) => {
-    const UnistylesComponent = React.forwardRef<unknown, ComponentProps>((props, forwardedRef) => {
+    const UnistylesComponent = (props: any) => {
         return (
             <Component
                 {...props}
-                {...buildUnistylesProps(Component, props, forwardedRef)}
+                {...buildUnistylesProps(Component, props, props.ref)}
             />
         )
-    })
+    }
 
     return copyComponentProperties(Component, UnistylesComponent)
 }

package/src/core/createUnistylesImageBackground.tsx

@@ -1,5 +1,5 @@
-import React, { useLayoutEffect, useRef } from 'react'
-import type { Image, ImageBackground, ImageBackgroundProps } from 'react-native'
+import React from 'react'
+import type { ImageBackground, ImageBackgroundProps } from 'react-native'
 import { UnistylesShadowRegistry } from '../specs'
 import { copyComponentProperties } from '../utils'
 import { passForwardedRef } from './passForwardRef'
@@ -7,17 +7,6 @@ import { maybeWarnAboutMultipleUnistyles } from './warn'
 
 export const createUnistylesImageBackground = (Component: typeof ImageBackground) => {
     const UnistylesImageBackground = React.forwardRef<ImageBackground, ImageBackgroundProps>((props, forwardedRef) => {
-        const storedImageRef = useRef<Image | null>(null)
-
-        useLayoutEffect(() => {
-            return () => {
-                if (storedImageRef.current) {
-                    // @ts-ignore
-                    UnistylesShadowRegistry.remove(storedImageRef.current)
-                }
-            }
-        }, [])
-
         // @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
@@ -37,21 +26,17 @@ export const createUnistylesImageBackground = (Component: typeof ImageBackground
                         () => {
                             // @ts-expect-error - this is hidden from TS
                             UnistylesShadowRegistry.remove(ref)
-
-                            if (storedImageRef.current) {
-                                // @ts-expect-error - this is hidden from TS
-                                UnistylesShadowRegistry.remove(storedImageRef.current)
-                            }
                         }
                     )
                 }}
                 imageRef={ref => {
-                    if (ref) {
-                        storedImageRef.current = ref
-                    }
-
                     // @ts-expect-error web types are not compatible with RN styles
                     UnistylesShadowRegistry.add(ref, props.imageStyle)
+
+                    return () => {
+                        // @ts-ignore this is hidden from TS
+                        UnistylesShadowRegistry.remove(ref)
+                    }
                 }}
             />
         )

package/src/core/parseBoxShadow.ts

@@ -0,0 +1,87 @@
+import { processColor } from 'react-native'
+
+type BoxShadow = {
+    inset?: boolean
+    offsetX?: number
+    offsetY?: number
+    blurRadius?: number
+    spreadDistance?: number
+    color?: string
+}
+
+const isValue = (str: string | undefined) => str && (str === '0' || str.endsWith('px'))
+
+const parseBoxShadow = (str: string): BoxShadow | undefined => {
+    if (str === 'none') {
+        return undefined
+    }
+
+    // split by space, but not if it's inside of ()
+    const parts = str.split(/\s+(?![^(]*\))/)
+    const lastIndex = parts.length - 1
+    const insetIndex = parts.findIndex(part => part === 'inset')
+
+    // inset can only be at the start or end
+    if (![-1, 0, lastIndex].includes(insetIndex)) {
+        return undefined
+    }
+
+    // if there is no inset, color can only be at the start or end
+    const maybeColorsIndexes = insetIndex === -1
+        ? [0, lastIndex]
+        : insetIndex === lastIndex
+            ? [0, lastIndex - 1]
+            : [1, lastIndex]
+
+    const colorIndex = maybeColorsIndexes.find(index => !isValue(parts[index])) ?? -1
+    const maybeColor = colorIndex !== -1
+        ? parts[colorIndex]
+        : undefined
+    const color = maybeColor && processColor(maybeColor)
+        ? parts[colorIndex]
+        : undefined
+    const values = parts.filter((_, index) => index !== colorIndex && index !== insetIndex)
+
+    // at this point there can be only 4 values
+    if (values.length > 4) {
+        return undefined
+    }
+
+    const [offsetX, offsetY, blurRadius, spreadRadius] = values
+
+    if (!isValue(offsetX) || !isValue(offsetY)) {
+        return undefined
+    }
+
+    const blurRadiusValue = isValue(blurRadius)
+        ? Number.parseFloat(blurRadius as string)
+        : undefined
+
+    if (blurRadiusValue !== undefined && blurRadiusValue < 0) {
+        return undefined
+    }
+
+    return {
+        inset: insetIndex !== -1
+            ? true
+            : undefined,
+        offsetX: Number.parseFloat(offsetX as string),
+        offsetY: Number.parseFloat(offsetY as string),
+        blurRadius: blurRadiusValue ?? 0,
+        spreadDistance: spreadRadius
+            ? Number.parseFloat(spreadRadius as string)
+            : 0,
+        color
+    }
+}
+
+export const parseBoxShadowString = (str: string): Array<BoxShadow> => {
+    const parts = str
+        .split(/,(?![^()]*\))/)
+        .map(part => part.trim().replace('\n', ''))
+        .filter(Boolean)
+        .map(parseBoxShadow)
+        .filter(Boolean) as Array<BoxShadow>
+
+    return parts
+}

package/src/core/useProxifiedUnistyles/listener.native.ts

@@ -10,7 +10,9 @@ export const listener = ({ dependencies, updateTheme, updateRuntime }: ListenerP
         }
 
         if (changedDependencies.some((dependency: UnistyleDependency) => dependencies.includes(dependency))) {
-            updateRuntime()
+            const hasThemeNameChange = changedDependencies.includes(UnistyleDependency.ThemeName)
+
+            updateRuntime(hasThemeNameChange)
         }
     })
 

package/src/core/useProxifiedUnistyles/listener.ts

@@ -4,7 +4,7 @@ import type { ListenerProps } from './types'
 
 export const listener = ({ dependencies, updateTheme, updateRuntime }: ListenerProps) => {
     const disposeTheme = unistyles.services.listener.addListeners(dependencies.filter(dependency => dependency === UnistyleDependency.Theme), updateTheme)
-    const disposeRuntime = unistyles.services.listener.addListeners(dependencies.filter(dependency => dependency !== UnistyleDependency.Theme), updateRuntime)
+    const disposeRuntime = unistyles.services.listener.addListeners(dependencies.filter(dependency => dependency !== UnistyleDependency.Theme), dependency => updateRuntime(dependency === UnistyleDependency.ThemeName))
 
     return () => {
         disposeTheme()

package/src/core/useProxifiedUnistyles/types.ts

@@ -2,6 +2,6 @@ import type { UnistyleDependency } from '../../specs'
 
 export type ListenerProps = {
     updateTheme: VoidFunction,
-    updateRuntime: VoidFunction,
+    updateRuntime(themeNameChange: boolean): void,
     dependencies: Array<UnistyleDependency>
 }

package/src/core/useProxifiedUnistyles/useProxifiedUnistyles.ts

@@ -28,7 +28,7 @@ const RTDependencyMap = {
 } satisfies Partial<Record<keyof UnistylesMiniRuntime, UnistyleDependency>>
 
 export const useProxifiedUnistyles = (forcedTheme?: UnistylesTheme) => {
-    const scopedTheme = forcedTheme ?? UnistylesShadowRegistry.getScopedTheme() as UnistylesTheme
+    const [scopedTheme, setScopedTheme] = useState(forcedTheme ?? UnistylesShadowRegistry.getScopedTheme() as UnistylesTheme)
     const [dependencies] = useState(() => new Set<number>())
     const [theme, setTheme] = useState(UnistylesRuntime.getTheme(scopedTheme))
     const [_, runtimeChanged] = useReducer(() => ({}), {})
@@ -45,7 +45,13 @@ export const useProxifiedUnistyles = (forcedTheme?: UnistylesTheme) => {
 
                 setTheme(UnistylesRuntime.getTheme(scopedTheme))
             },
-            updateRuntime: () => runtimeChanged()
+            updateRuntime: (hasThemeNameChange: boolean) => {
+                if (hasThemeNameChange && scopedTheme) {
+                    return
+                }
+
+                runtimeChanged()
+            }
         })
     }
 
@@ -55,6 +61,13 @@ export const useProxifiedUnistyles = (forcedTheme?: UnistylesTheme) => {
         return () => disposeRef.current?.()
     }, [dependencies.size])
 
+
+    const maybeNewScopedTheme = UnistylesShadowRegistry.getScopedTheme() as UnistylesTheme
+
+    if (scopedTheme && maybeNewScopedTheme && scopedTheme !== maybeNewScopedTheme) {
+        setScopedTheme(maybeNewScopedTheme)
+    }
+
     const proxifiedTheme = new Proxy(theme, {
         get: (target, prop) => {
             dependencies.add(UnistyleDependency.Theme)
@@ -84,6 +97,10 @@ export const useProxifiedUnistyles = (forcedTheme?: UnistylesTheme) => {
                 dependencies.add(RTDependencyMap[prop as keyof typeof RTDependencyMap])
             }
 
+            if (prop === 'themeName' && scopedTheme) {
+                return scopedTheme
+            }
+
             return target[prop as keyof typeof target]
         }
     })

package/src/core/withUnistyles/types.ts

@@ -4,4 +4,4 @@ import type { UnistylesTheme } from '../../types';
 export const SUPPORTED_STYLE_PROPS = ['style', 'contentContainerStyle'] as const
 
 export type SupportedStyleProps = typeof SUPPORTED_STYLE_PROPS[number]
-export type Mappings<T = {}> = (theme: UnistylesTheme, rt: UnistylesMiniRuntime) => Omit<Partial<T>, SupportedStyleProps>
+export type Mappings<T = {}> = (theme: UnistylesTheme, rt: UnistylesMiniRuntime) => Omit<Partial<T>, SupportedStyleProps> & { key?: string }

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

@@ -26,6 +26,7 @@ export const withUnistyles = <TComponent, TMappings extends GenericComponentProp
     type PropsWithUnistyles = Partial<TProps> & {
         uniProps?: Mappings<TProps>
     }
+
     const getSecrets = (styleProps: Record<string, any> = {}): MappedSecrets => {
         const styles = Array.isArray(styleProps)
             ? styleProps.flat()
@@ -74,8 +75,8 @@ export const withUnistyles = <TComponent, TMappings extends GenericComponentProp
             addDependencies(Array.from(new Set([...styleSecrets.dependencies, ...contentContainerStyleSecrets.dependencies])))
         }, [narrowedProps.style, narrowedProps.contentContainerStyle])
 
-        const mappingsProps = mappings ? mappings(proxifiedTheme, proxifiedRuntime) : {}
-        const unistyleProps = narrowedProps.uniProps ? narrowedProps.uniProps(proxifiedTheme, proxifiedRuntime) : {}
+        const { key: mappingsKey, ...mappingsProps } = mappings ? mappings(proxifiedTheme, proxifiedRuntime) : {}
+        const { key: uniPropsKey, ...unistyleProps } = narrowedProps.uniProps ? narrowedProps.uniProps(proxifiedTheme, proxifiedRuntime) : {}
 
         const styleSecrets = getSecrets(narrowedProps.style)
         const contentContainerStyleSecrets = getSecrets(narrowedProps.contentContainerStyle)
@@ -90,6 +91,12 @@ export const withUnistyles = <TComponent, TMappings extends GenericComponentProp
             } : {},
         } as any
 
-        return <NativeComponent {...finalProps as TProps} ref={ref} />
+        return (
+            <NativeComponent
+                key={uniPropsKey || mappingsKey}
+                {...finalProps as TProps}
+                ref={ref}
+            />
+        )
     })
 }

package/src/core/withUnistyles/withUnistyles.tsx

@@ -27,16 +27,15 @@ export const withUnistyles = <TComponent, TMappings extends GenericComponentProp
         const contentContainerStyleClassNames = getClassName(narrowedProps.contentContainerStyle)
         const { proxifiedRuntime, proxifiedTheme } = useProxifiedUnistyles()
 
-        const mappingsProps = mappings ? mappings(proxifiedTheme, proxifiedRuntime) : {}
-        const unistyleProps = narrowedProps.uniProps ? narrowedProps.uniProps(proxifiedTheme, proxifiedRuntime) : {}
-
+        const { key: mappingsKey, ...mappingsProps } = mappings ? mappings(proxifiedTheme, proxifiedRuntime) : {}
+        const { key: uniPropsKey, ...unistyleProps } = narrowedProps.uniProps ? narrowedProps.uniProps(proxifiedTheme, proxifiedRuntime) : {}
 
         const emptyStyles = narrowedProps.style
             ? Object.fromEntries(
-                  Object.entries(Object.getOwnPropertyDescriptors(narrowedProps.style))
-                      .filter(([key]) => !key.startsWith("unistyles") && !key.startsWith("_"))
-                      .map(([key]) => [key, undefined])
-              )
+                Object.entries(Object.getOwnPropertyDescriptors(narrowedProps.style))
+                    .filter(([key]) => !key.startsWith("unistyles") && !key.startsWith("_"))
+                    .map(([key]) => [key, undefined])
+            )
             : undefined
 
         const combinedProps = {
@@ -63,7 +62,11 @@ export const withUnistyles = <TComponent, TMappings extends GenericComponentProp
                 className={classNames?.hash}
                 style={{ display: 'contents' }}
             >
-                <NativeComponent {...combinedProps} ref={ref} />
+                <NativeComponent
+                    key={uniPropsKey || mappingsKey}
+                    {...combinedProps}
+                    ref={ref}
+                />
             </div>
         )
     })

package/src/index.ts

@@ -1,3 +1,11 @@
+import React from 'react'
+
+const [majorReactVersions] = React.version.split('.').map(Number.parseInt)
+
+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 { mq } from './mq'
 export type { UnistylesThemes, UnistylesBreakpoints } from './global'

package/src/mocks.ts

@@ -65,6 +65,8 @@ jest.mock('react-native-unistyles', () => {
         colorScheme: 'unspecified' as ColorScheme,
         contentSizeCategory: 'Medium' as IOSContentSizeCategory,
         orientation: 'portrait' as Orientation,
+        isPortrait: true,
+        isLandscape: false,
         breakpoints: {},
         dispose: () => { },
         equals: () => false,
@@ -91,7 +93,7 @@ jest.mock('react-native-unistyles', () => {
         pixelRatio: 0,
         rtl: false,
         getTheme: () => {
-            return {} as UnistylesTheme
+            return (Object.values(_REGISTRY.themes).at(0) ?? {}) as UnistylesTheme
         },
         setTheme: () => {},
         updateTheme: () => {},
@@ -200,7 +202,8 @@ jest.mock('react-native-unistyles', () => {
                 }
             },
             jsMethods: {
-                processColor: () => null
+                processColor: () => null,
+                parseBoxShadowString: () => []
             },
             hairlineWidth: 1,
             unid: -1,
@@ -214,4 +217,27 @@ jest.mock('react-native-unistyles', () => {
     }
 })
 
+jest.mock('react-native-unistyles/reanimated', () => {
+    const unistyles = require('react-native-unistyles')
+    const mockedSharedValue = (value: any) => ({
+        value
+    })
 
+    return {
+        useAnimatedTheme: () => {
+            const theme = unistyles.useUnistyles().theme
+            const sharedTheme = mockedSharedValue(theme)
+
+            return sharedTheme
+        },
+        useAnimatedVariantColor: () => {
+            const fromValue = mockedSharedValue('#000000')
+            const toValue = mockedSharedValue('#FFFFFF')
+
+            return {
+                fromValue,
+                toValue
+            }
+        },
+    }
+})

package/src/reanimated/index.ts

@@ -1 +1,2 @@
 export { useAnimatedTheme } from './useAnimatedTheme'
+export { useAnimatedVariantColor } from './variant'

package/src/reanimated/variant/index.ts

@@ -0,0 +1 @@
+export * from './useAnimatedVariantColor'

package/src/reanimated/variant/types.ts

@@ -0,0 +1,14 @@
+export type ColorKeys<T> = {
+    [K in keyof T]: K extends string
+        ? K extends `${string}color${string}` | `${string}Color${string}`
+            ? K
+            : never
+        : never
+}[keyof T]
+
+export type UseUpdateVariantColorConfig<T extends Record<string, any>> = {
+    animateCallback?: (from: string, to: string) => void,
+    colorKey: ColorKeys<T>,
+    style: T,
+    secretKey: string | undefined
+}

package/src/reanimated/variant/useAnimatedVariantColor.ts

@@ -0,0 +1,38 @@
+import { interpolateColor, useDerivedValue, useSharedValue } from 'react-native-reanimated'
+import type { ColorKeys } from './types'
+import { useUpdateVariantColor } from './useUpdateVariantColor'
+
+export const useAnimatedVariantColor = <T extends Record<string, any>>(style: T, colorKey: ColorKeys<T>) => {
+    const secretKey = Object.keys(style).find(key => key.startsWith('unistyles_'))
+    // @ts-ignore this is hidden from TS
+    const hasVariants = style[secretKey]?.__stylesheetVariants
+
+    if (!hasVariants || !colorKey.toLowerCase().includes('color')) {
+        throw new Error('useAnimatedVariantColor: Style was not created by Unistyles, does not have variants or has no color property')
+    }
+
+    const { fromValue, toValue } = useUpdateVariantColor({
+        animateCallback: (from, to) => animate(from, to),
+        colorKey,
+        secretKey,
+        style,
+    })
+
+    const progress = useSharedValue(1)
+    const animate = (from: string, to: string) => {
+        'worklet'
+
+        fromValue.set(from)
+        toValue.set(to)
+    }
+
+    const derivedColor = useDerivedValue(() => {
+        return interpolateColor(
+            progress.value,
+            [0, 1],
+            [fromValue.get(), toValue.get()]
+        )
+    })
+
+    return derivedColor
+}

package/src/reanimated/variant/useUpdateVariantColor.native.ts

@@ -0,0 +1,38 @@
+import { useEffect, useLayoutEffect } from 'react'
+import { useSharedValue } from 'react-native-reanimated'
+import { StyleSheet, UnistyleDependency } from '../../specs'
+import type { UseUpdateVariantColorConfig } from './types'
+
+export const useUpdateVariantColor = <T extends Record<string, any>>({
+    colorKey,
+    style,
+    secretKey
+}: UseUpdateVariantColorConfig<T>) => {
+    const fromValue = useSharedValue<string>(style[colorKey])
+    const toValue = useSharedValue<string>(style[colorKey])
+
+    useEffect(() => {
+        // @ts-ignore this is hidden from TS
+        const dispose = StyleSheet.addChangeListener(changedDependencies => {
+            if (changedDependencies.includes(UnistyleDependency.Theme) || changedDependencies.includes(UnistyleDependency.Breakpoints)) {
+                // @ts-ignore
+                const newStyles = style[secretKey]?.uni__getStyles()
+
+                fromValue.set(toValue.value)
+                toValue.set(newStyles[colorKey])
+            }
+        })
+
+        return () => dispose()
+    }, [style, colorKey])
+
+    useLayoutEffect(() => {
+        fromValue.set(toValue.value)
+        toValue.set(style[colorKey])
+    }, [style, colorKey])
+
+    return {
+        fromValue,
+        toValue
+    }
+}

package/src/reanimated/variant/useUpdateVariantColor.ts

@@ -0,0 +1,81 @@
+import { useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react'
+import { runOnUI, useSharedValue } from 'react-native-reanimated'
+import { UnistyleDependency } from '../../specs'
+import type { UnistylesValues } from '../../types'
+import { services } from '../../web/services'
+import { getClosestBreakpointValue } from '../../web/utils'
+import type { UseUpdateVariantColorConfig } from './types'
+
+export const useUpdateVariantColor = <T extends Record<string, any>>({
+    animateCallback,
+    colorKey,
+    style
+}: UseUpdateVariantColorConfig<T>) => {
+    const [dummyDiv] = useState(() => {
+        const div = document.createElement('div')
+
+        div.style.display = 'none'
+        document.body.appendChild(div)
+
+        return div
+    })
+    const parsedStyles = useMemo(() => {
+        return services.shadowRegistry.addStyles([style]).parsedStyles
+    }, [style])
+    const getCurrentColor = useCallback(
+        () => {
+            if (!parsedStyles) {
+                return 'rgb(0, 0, 0)'
+            }
+
+            const currentColor = parsedStyles[colorKey as keyof UnistylesValues] as string | Record<string, string>
+            const currentColorVar = typeof currentColor === 'string'
+                ? currentColor
+                : getClosestBreakpointValue<string>(services.runtime, currentColor) ?? 'rgb(0, 0, 0)'
+
+            if (currentColorVar.startsWith('var(--')) {
+                dummyDiv.style.color = currentColorVar
+
+                return getComputedStyle(dummyDiv).color
+            }
+
+            return currentColorVar
+        },
+        [style, colorKey]
+    )
+    const fromValue = useSharedValue<string>(getCurrentColor())
+    const toValue = useSharedValue<string>(getCurrentColor())
+
+    useEffect(() => {
+        const dispose = services.listener.addListeners([UnistyleDependency.Theme], () => {
+            runOnUI(() => {
+                animateCallback?.(toValue.get(), getCurrentColor())
+            })()
+        })
+
+        return () => dispose()
+    }, [style, colorKey])
+
+    useLayoutEffect(() => {
+        animateCallback?.(toValue.get(), getCurrentColor())
+
+        const colorStyle = parsedStyles?.[colorKey as keyof UnistylesValues]
+
+        if (typeof colorStyle !== 'object' || colorStyle === null) {
+            return
+        }
+
+        const dispose = services.listener.addListeners([UnistyleDependency.Breakpoints], () => {
+            animateCallback?.(toValue.get(), getCurrentColor())
+        })
+
+        return () => dispose()
+    }, [style, colorKey])
+
+    useEffect(() => () => dummyDiv.remove(), [])
+
+    return {
+        fromValue,
+        toValue
+    }
+}

package/src/specs/ShadowRegistry/index.ts

@@ -9,6 +9,7 @@ interface ShadowRegistry extends UnistylesShadowRegistrySpec {
     // JSI
     link(node: ShadowNode, styles?: Array<Unistyle>): void,
     unlink(node: ShadowNode): void,
+    flush(): void,
     setScopedTheme(themeName?: string): void,
     getScopedTheme(): string | undefined
 }
@@ -23,8 +24,13 @@ const findShadowNodeForHandle = (handle: ViewHandle) => {
         ?? handle?.viewRef?.current?.__internalInstanceHandle?.stateNode?.node
         ?? handle?._nativeRef?.__internalInstanceHandle?.stateNode?.node
 
+    // @ts-ignore we don't know the type of handle
+    if (!node && handle?.props?.horizontal && handle?.constructor?.name === 'FlatList') {
+        throw new Error('Unistyles: detected an unsupported FlatList with the horizontal prop. This will cause crashes on Android due to a bug in React Native core. Read more: https://github.com/facebook/react-native/issues/51601')
+    }
+
     if (!node) {
-        throw new Error(`Unistyles: Could not find shadow node for one of your components of type ${handle?.__internalInstanceHandle?.elementType ?? 'unknown'}`)
+        throw new Error(`Unistyles: Could not find shadow node for one of your components of type ${handle?.constructor?.name ?? 'unknown'}`)
     }
 
     return node

package/src/specs/StyleSheet/index.ts

@@ -1,6 +1,7 @@
 import { StyleSheet as NativeStyleSheet, processColor } from 'react-native'
 import type { StyleSheet as NativeStyleSheetType } from 'react-native'
 import { NitroModules } from 'react-native-nitro-modules'
+import { parseBoxShadowString } from '../../core/parseBoxShadow'
 import type { UnistylesBreakpoints, UnistylesThemes } from '../../global'
 import type { CreateUnistylesStyleSheet } from '../../types'
 import type { UnistylesStyleSheet as UnistylesStyleSheetSpec } from './UnistylesStyleSheet.nitro'
@@ -33,7 +34,8 @@ export interface UnistylesStyleSheet extends UnistylesStyleSheetSpec {
     create: CreateUnistylesStyleSheet,
     configure(config: UnistylesConfig): void,
     jsMethods: {
-        processColor: typeof processColor
+        processColor: typeof processColor,
+        parseBoxShadowString: typeof parseBoxShadowString
     }
 }
 
@@ -45,7 +47,8 @@ HybridUnistylesStyleSheet.absoluteFill = NativeStyleSheet.absoluteFill
 HybridUnistylesStyleSheet.flatten = NativeStyleSheet.flatten
 HybridUnistylesStyleSheet.compose = NativeStyleSheet.compose
 HybridUnistylesStyleSheet.jsMethods = {
-    processColor
+    processColor,
+    parseBoxShadowString
 }
 
 HybridUnistylesStyleSheet.init()

package/src/specs/UnistylesRuntime/UnistylesRuntime.nitro.ts

@@ -36,6 +36,8 @@ export interface UnistylesRuntime extends HybridObject<{ ios: 'c++', android: 'c
     readonly pixelRatio: number,
     readonly fontScale: number,
     readonly rtl: boolean,
+    readonly isLandscape: boolean,
+    readonly isPortrait: boolean,
 
     setTheme(themeName: string): void,
     setAdaptiveThemes(isEnabled: boolean): void,

package/src/specs/UnistylesRuntime/index.ts

@@ -44,7 +44,6 @@ const HybridUnistylesRuntime = NitroModules
 
 HybridUnistylesRuntime.statusBar = HybridUnistylesRuntime.createHybridStatusBar()
 HybridUnistylesRuntime.navigationBar = HybridUnistylesRuntime.createHybridNavigationBar()
-HybridUnistylesRuntime._setRootViewBackgroundColor = HybridUnistylesRuntime.setRootViewBackgroundColor
 
 HybridUnistylesRuntime.setRootViewBackgroundColor = (color?: string) => {
     const parsedColor = processColor(color) ?? 0