react-native-unistyles 3.0.0-beta.7 → 3.0.0-experimental-2025051401

package/reanimated/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../lib/commonjs/reanimated/index",
+  "module": "../lib/module/reanimated/index",
+  "react-native": "../src/reanimated/index",
+  "types": "../lib/typescript/src/reanimated/index"
+}

package/server/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../lib/commonjs/server/index",
+  "module": "../lib/module/server/index",
+  "react-native": "../src/server/index",
+  "types": "../lib/typescript/src/server/index"
+}

package/src/components/native/Image.native.tsx

@@ -0,0 +1,4 @@
+import { Image as NativeImage } from 'react-native'
+import { createUnistylesElement } from '../../core'
+
+export const Image = createUnistylesElement(NativeImage)

package/src/components/native/Image.tsx

@@ -1,4 +1,37 @@
-import { Image as NativeImage } from 'react-native'
-import { createUnistylesElement } from '../../core'
+import React, { type ComponentProps, forwardRef } from 'react'
+import { type ImageStyle, Image as NativeImage, type StyleProp, type ViewStyle } from 'react-native'
+import { getClassName } from '../../core'
+import { maybeWarnAboutMultipleUnistyles } from '../../core/warn'
+import type { UnistylesValues } from '../../types'
+import { copyComponentProperties } from '../../utils'
+import { checkForProp } from '../../web/utils'
+import { createUnistylesRef } from '../../web/utils/createUnistylesRef'
 
-export const Image = createUnistylesElement(NativeImage)
+type Props = ComponentProps<typeof NativeImage> & {
+    style?: UnistylesValues
+    imageStyle?: UnistylesValues
+}
+
+const UnistylesImage = forwardRef<unknown, Props>((props, forwardedRef) => {
+    const classNames = getClassName(props.style)
+    const ref = createUnistylesRef(classNames, forwardedRef)
+    const hasWidthStyle = checkForProp(props.style, 'width')
+    const hasHeightStyle = checkForProp(props.style, 'height')
+
+    maybeWarnAboutMultipleUnistyles(props.style as ViewStyle, 'Image')
+
+    return (
+        <NativeImage
+            {...props}
+            style={[
+                classNames,
+                // Clear inline width and height extracted from source
+                hasWidthStyle && { width: '' },
+                hasHeightStyle && { height: '' }
+            ] as StyleProp<ImageStyle>}
+            ref={ref}
+        />
+    )
+})
+
+export const Image = copyComponentProperties(NativeImage, UnistylesImage)

package/src/components/native/ImageBackground.tsx

@@ -1,11 +1,12 @@
 import React from 'react'
 import { forwardRef } from 'react'
-import { ImageBackground as NativeImageBackground } from 'react-native'
+import { type ImageStyle, ImageBackground as NativeImageBackground, type StyleProp, type ViewStyle } from 'react-native'
 import { getClassName } from '../../core'
+import { maybeWarnAboutMultipleUnistyles } from '../../core/warn'
 import type { UnistylesValues } from '../../types'
 import { copyComponentProperties } from '../../utils'
