react-native-unistyles 3.0.0-beta.5 → 3.0.0-beta.7

package/src/components/native/ImageBackground.tsx

@@ -1,17 +1,18 @@
 import React from 'react'
-import { ImageBackground as NativeImageBackground } from 'react-native'
 import { forwardRef } from 'react'
-import type { UnistylesValues } from '../../types'
+import { ImageBackground as NativeImageBackground } from 'react-native'
 import { getClassName } from '../../core'
-import { isServer } from '../../web/utils'
+import type { UnistylesValues } from '../../types'
+import { copyComponentProperties } from '../../utils'
 import { UnistylesShadowRegistry } from '../../web'
+import { isServer } from '../../web/utils'
 
 type Props = {
     style?: UnistylesValues
     imageStyle?: UnistylesValues
 }
 
-export const ImageBackground = forwardRef<unknown, Props>((props, forwardedRef) => {
+const UnistylesImageBackground = forwardRef<unknown, Props>((props, forwardedRef) => {
     let storedRef: NativeImageBackground | null = null
     let storedImageRef: NativeImageBackground | null = null
     const styleClassNames = getClassName(props.style)
@@ -54,3 +55,5 @@ export const ImageBackground = forwardRef<unknown, Props>((props, forwardedRef)
         />
     )
 })
+
+export const ImageBackground = copyComponentProperties(NativeImageBackground, UnistylesImageBackground)

package/src/components/native/NativeText.native.tsx

@@ -0,0 +1,12 @@
+import { type ComponentType, createElement, forwardRef } from 'react'
+import type { TextProps } from 'react-native'
+import { createUnistylesElement } from '../../core'
+
+// credits to @hirbod
+const LeanText = forwardRef((props, ref) => {
+    return createElement('RCTText', { ...props, ref })
+}) as ComponentType<TextProps>
+
+LeanText.displayName = 'RCTText'
+
+export const NativeText = createUnistylesElement(LeanText)

package/src/components/native/NativeText.tsx

@@ -0,0 +1 @@
+export { Text } from './Text'

package/src/components/native/NativeView.native.tsx

@@ -0,0 +1,13 @@
+import { type ComponentType, createElement, forwardRef } from 'react'
+import type { ViewProps } from 'react-native'
+import { createUnistylesElement } from '../../core'
+
+// credits to @hirbod
+const LeanView = forwardRef((props, ref) => {
+    return createElement('RCTView', { ...props, ref })
+}) as ComponentType<ViewProps>
+
+LeanView.displayName = 'RCTView'
+
+// this will match default export from react-native
+export default createUnistylesElement(LeanView)

package/src/components/native/NativeView.tsx

@@ -0,0 +1,3 @@
+import { View } from './View'
+
+export default View

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

@@ -1,17 +1,33 @@
-import React, { forwardRef, useEffect, useRef } from 'react'
+import React, { forwardRef, useLayoutEffect, useRef } from 'react'
 import { Pressable as NativePressableReactNative } from 'react-native'
 import type { PressableProps as Props, View } from 'react-native'
-import { UnistylesShadowRegistry } from '../../specs'
 import { passForwardedRef } from '../../core'
+import { UnistylesShadowRegistry } from '../../specs'
 
 type PressableProps = Props & {
     variants?: Record<string, string | boolean>
 }
 
+const getStyles = (styleProps: Record<string, any> = {}) => {
+    const unistyleKey = Object
+        .keys(styleProps)
+        .find(key => key.startsWith('unistyles_'))
+
+    if (!unistyleKey) {
+        return styleProps
+    }
+
+    return {
+        // styles without C++ state
+        ...styleProps[unistyleKey].uni__getStyles(),
+        [unistyleKey]: styleProps[unistyleKey]
+    }
+}
+
 export const Pressable = forwardRef<View, PressableProps>(({ variants, style, ...props }, forwardedRef) => {
     const storedRef = useRef<View | null>()
 
-    useEffect(() => {
+    useLayoutEffect(() => {
         return () => {
             if (storedRef.current) {
                 // @ts-expect-error - this is hidden from TS
@@ -24,13 +40,6 @@ export const Pressable = forwardRef<View, PressableProps>(({ variants, style, ..
         <NativePressableReactNative
             {...props}
             ref={ref => {
-                const unistyles = typeof style === 'function'
-                    ? style({ pressed: false })
-                    : style
-
-                // @ts-expect-error web types are not compatible with RN styles
-                UnistylesShadowRegistry.add(ref, unistyles)
-
                 if (ref) {
                     storedRef.current = ref
                 }
@@ -38,14 +47,18 @@ export const Pressable = forwardRef<View, PressableProps>(({ variants, style, ..
                 return passForwardedRef(props, ref, forwardedRef)
             }}
             style={state => {
-                const unistyles = typeof style === 'function'
-                    ? style(state)
-                    : style
+                const isPropStyleAFunction = typeof style === 'function'
+                const unistyles = isPropStyleAFunction
+                    ? style.call(style, state)
+                    : getStyles(style as unknown as Record<string, any>)
 
                 if (!storedRef.current) {
                     return unistyles
                 }
 
+                // @ts-expect-error - this is hidden from TS
+                UnistylesShadowRegistry.remove(storedRef.current)
+
                 // @ts-expect-error - this is hidden from TS
                 UnistylesShadowRegistry.add(storedRef.current, unistyles)
 

package/src/components/native/Pressable.tsx

@@ -1,9 +1,9 @@
 import React, { forwardRef } from 'react'
 import { Pressable as NativePressableReactNative } from 'react-native'
 import type { PressableProps as Props, View } from 'react-native'
+import { getClassName } from '../../core'
 import { UnistylesShadowRegistry } from '../../specs'
 import type { UnistylesValues } from '../../types'
-import { getClassName } from '../../core'
 import { isServer } from '../../web/utils'
 
 type Variants = Record<string, string | boolean | undefined>

package/src/core/createUnistylesElement.native.tsx

@@ -1,36 +1,51 @@
-import React, { useEffect, useRef } from 'react'
+import React, { useLayoutEffect, useRef } from 'react'
 import { UnistylesShadowRegistry } from '../specs'
+import { copyComponentProperties } from '../utils'
 import { passForwardedRef } from './passForwardRef'
 import { maybeWarnAboutMultipleUnistyles } from './warn'
 
-export const createUnistylesElement = (Component: any) => React.forwardRef((props, forwardedRef) => {
-    const storedRef = useRef<unknown>(null)
+const getNativeRef = (Component: any, ref: any) => {
+    switch (Component.name) {
+        case 'KeyboardAvoidingView':
+            return ref.viewRef?.current
+        case 'FlatList':
+            return ref.getNativeScrollRef?.()
+        case 'VirtualizedList':
+            return ref.getScrollRef?.()
+        default:
+            return ref
+    }
+}
 
-    useEffect(() => {
-        return () => {
-            if (storedRef.current) {
-                // @ts-ignore
-                UnistylesShadowRegistry.remove(storedRef.current)
-            }
-        }
-    }, [])
+export const createUnistylesElement = (Component: any) => {
+    const UnistylesComponent = React.forwardRef((props, forwardedRef) => {
+        const storedRef = useRef<unknown>(null)
 
-    return (
-        <Component
-            {...props}
-            ref={(ref: unknown) => {
-                if (ref) {
-                    storedRef.current = Component.name === 'KeyboardAvoidingView'
-                        // @ts-ignore this is special case for KeyboardAvoidingView
-                        ? ref.viewRef.current
-                        : ref
+        useLayoutEffect(() => {
+            return () => {
+                if (storedRef.current) {
+                    // @ts-ignore
+                    UnistylesShadowRegistry.remove(storedRef.current)
                 }
+            }
+        }, [])
+
+        return (
+            <Component
+                {...props}
+                ref={(ref: unknown) => {
+                    if (ref) {
+                        storedRef.current = getNativeRef(Component, ref)
+                    }
+
+                    passForwardedRef(props, ref, forwardedRef)
 
-                passForwardedRef(props, ref, forwardedRef)
+                    // @ts-ignore we don't know the type of the component
+                    maybeWarnAboutMultipleUnistyles(props.style, Component.displayName)
+                }}
+            />
+        )
+    })
 
-                // @ts-ignore we don't know the type of the component
-                maybeWarnAboutMultipleUnistyles(props.style, Component.displayName)
-            }}
-        />
-    )
-})
+    return copyComponentProperties(Component, UnistylesComponent)
+}

package/src/core/createUnistylesElement.tsx

@@ -1,43 +1,48 @@
 import React from 'react'
 import type { UnistylesValues } from '../types'
-import { getClassName } from './getClassname'
-import { isServer } from '../web/utils'
+import { copyComponentProperties } from '../utils'
 import { UnistylesShadowRegistry } from '../web'
+import { isServer } from '../web/utils'
+import { getClassName } from './getClassname'
 import { maybeWarnAboutMultipleUnistyles } from './warn'
 
 type ComponentProps = {
     style?: UnistylesValues | Array<UnistylesValues>
 }
 
-export const createUnistylesElement = (Component: any) => React.forwardRef<unknown, ComponentProps>((props, forwardedRef) => {
-    let storedRef: HTMLElement | null = null
-    const classNames = getClassName(props.style)
+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)
 
-    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)
+                    }
 
-                if (!ref) {
+                    storedRef = 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
-                }
-            }}
-        />
-    )
-})
+                    UnistylesShadowRegistry.add(ref, classNames?.hash)
+
+                    if (typeof forwardedRef === 'function') {
+                        return forwardedRef(ref)
+                    }
+
+                    if (forwardedRef) {
+                        forwardedRef.current = ref
+                    }
+                }}
+            />
+        )
+    })
+
+    return copyComponentProperties(Component, UnistylesComponent)
+}

package/src/core/createUnistylesImageBackground.tsx

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

package/src/core/getClassname.ts

@@ -1,13 +1,14 @@
-import type { UnistylesValues } from '../types';
-import { UnistylesShadowRegistry } from '../web';
+import type { UnistylesValues } from '../types'
+import { UnistylesWeb } from '../web'
 
 export const getClassName = (unistyle: UnistylesValues | undefined | Array<UnistylesValues>) => {
     if (!unistyle) {
         return undefined
     }
 
-    // @ts-expect-error hidden from TS
-    const { hash, injectedClassName } = UnistylesShadowRegistry.addStyles(Array.isArray(unistyle) ? unistyle : [unistyle])
+    const { hash, injectedClassName } = UnistylesWeb.shadowRegistry.addStyles(
+        Array.isArray(unistyle) ? unistyle.flat(Number.POSITIVE_INFINITY) : [unistyle]
+    )
 
     return hash ? { $$css: true, hash, injectedClassName } : undefined
 }

package/src/core/useProxifiedUnistyles/useProxifiedUnistyles.ts

@@ -1,5 +1,5 @@
 import { useEffect, useReducer, useRef, useState } from 'react'
-import { UnistylesRuntime, UnistylesShadowRegistry, type UnistylesMiniRuntime } from '../../specs'
+import { type UnistylesMiniRuntime, UnistylesRuntime, UnistylesShadowRegistry } from '../../specs'
 // It's imported that way because of circular dependency
 import { UnistyleDependency } from '../../specs/NativePlatform'
 import type { UnistylesTheme } from '../../types'
@@ -26,8 +26,8 @@ const RTDependencyMap = {
     themeName: UnistyleDependency.ThemeName,
 } satisfies Partial<Record<keyof UnistylesMiniRuntime, UnistyleDependency>>
 
-export const useProxifiedUnistyles = () => {
-    const scopedTheme = UnistylesShadowRegistry.getScopedTheme() as UnistylesTheme
+export const useProxifiedUnistyles = (forcedTheme?: UnistylesTheme) => {
+    const scopedTheme = forcedTheme ?? UnistylesShadowRegistry.getScopedTheme() as UnistylesTheme
     const [dependencies] = useState(() => new Set<number>())
     const [theme, setTheme] = useState(UnistylesRuntime.getTheme(scopedTheme))
     const [_, runtimeChanged] = useReducer(() => ({}), {})

package/src/core/warn.ts

@@ -4,7 +4,7 @@ export const maybeWarnAboutMultipleUnistyles = (style: ViewStyle, displayName =
     if (__DEV__ && style && !Array.isArray(style)) {
         const unistylesKeys = Object
             .keys(style)
-            .filter(key => key.startsWith('unistyles-'))
+            .filter(key => key.startsWith('unistyles_'))
 
         if (unistylesKeys.length > 1) {
             console.warn(`Unistyles: we detected style object with ${unistylesKeys.length} unistyles styles. This might cause no updates or unpredictable behavior. Please check style prop for "${displayName}" and use array syntax instead of object syntax.`)

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

@@ -1,10 +1,11 @@
-import React, { forwardRef, useEffect, type ComponentType } from 'react'
-import type { UnistyleDependency } from '../../specs'
+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 type { Mappings, SupportedStyleProps } from './types'
-import { maybeWarnAboutMultipleUnistyles } from '../warn'
 import { useProxifiedUnistyles } from '../useProxifiedUnistyles'
+import { maybeWarnAboutMultipleUnistyles } from '../warn'
+import type { Mappings, SupportedStyleProps } from './types'
 
 // @ts-expect-error
 type GenericComponentProps<P> = ComponentProps<P>
@@ -19,7 +20,7 @@ export const withUnistyles = <TComponent, TMappings extends GenericComponentProp
     const getSecrets = (styleProps: Record<string, any> = {}): { uni__getStyles(): any, uni__dependencies: Array<UnistyleDependency> } => {
         const unistyleKey = Object
             .keys(styleProps)
-            .find(key => key.startsWith('unistyles-'))
+            .find(key => key.startsWith('unistyles_'))
 
         return unistyleKey
             ? styleProps[unistyleKey]
@@ -38,7 +39,8 @@ export const withUnistyles = <TComponent, TMappings extends GenericComponentProp
         // @ts-ignore we don't know the type of the component
         maybeWarnAboutMultipleUnistyles(narrowedProps.contentContainerStyle, `withUnistyles(${Component.displayName ?? Component.name ?? 'Unknown'})`)
 
-        const { proxifiedRuntime, proxifiedTheme, addDependencies } = useProxifiedUnistyles()
+        const scopedTheme = useRef(UnistylesShadowRegistry.getScopedTheme() as UnistylesTheme)
+        const { proxifiedRuntime, proxifiedTheme, addDependencies } = useProxifiedUnistyles(scopedTheme.current)
 
         useEffect(() => {
             const styleSecrets = getSecrets(narrowedProps.style)

package/src/core/withUnistyles/withUnistyles.tsx

@@ -1,11 +1,11 @@
 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 type { Mappings, SupportedStyleProps } from './types'
-import type { UnistylesValues } from '../../types'
 import { getClassName } from '../getClassname'
-import { maybeWarnAboutMultipleUnistyles } from '../warn'
 import { useProxifiedUnistyles } from '../useProxifiedUnistyles'
+import { maybeWarnAboutMultipleUnistyles } from '../warn'
+import type { Mappings, SupportedStyleProps } from './types'
 
 // @ts-expect-error
 type GenericComponentProps<T> = ComponentProps<T>
@@ -37,7 +37,7 @@ export const withUnistyles = <TComponent, TMappings extends GenericComponentProp
                 style: styleClassNames,
             } : {},
             ...narrowedProps.contentContainerStyle ? {
-                style: contentContainerStyleClassNames,
+                contentContainerStyle: contentContainerStyleClassNames,
             } : {},
         } as any
 

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 { isValidMq, parseMq, isUnistylesMq } from '../mq'
 
 export const useMedia = (config: { mq: symbol }) => {
     const computeIsVisible = (): boolean => {

package/src/mq.ts

@@ -1,6 +1,6 @@
-import type { Nullable } from './types'
 import type { UnistylesBreakpoints } from './global'
 import { UnistylesRuntime } from './specs'
+import type { Nullable } from './types'
 
 const IS_UNISTYLES_REGEX = /:([hw])\[(\d+)(?:,\s*(\d+|Infinity))?]/
 const UNISTYLES_WIDTH_REGEX = /:(w)\[(\d+)(?:,\s*(\d+|Infinity))?]/

package/src/server/getServerUnistyles.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { StyleSheet } from 'react-native'
-import { error, isServer } from '../web/utils'
 import { UnistylesWeb } from '../web'
+import { error, isServer } from '../web/utils'
 import { DefaultServerUnistylesSettings, type ServerUnistylesSettings } from './types'
 
 export const getServerUnistyles = ({ includeRNWStyles = true }: ServerUnistylesSettings = DefaultServerUnistylesSettings) => {
@@ -15,6 +15,7 @@ export const getServerUnistyles = ({ includeRNWStyles = true }: ServerUnistylesS
     return <>
         {rnwStyle && <style id='rnw-style'>{rnwStyle}</style>}
         <style id='unistyles-web'>{css}</style>
-        <script id='unistyles-script'>{`window.__UNISTYLES_STATE__ = ${JSON.stringify(state)}`}</script>
+        {/* biome-ignore lint/security/noDangerouslySetInnerHtml: Needs the json quotes to be unescaped */}
+        <script id='unistyles-script' dangerouslySetInnerHTML={{ __html: `window.__UNISTYLES_STATE__ = ${JSON.stringify(state)}`}} />
     </>
 }

package/src/server/hydrateServerUnistyles.ts

@@ -1,5 +1,5 @@
-import { error, isServer } from '../web/utils'
 import { UnistylesWeb } from '../web'
+import { error, isServer } from '../web/utils'
 
 declare global {
     interface Window {

package/src/server/resetServerUnistyles.ts

@@ -1,5 +1,5 @@
-import { error, isServer } from '../web/utils'
 import { UnistylesWeb } from '../web'
+import { error, isServer } from '../web/utils'
 
 export const resetServerUnistyles = () => {
     if (!isServer()) {

package/src/server/useServerUnistyles.tsx

@@ -1,9 +1,9 @@
 import React, { useRef } from 'react'
 import { isServer } from '../web/utils'
-import { DefaultServerUnistylesSettings, type ServerUnistylesSettings } from './types'
 import { getServerUnistyles } from './getServerUnistyles'
-import { resetServerUnistyles } from './resetServerUnistyles'
 import { hydrateServerUnistyles } from './hydrateServerUnistyles'
+import { resetServerUnistyles } from './resetServerUnistyles'
+import { DefaultServerUnistylesSettings, type ServerUnistylesSettings } from './types'
 
 export const useServerUnistyles = (settings: ServerUnistylesSettings = DefaultServerUnistylesSettings): React.ReactNode | null => {
     const isServerInserted = useRef(false)

package/src/specs/StatusBar/index.ts

@@ -1,6 +1,6 @@
 import { StatusBar as NativeStatusBar } from 'react-native'
-import type { UnistylesStatusBar as UnistylesStatusBarSpec } from './UnistylesStatusBar.nitro'
 import { StatusBarStyle } from '../types'
+import type { UnistylesStatusBar as UnistylesStatusBarSpec } from './UnistylesStatusBar.nitro'
 
 export type StatusBarHiddenAnimation = 'none' | 'fade' | 'slide'
 

package/src/specs/StyleSheet/index.ts

@@ -1,9 +1,9 @@
-import { NitroModules } from 'react-native-nitro-modules'
-import { processColor, StyleSheet as NativeStyleSheet } from 'react-native'
+import { StyleSheet as NativeStyleSheet, processColor } from 'react-native'
 import type { StyleSheet as NativeStyleSheetType } from 'react-native'
-import type { UnistylesStyleSheet as UnistylesStyleSheetSpec } from './UnistylesStyleSheet.nitro'
+import { NitroModules } from 'react-native-nitro-modules'
 import type { UnistylesBreakpoints, UnistylesThemes } from '../../global'
 import type { CreateUnistylesStyleSheet } from '../../types'
+import type { UnistylesStyleSheet as UnistylesStyleSheetSpec } from './UnistylesStyleSheet.nitro'
 
 type UnistylesThemeSettings = {
     initialTheme: (() => keyof UnistylesThemes) | keyof UnistylesThemes
@@ -12,7 +12,8 @@ type UnistylesThemeSettings = {
 }
 
 type UnistylesSettings = UnistylesThemeSettings & {
-    CSSVars?: boolean
+    CSSVars?: boolean,
+    nativeBreakpointsMode?: 'pixels' | 'points'
 }
 
 export type UnistylesConfig = {

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

@@ -1,7 +1,7 @@
 import type { HybridObject } from 'react-native-nitro-modules'
-import type { AppBreakpoint, AppThemeName, Dimensions, Insets } from '../types'
 import type { AndroidContentSizeCategory, IOSContentSizeCategory, WebContentSizeCategory } from '../../types'
 import type { UnistylesNativeMiniRuntime } from '../NativePlatform'
+import type { AppBreakpoint, AppThemeName, Dimensions, Insets } from '../types'
 
 type ColorScheme = 'light' | 'dark' | 'unspecified'
 type Orientation = 'portrait' | 'landscape'

package/src/specs/UnistylesRuntime/index.ts

@@ -1,12 +1,12 @@
 import { processColor } from 'react-native'
 import { NitroModules } from 'react-native-nitro-modules'
-import type { UnistylesRuntime as UnistylesRuntimeSpec, UnistylesMiniRuntime } from './UnistylesRuntime.nitro'
-import type { AppBreakpoint, AppTheme, AppThemeName, Color, ColorScheme, Orientation } from '../types'
-import { attachStatusBarJSMethods, type UnistylesStatusBar } from '../StatusBar'
-import type { UnistylesNavigationBar } from '../NavigtionBar'
-import type { AndroidContentSizeCategory, IOSContentSizeCategory, UnistylesTheme } from '../../types'
 import { isIOS } from '../../common'
 import type { UnistylesThemes } from '../../global'
+import type { AndroidContentSizeCategory, IOSContentSizeCategory, UnistylesTheme } from '../../types'
+import type { UnistylesNavigationBar } from '../NavigtionBar'
+import { type UnistylesStatusBar, attachStatusBarJSMethods } from '../StatusBar'
+import type { AppBreakpoint, AppTheme, AppThemeName, Color, ColorScheme, Orientation } from '../types'
+import type { UnistylesMiniRuntime, UnistylesRuntime as UnistylesRuntimeSpec } from './UnistylesRuntime.nitro'
 
 export interface UnistylesRuntimePrivate extends Omit<UnistylesRuntimeSpec, 'setRootViewBackgroundColor'> {
     readonly colorScheme: ColorScheme,