-import { UnistylesShadowRegistry } from '../../web'
-import { isServer } from '../../web/utils'
+import { keyInObject } from '../../web/utils'
+import { createUnistylesRef } from '../../web/utils/createUnistylesRef'
 
 type Props = {
     style?: UnistylesValues
@@ -13,45 +14,28 @@ type Props = {
 }
 
 const UnistylesImageBackground = forwardRef<unknown, Props>((props, forwardedRef) => {
-    let storedRef: NativeImageBackground | null = null
-    let storedImageRef: NativeImageBackground | null = null
     const styleClassNames = getClassName(props.style)
     const imageClassNames = getClassName(props.imageStyle)
+    const ref = createUnistylesRef(styleClassNames, forwardedRef)
+    const imageRef = createUnistylesRef(imageClassNames)
+    const hasWidthStyle = typeof props.imageStyle === 'object' && keyInObject(props.imageStyle, 'width')
+    const hasHeightStyle = typeof props.imageStyle === 'object' && keyInObject(props.imageStyle, 'height')
+
+    maybeWarnAboutMultipleUnistyles(props.style as ViewStyle, 'ImageBackground')
+    maybeWarnAboutMultipleUnistyles(props.imageStyle as ViewStyle, 'ImageBackground')
 
     return (
-        // @ts-expect-error - RN types are not compatible with RNW styles
         <NativeImageBackground
             {...props}
-            style={styleClassNames}
-            imageStyle={imageClassNames}
-            ref={isServer() ? undefined : ref => {
-                if (!ref) {
-                    // @ts-expect-error hidden from TS
-                    UnistylesShadowRegistry.remove(storedRef, styleClassNames?.hash)
-                }
-
-                storedRef = ref
-                // @ts-expect-error hidden from TS
-                UnistylesShadowRegistry.add(ref, styleClassNames?.hash)
-
-                if (typeof forwardedRef === 'function') {
-                    return forwardedRef(ref)
-                }
-
-                if (forwardedRef) {
-                    forwardedRef.current = ref
-                }
-            }}
-            imageRef={isServer() ? undefined : ref => {
-                if (!ref) {
-                    // @ts-expect-error hidden from TS
-                    UnistylesShadowRegistry.remove(storedImageRef, imageClassNames?.hash)
-                }
-
-                storedImageRef = ref
-                // @ts-expect-error hidden from TS
-                UnistylesShadowRegistry.add(ref, imageClassNames?.hash)
-            }}
+            style={styleClassNames as StyleProp<ViewStyle>}
+            imageStyle={[
+                imageClassNames,
+                // Clear inline width and height extracted from source
+                hasWidthStyle && { width: '' },
+                hasHeightStyle && { height: '' }
+            ] as StyleProp<ImageStyle>}
+            ref={ref}
+            imageRef={imageRef}
         />
     )
 })

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

@@ -25,7 +25,8 @@ const getStyles = (styleProps: Record<string, any> = {}) => {
 }
 
 export const Pressable = forwardRef<View, PressableProps>(({ variants, style, ...props }, forwardedRef) => {
-    const storedRef = useRef<View | null>()
+    const storedRef = useRef<View | null>(null)
+    const scopedTheme = UnistylesShadowRegistry.getScopedTheme()
 
     useLayoutEffect(() => {
         return () => {
@@ -40,14 +41,34 @@ export const Pressable = forwardRef<View, PressableProps>(({ variants, style, ..
         <NativePressableReactNative
             {...props}
             ref={ref => {
+                const isPropStyleAFunction = typeof style === 'function'
+                const unistyles = isPropStyleAFunction
+                    ? style.call(style, { pressed: false })
+                    : getStyles(style as unknown as Record<string, any>)
+
                 if (ref) {
                     storedRef.current = ref
                 }
 
-                return passForwardedRef(props, ref, forwardedRef)
+                return passForwardedRef(
+                    ref,
+                    forwardedRef,
+                    () => {
+                        // @ts-expect-error - this is hidden from TS
+                        UnistylesShadowRegistry.add(ref, unistyles)
+                    },
+                    () => {
+                        // @ts-expect-error - this is hidden from TS
+                        UnistylesShadowRegistry.remove(ref)
+                    }
+                )
             }}
             style={state => {
                 const isPropStyleAFunction = typeof style === 'function'
+                const previousScopedTheme = UnistylesShadowRegistry.getScopedTheme()
+
+                UnistylesShadowRegistry.setScopedTheme(scopedTheme)
+
                 const unistyles = isPropStyleAFunction
                     ? style.call(style, state)
                     : getStyles(style as unknown as Record<string, any>)
@@ -62,6 +83,8 @@ export const Pressable = forwardRef<View, PressableProps>(({ variants, style, ..
                 // @ts-expect-error - this is hidden from TS
                 UnistylesShadowRegistry.add(storedRef.current, unistyles)
 
+                UnistylesShadowRegistry.setScopedTheme(previousScopedTheme)
+
                 return unistyles
             }}
         />

package/src/core/createUnistylesElement.native.tsx

@@ -38,10 +38,21 @@ export const createUnistylesElement = (Component: any) => {
                         storedRef.current = getNativeRef(Component, ref)
                     }
 
-                    passForwardedRef(props, ref, forwardedRef)
-
                     // @ts-ignore we don't know the type of the component
                     maybeWarnAboutMultipleUnistyles(props.style, Component.displayName)
+
+                    return passForwardedRef(
+                        ref,
+                        forwardedRef,
+                        () => {
+                            // @ts-ignore this is hidden from TS
+                            UnistylesShadowRegistry.add(ref, props.style)
+                        },
+                        () => {
+                            // @ts-ignore this is hidden from TS
+                            UnistylesShadowRegistry.remove(ref)
+                        }
+                    )
                 }}
             />
         )

package/src/core/createUnistylesElement.tsx

@@ -1,45 +1,44 @@
 import React from 'react'
+import type { ViewStyle } from 'react-native'
 import type { UnistylesValues } from '../types'
 import { copyComponentProperties } from '../utils'
-import { UnistylesShadowRegistry } from '../web'
 import { isServer } from '../web/utils'
+import { createUnistylesRef } from '../web/utils/createUnistylesRef'
 import { getClassName } from './getClassname'
 import { maybeWarnAboutMultipleUnistyles } from './warn'
 
+const STYLE_PROPS = ['style', 'contentContainerStyle', 'columnWrapperStyle'] as const
+
 type ComponentProps = {
-    style?: UnistylesValues | Array<UnistylesValues>
+    [K in typeof STYLE_PROPS[number]]?: UnistylesValues
+}
+
+const buildUnistylesProps = (Component: any, props: ComponentProps, forwardedRef: React.ForwardedRef<unknown>) => {
+    const componentStyleProps = 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(
+            classNames[styleProp],
+            styleProp === 'style' ? forwardedRef : undefined
+        )
+    })
+
+    componentStyleProps.forEach(styleProp => {
+        maybeWarnAboutMultipleUnistyles(props[styleProp] as ViewStyle, Component.displayName)
+    })
+
+    return {
+        ...classNames,
+        ref: isServer() ? undefined : (componentRef: any) => refs.forEach(ref => ref?.(componentRef))
+    }
 }
 
 export const createUnistylesElement = (Component: any) => {
     const UnistylesComponent = React.forwardRef<unknown, ComponentProps>((props, forwardedRef) => {
-        let storedRef: HTMLElement | null = null
-        const classNames = getClassName(props.style)
-
         return (
             <Component
                 {...props}
-                style={classNames}
-                ref={isServer() ? undefined : (ref: HTMLElement | null) => {
-                    // @ts-ignore we don't know the type of the component
-                    maybeWarnAboutMultipleUnistyles(props.style, Component.displayName)
-
-                    if (!ref) {
-                        // @ts-expect-error hidden from TS
-                        UnistylesShadowRegistry.remove(storedRef, classNames?.hash)
-                    }
-
-                    storedRef = ref
-                    // @ts-expect-error hidden from TS
-                    UnistylesShadowRegistry.add(ref, classNames?.hash)
-
-                    if (typeof forwardedRef === 'function') {
-                        return forwardedRef(ref)
-                    }
-
-                    if (forwardedRef) {
-                        forwardedRef.current = ref
-                    }
-                }}
+                {...buildUnistylesProps(Component, props, forwardedRef)}
             />
         )
     })

package/src/core/createUnistylesImageBackground.tsx

@@ -27,12 +27,23 @@ export const createUnistylesImageBackground = (Component: typeof ImageBackground
             <Component
                 {...props}
                 ref={ref => {
-                    passForwardedRef(props, ref, forwardedRef)
+                    return passForwardedRef(
+                        ref,
+                        forwardedRef,
+                        () => {
+                            // @ts-expect-error - this is hidden from TS
+                            UnistylesShadowRegistry.add(ref, props.style)
+                        },
+                        () => {
+                            // @ts-expect-error - this is hidden from TS
+                            UnistylesShadowRegistry.remove(ref)
 
-                    return () => {
-                        // @ts-ignore
-                        UnistylesShadowRegistry.remove(ref)
-                    }
+                            if (storedImageRef.current) {
+                                // @ts-expect-error - this is hidden from TS
+                                UnistylesShadowRegistry.remove(storedImageRef.current)
+                            }
+                        }
+                    )
                 }}
                 imageRef={ref => {
                     if (ref) {

package/src/core/getClassname.ts

@@ -1,14 +1,25 @@
 import type { UnistylesValues } from '../types'
-import { UnistylesWeb } from '../web'
+import * as unistyles from '../web/services'
+import { checkForAnimated } from '../web/utils'
 
-export const getClassName = (unistyle: UnistylesValues | undefined | Array<UnistylesValues>) => {
+export const getClassName = (unistyle: UnistylesValues | undefined | Array<UnistylesValues>, forChild?: boolean) => {
     if (!unistyle) {
         return undefined
     }
 
-    const { hash, injectedClassName } = UnistylesWeb.shadowRegistry.addStyles(
-        Array.isArray(unistyle) ? unistyle.flat(Number.POSITIVE_INFINITY) : [unistyle]
+    const flattenedStyles = Array.isArray(unistyle) ? unistyle.flat(Number.POSITIVE_INFINITY) : [unistyle]
+    const animatedStyles = flattenedStyles.filter(checkForAnimated)
+    const regularStyles = flattenedStyles.filter(style => !checkForAnimated(style))
+
+    const { hash, injectedClassName } = unistyles.services.shadowRegistry.addStyles(
+        regularStyles,
+        forChild
     )
 
-    return hash ? { $$css: true, hash, injectedClassName } : undefined
+    return hash
+        ? [
+            { $$css: true, hash, injectedClassName },
+            animatedStyles,
+        ] as const
+        : undefined
 }

package/src/core/passForwardRef.ts

@@ -1,10 +1,10 @@
 import React from 'react'
-import { UnistylesShadowRegistry } from '../specs'
 
 export const passForwardedRef = <T>(
-    props: any,
     ref: T,
-    forwardedRef: React.ForwardedRef<T>
+    forwardedRef: React.ForwardedRef<T>,
+    onMount?: () => void,
+    onUnmount?: () => void
 ) => {
     const passForwardedRef = () => {
         if (typeof forwardedRef === 'function') {
@@ -19,10 +19,10 @@ export const passForwardedRef = <T>(
     }
     const forwardedRefReturnFn = passForwardedRef()
 
-    // @ts-expect-error hidden from TS
-    UnistylesShadowRegistry.add(ref, props.style)
+    onMount?.()
 
     return () => {
         forwardedRefReturnFn?.()
+        onUnmount?.()
     }
 }

package/src/core/useProxifiedUnistyles/listener.ts

@@ -1,10 +1,10 @@
 import { UnistyleDependency } from '../../specs'
-import { UnistylesWeb } from '../../web'
+import * as unistyles from '../../web/services'
 import type { ListenerProps } from './types'
 
 export const listener = ({ dependencies, updateTheme, updateRuntime }: ListenerProps) => {
-    const disposeTheme = UnistylesWeb.listener.addListeners(dependencies.filter(dependency => dependency === UnistyleDependency.Theme), updateTheme)
-    const disposeRuntime = UnistylesWeb.listener.addListeners(dependencies.filter(dependency => dependency !== UnistyleDependency.Theme), updateRuntime)
+    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)
 
     return () => {
         disposeTheme()

package/src/core/useProxifiedUnistyles/useProxifiedUnistyles.ts

@@ -24,6 +24,7 @@ const RTDependencyMap = {
     statusBar: UnistyleDependency.StatusBar,
     pixelRatio: UnistyleDependency.PixelRatio,
     themeName: UnistyleDependency.ThemeName,
+    rtl: UnistyleDependency.Rtl
 } satisfies Partial<Record<keyof UnistylesMiniRuntime, UnistyleDependency>>
 
 export const useProxifiedUnistyles = (forcedTheme?: UnistylesTheme) => {
@@ -31,7 +32,7 @@ export const useProxifiedUnistyles = (forcedTheme?: UnistylesTheme) => {
     const [dependencies] = useState(() => new Set<number>())
     const [theme, setTheme] = useState(UnistylesRuntime.getTheme(scopedTheme))
     const [_, runtimeChanged] = useReducer(() => ({}), {})
-    const disposeRef = useRef<VoidFunction>()
+    const disposeRef = useRef<VoidFunction>(undefined)
 
     const reinitListener = () => {
         disposeRef.current?.()
@@ -63,6 +64,22 @@ export const useProxifiedUnistyles = (forcedTheme?: UnistylesTheme) => {
     })
     const proxifiedRuntime = new Proxy(getMiniRuntime(), {
         get: (target, prop) => {
+            if (prop === 'insets') {
+                return new Proxy(target.insets, {
+                    get: (target, prop) => {
+                        if (prop === 'ime') {
+                            dependencies.add(UnistyleDependency.Ime)
+
+                            return target[prop as keyof typeof target]
+                        }
+
+                        dependencies.add(UnistyleDependency.Insets)
+
+                        return target[prop as keyof typeof target]
+                    }
+                })
+            }
+
             if (prop in RTDependencyMap) {
                 dependencies.add(RTDependencyMap[prop as keyof typeof RTDependencyMap])
             }

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

@@ -1,33 +1,58 @@
 import React, { forwardRef, useEffect, type ComponentType, useRef } from 'react'
 import { type UnistyleDependency, UnistylesShadowRegistry } from '../../specs'
 import type { UnistylesTheme } from '../../types'
-import type { PartialBy } from '../../types/common'
 import { deepMergeObjects } from '../../utils'
 import { useProxifiedUnistyles } from '../useProxifiedUnistyles'
 import { maybeWarnAboutMultipleUnistyles } from '../warn'
-import type { Mappings, SupportedStyleProps } from './types'
+import type { Mappings } from './types'
 
 // @ts-expect-error
 type GenericComponentProps<P> = ComponentProps<P>
 // @ts-expect-error
 type GenericComponentRef<T> = ComponentRef<T>
 
+type UnistylesSecrets = {
+    uni__getStyles: () => Record<string, any>,
+    uni__dependencies: Array<UnistyleDependency>
+}
+
+type MappedSecrets = {
+    styles: Record<string, any>,
+    dependencies: Array<UnistyleDependency>
+}
+
 export const withUnistyles = <TComponent, TMappings extends GenericComponentProps<TComponent>>(Component: TComponent, mappings?: Mappings<TMappings>) => {
     type TProps = GenericComponentProps<TComponent>
-    type PropsWithUnistyles = PartialBy<TProps, keyof TMappings | SupportedStyleProps> & {
+    type PropsWithUnistyles = Partial<TProps> & {
         uniProps?: Mappings<TProps>
     }
-    const getSecrets = (styleProps: Record<string, any> = {}): { uni__getStyles(): any, uni__dependencies: Array<UnistyleDependency> } => {
-        const unistyleKey = Object
-            .keys(styleProps)
-            .find(key => key.startsWith('unistyles_'))
-
-        return unistyleKey
-            ? styleProps[unistyleKey]
-            : {
-                uni__getStyles: () => styleProps,
-                uni__dependencies: [],
-            }
+    const getSecrets = (styleProps: Record<string, any> = {}): MappedSecrets => {
+        const styles = Array.isArray(styleProps)
+            ? styleProps.flat()
+            : [styleProps]
+
+        const secrets: Array<UnistylesSecrets> = styles
+            .filter(Boolean)
+            .reduce((acc, style) => {
+                const unistyleKey = Object
+                    .keys(style)
+                    .find(key => key.startsWith('unistyles_'))
+
+                return acc.concat([
+                    unistyleKey
+                        ? style[unistyleKey]
+                        : {
+                            uni__getStyles: () => style,
+                            uni__dependencies: [],
+                        }
+                ])
+            }, [])
+
+        return {
+            styles: secrets.reduce((acc, secret) => Object
+                .assign(acc, secret.uni__getStyles()), {} as Record<string, any>),
+            dependencies: secrets.flatMap(secret => secret.uni__dependencies),
+        }
     }
 
     return forwardRef<GenericComponentRef<TComponent>, PropsWithUnistyles>((props, ref) => {
@@ -46,7 +71,7 @@ export const withUnistyles = <TComponent, TMappings extends GenericComponentProp
             const styleSecrets = getSecrets(narrowedProps.style)
             const contentContainerStyleSecrets = getSecrets(narrowedProps.contentContainerStyle)
 
-            addDependencies(Array.from(new Set([...styleSecrets.uni__dependencies, ...contentContainerStyleSecrets.uni__dependencies])))
+            addDependencies(Array.from(new Set([...styleSecrets.dependencies, ...contentContainerStyleSecrets.dependencies])))
         }, [narrowedProps.style, narrowedProps.contentContainerStyle])
 
         const mappingsProps = mappings ? mappings(proxifiedTheme, proxifiedRuntime) : {}
@@ -58,10 +83,10 @@ export const withUnistyles = <TComponent, TMappings extends GenericComponentProp
         const finalProps = {
             ...deepMergeObjects(mappingsProps, unistyleProps, props),
             ...narrowedProps.style ? {
-                style: styleSecrets.uni__getStyles(),
+                style: styleSecrets.styles,
             } : {},
             ...narrowedProps.contentContainerStyle ? {
-                contentContainerStyle: contentContainerStyleSecrets.uni__getStyles(),
+                contentContainerStyle: contentContainerStyleSecrets.styles,
             } : {},
         } as any
 

package/src/core/withUnistyles/withUnistyles.tsx

@@ -1,11 +1,10 @@
 import React, { type ComponentType, forwardRef, type ComponentProps, type ComponentRef } from 'react'
 import type { UnistylesValues } from '../../types'
-import type { PartialBy } from '../../types/common'
 import { deepMergeObjects } from '../../utils'
 import { getClassName } from '../getClassname'
 import { useProxifiedUnistyles } from '../useProxifiedUnistyles'
 import { maybeWarnAboutMultipleUnistyles } from '../warn'
-import type { Mappings, SupportedStyleProps } from './types'
+import type { Mappings } from './types'
 
 // @ts-expect-error
 type GenericComponentProps<T> = ComponentProps<T>
@@ -14,7 +13,7 @@ type GenericComponentRef<T> = ComponentRef<T>
 
 export const withUnistyles = <TComponent, TMappings extends GenericComponentProps<TComponent>>(Component: TComponent, mappings?: Mappings<TMappings>) => {
     type TProps = GenericComponentProps<TComponent>
-    type PropsWithUnistyles = PartialBy<TProps, keyof TMappings | SupportedStyleProps> & {
+    type PropsWithUnistyles = Partial<TProps> & {
         uniProps?: Mappings<TProps>
     }
     type UnistyleStyles = {
@@ -24,17 +23,27 @@ export const withUnistyles = <TComponent, TMappings extends GenericComponentProp
 
     return forwardRef<GenericComponentRef<TComponent>, PropsWithUnistyles>((props, ref) => {
         const narrowedProps = props as PropsWithUnistyles & UnistyleStyles
-        const styleClassNames = getClassName(narrowedProps.style)
+        const styleClassNames = getClassName(narrowedProps.style, true)
         const contentContainerStyleClassNames = getClassName(narrowedProps.contentContainerStyle)
         const { proxifiedRuntime, proxifiedTheme } = useProxifiedUnistyles()
 
         const mappingsProps = mappings ? mappings(proxifiedTheme, proxifiedRuntime) : {}
         const 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])
+              )
+            : undefined
+
         const combinedProps = {
             ...deepMergeObjects(mappingsProps, unistyleProps, props),
             ...narrowedProps.style ? {
-                style: styleClassNames,
+                // Override default component styles with undefined values to reset them
+                style: emptyStyles
             } : {},
             ...narrowedProps.contentContainerStyle ? {
                 contentContainerStyle: contentContainerStyleClassNames,
@@ -47,7 +56,15 @@ export const withUnistyles = <TComponent, TMappings extends GenericComponentProp
         maybeWarnAboutMultipleUnistyles(narrowedProps.contentContainerStyle, `withUnistyles(${Component.displayName ?? Component.name ?? 'Unknown'})`)
 
         const NativeComponent = Component as ComponentType
+        const [classNames] = styleClassNames ?? []
 
-        return <NativeComponent {...combinedProps} ref={ref} />
+        return (
+            <div
+                className={classNames?.hash}
+                style={{ display: 'contents' }}
+            >
+                <NativeComponent {...combinedProps} ref={ref} />
+            </div>
+        )
     })
 }

package/src/hooks/useMedia.native.ts

@@ -1,6 +1,6 @@
 import { useEffect, useLayoutEffect, useState } from 'react'
-import { isUnistylesMq, isValidMq, parseMq } from '../mq'
 import { StyleSheet, UnistyleDependency, UnistylesRuntime } from '../specs'
+import { isUnistylesMq, isValidMq, parseMq } from '../utils'
 
 export const useMedia = (config: { mq: symbol }) => {
     const computeIsVisible = (): boolean => {

package/src/hooks/useMedia.ts

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react'
-import { isUnistylesMq, isValidMq, parseMq } from '../mq'
+import { isUnistylesMq, isValidMq, parseMq } from '../utils'
 
 export const useMedia = (config: { mq: symbol }) => {
     const disposeRef = useRef(() => {})