react-native-unistyles 3.0.0-alpha.9 → 3.0.0-beta.2

package/src/core/createUnistylesComponent.tsx

@@ -0,0 +1,14 @@
+import type { ComponentType } from 'react'
+import type { UnistylesTheme } from '../types'
+import { withUnistyles } from './withUnistyles'
+
+const SUPPORTED_STYLE_PROPS = ['style', 'contentContainerStyle'] as const
+
+type SupportedStyleProps = typeof SUPPORTED_STYLE_PROPS[number]
+
+/**
+ * @deprecated Use withUnistyles instead
+ */
+export const createUnistylesComponent = <TProps extends Record<string, any>, TMappings extends Partial<Omit<TProps, SupportedStyleProps>>>(Component: ComponentType<TProps>, mappings?: (theme: UnistylesTheme) => TMappings) => {
+    return withUnistyles(Component as any, mappings as any)
+}

package/src/core/createUnistylesElement.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+import { passForwardedRef } from './passForwardRef'
+
+export const createUnistylesElement = (Component: any) => React.forwardRef((props, forwardedRef) => (
+    <Component
+        {...props}
+        ref={(ref: unknown) => passForwardedRef(props, ref, forwardedRef)}
+    />
+))

package/src/core/createUnistylesImageBackground.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import type { ImageBackground, ImageBackgroundProps } from 'react-native'
+import { UnistylesShadowRegistry } from '../specs'
+import { passForwardedRef } from './passForwardRef'
+
+export const createUnistylesImageBackground = (Component: typeof ImageBackground) => React.forwardRef<ImageBackground, ImageBackgroundProps>((props, forwardedRef) => (
+    <Component
+        {...props}
+        ref={ref => passForwardedRef(props, ref, forwardedRef)}
+        imageRef={ref => {
+            const style = Array.isArray(props.imageStyle)
+                ? props.imageStyle
+                : [props.imageStyle]
+
+            // @ts-expect-error - This is hidden from TS
+            UnistylesShadowRegistry.add(ref, style)
+
+            return () => {
+                // @ts-expect-error - This is hidden from TS
+                UnistylesShadowRegistry.remove(ref)
+            }
+        }}
+    />
+))

package/src/core/index.ts

@@ -0,0 +1,5 @@
+export { createUnistylesComponent } from './createUnistylesComponent'
+export { createUnistylesElement } from './createUnistylesElement'
+export { createUnistylesImageBackground } from './createUnistylesImageBackground'
+export { withUnistyles } from './withUnistyles'
+export { passForwardedRef } from './passForwardRef'

package/src/core/passForwardRef.ts

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

package/src/core/withUnistyles/index.ts

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

package/src/core/withUnistyles/types.ts

@@ -0,0 +1,7 @@
+import type { UnistylesMiniRuntime } from '../../specs';
+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>

package/src/core/withUnistyles/useDependencies.ts

@@ -0,0 +1,93 @@
+import { useEffect, useReducer, useRef, useState } from 'react'
+import { UnistylesRuntime, UnistylesShadowRegistry, type UnistylesMiniRuntime } from '../../specs'
+// It's imported that way because of circular dependency
+import { UnistyleDependency } from '../../specs/NativePlatform'
+import type { UnistylesTheme } from '../../types'
+import type { Mappings } from './types'
+
+const RTDependencyMap = {
+    breakpoint: UnistyleDependency.Breakpoints,
+    colorScheme: UnistyleDependency.ColorScheme,
+    contentSizeCategory: UnistyleDependency.ContentSizeCategory,
+    hasAdaptiveThemes: UnistyleDependency.AdaptiveThemes,
+    insets: UnistyleDependency.Insets,
+    fontScale: UnistyleDependency.FontScale,
+    isLandscape: UnistyleDependency.Orientation,
+    isPortrait: UnistyleDependency.Orientation,
+    navigationBar: UnistyleDependency.NavigationBar,
+    screen: UnistyleDependency.Dimensions,
+    statusBar: UnistyleDependency.StatusBar,
+    pixelRatio: UnistyleDependency.PixelRatio,
+    themeName: UnistyleDependency.ThemeName,
+} satisfies Partial<Record<keyof UnistylesMiniRuntime, UnistyleDependency>>
+
+type ListenerProps = {
+    updateTheme: VoidFunction,
+    updateRuntime: VoidFunction,
+    dependencies: Array<UnistyleDependency>
+}
+
+export const useDependencies = (listener: (props: ListenerProps) => VoidFunction) => {
+    const scopedTheme = UnistylesShadowRegistry.getScopedTheme() as UnistylesTheme
+    const [dependencies] = useState(() => new Set<number>())
+    const [theme, setTheme] = useState(UnistylesRuntime.getTheme(scopedTheme))
+    const [_, runtimeChanged] = useReducer(() => ({}), {})
+    const disposeRef = useRef<VoidFunction>()
+
+    const reinitListener = () => {
+        disposeRef.current?.()
+        disposeRef.current = listener({
+            dependencies: Array.from(dependencies),
+            updateTheme: () => {
+                if (scopedTheme) {
+                    return
+                }
+
+                setTheme(UnistylesRuntime.getTheme(scopedTheme))
+            },
+            updateRuntime: () => runtimeChanged()
+        })
+    }
+
+    useEffect(() => {
+        reinitListener()
+
+        return () => disposeRef.current?.()
+    }, [dependencies.size])
+
+    return {
+        mappingsCallback: (callback: Mappings) => {
+            const proxifiedTheme = new Proxy(theme, {
+                get: (target, prop) => {
+                    dependencies.add(UnistyleDependency.Theme)
+
+                    return target[prop]
+                }
+            })
+            const proxifiedRuntime = new Proxy(UnistylesRuntime.miniRuntime, {
+                get: (target, prop) => {
+                    if (prop in RTDependencyMap) {
+                        dependencies.add(RTDependencyMap[prop as keyof typeof RTDependencyMap])
+                    }
+
+                    return target[prop as keyof typeof target]
+                }
+            })
+
+            return callback(proxifiedTheme, proxifiedRuntime)
+        },
+        addDependencies: (newDependencies: Array<UnistyleDependency>) => {
+            const dependenciesSize = dependencies.size
+
+            newDependencies.forEach(dependency => {
+                dependencies.add(dependency)
+            })
+
+            if (dependenciesSize === dependencies.size) {
+                return
+            }
+
+            reinitListener()
+        }
+    }
+}

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

@@ -0,0 +1,96 @@
+import React, { forwardRef, useEffect, useRef, type ComponentType } from 'react'
+import { StyleSheet, UnistyleDependency } from '../../specs'
+import type { PartialBy } from '../../types/common'
+import { deepMergeObjects } from '../../utils'
+import { SUPPORTED_STYLE_PROPS } from './types'
+import type { Mappings, SupportedStyleProps } from './types'
+import { useDependencies } from './useDependencies'
+
+// @ts-expect-error
+type GenericComponentProps<P> = ComponentProps<P>
+// @ts-expect-error
+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> & {
+        uniProps?: Mappings<TProps>
+    }
+
+    return forwardRef<GenericComponentRef<TComponent>, PropsWithUnistyles>((props, ref) => {
+        const narrowedProps = props as PropsWithUnistyles
+        const stylesRef = useRef<Record<string, any>>({})
+        const isForcedRef = useRef(false)
+        const NativeComponent = Component as ComponentType
+
+        if (!isForcedRef.current) {
+            SUPPORTED_STYLE_PROPS.forEach(propName => {
+                if (narrowedProps?.[propName]) {
+                    if (Array.isArray(narrowedProps[propName])) {
+                        console.error(`🦄 Unistyles: withUnistyles requires ${propName} to be an object. Please check props for component: ${NativeComponent.displayName}`)
+                    }
+
+                    // @ts-expect-error - this is hidden from TS
+                    if (props[propName].__unistyles_name && !props[propName].__proto__?.getStyle) {
+                        console.error(`🦄 Unistyles: withUnistyles received style that is not bound. You likely used the spread operator on a Unistyle style. Please check props for component: ${NativeComponent.displayName}`)
+                    }
+
+                    stylesRef.current = {
+                        ...stylesRef.current,
+                        [propName]: narrowedProps[propName]
+                    }
+                }
+            })
+        }
+
+        const { mappingsCallback, addDependencies } = useDependencies(({ dependencies, updateTheme, updateRuntime }) => {
+            const listensToTheme = dependencies.includes(UnistyleDependency.Theme)
+            // @ts-expect-error - this is hidden from TS
+            const dispose = StyleSheet.addChangeListener(changedDependencies => {
+                if (listensToTheme && changedDependencies.includes(UnistyleDependency.Theme)) {
+                    updateTheme()
+                }
+
+                if (changedDependencies.some((dependency: UnistyleDependency) => dependencies.includes(dependency))) {
+                    SUPPORTED_STYLE_PROPS.forEach(propName => {
+                        if (narrowedProps?.[propName]) {
+                            stylesRef.current = {
+                                ...stylesRef.current,
+                                // @ts-expect-error - this is hidden from TS
+                                [propName]: props[propName].__proto__?.getStyle?.() || props[propName]
+                            }
+
+                            isForcedRef.current = true
+                        }
+                    })
+
+                    updateRuntime()
+                }
+            })
+
+            return () => dispose()
+        })
+
+        useEffect(() => {
+            const styleDependencies = narrowedProps.style?.__proto__.uni__dependencies ?? [] as Array<UnistyleDependency>
+            const contentContainerStyleDependencies = narrowedProps.contentContainerStyle?.__proto__.uni__dependencies ?? [] as Array<UnistyleDependency>
+
+            addDependencies([...styleDependencies, ...contentContainerStyleDependencies])
+        }, [narrowedProps.style, narrowedProps.contentContainerStyle])
+
+        const mappingProps = mappings ? mappingsCallback(mappings) : {}
+        const unistyleProps = narrowedProps.uniProps ? mappingsCallback(narrowedProps.uniProps) : {}
+        const finalProps = deepMergeObjects<Record<string, any>>(mappingProps, unistyleProps, props)
+
+        // override with Unistyles styles
+        SUPPORTED_STYLE_PROPS.forEach(propName => {
+            if (finalProps[propName]) {
+                finalProps[propName] = stylesRef.current[propName]
+            }
+        })
+
+        isForcedRef.current = false
+
+        return <NativeComponent {...finalProps as TProps} ref={ref} />
+    })
+}

package/src/core/withUnistyles/withUnistyles.tsx

@@ -0,0 +1,90 @@
+import React, { useEffect, useState, type ComponentType, forwardRef, useRef, useMemo, type ComponentProps, type ComponentRef } from 'react'
+import type { PartialBy } from '../../types/common'
+import { UnistylesListener } from '../../web/listener'
+import { UnistylesShadowRegistry } from '../../web'
+import { equal } from '../../web/utils'
+import { deepMergeObjects } from '../../utils'
+import type { Mappings, SupportedStyleProps } from './types'
+import { useDependencies } from './useDependencies'
+import { UnistyleDependency } from '../../specs/NativePlatform'
+import type { UnistylesValues } from '../../types'
+
+const useShadowRegistry = (style?: Record<string, any>) => {
+    const [ref] = useState(document.createElement('div'))
+    const oldClassNames = useRef<Array<string>>([])
+    const classNames = useMemo(() => {
+        if (!style) {
+            return []
+        }
+
+        const newClassNames = UnistylesShadowRegistry.add(ref, [style]) ?? []
+
+        if (equal(oldClassNames.current, newClassNames)) {
+            return oldClassNames.current
+        }
+
+        oldClassNames.current = newClassNames
+
+        return newClassNames
+    }, [style])
+
+    useEffect(() => () => {
+        // Remove styles on unmount
+        if (style) {
+            UnistylesShadowRegistry.add(null, [style])
+        }
+    })
+
+    return classNames
+}
+
+// @ts-expect-error
+type GenericComponentProps<T> = ComponentProps<T>
+// @ts-expect-error
+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> & {
+        uniProps?: Mappings<TProps>
+        style?: UnistylesValues,
+        contentContainerStyle?: UnistylesValues
+    }
+
+    return forwardRef<GenericComponentRef<TComponent>, PropsWithUnistyles>((props, ref) => {
+        const narrowedProps = props as PropsWithUnistyles
+        const styleClassNames = useShadowRegistry(narrowedProps.style)
+        const contentContainerStyleClassNames = useShadowRegistry(narrowedProps.contentContainerStyle)
+        const { mappingsCallback } = useDependencies(({ dependencies, updateTheme, updateRuntime }) => {
+            const disposeTheme = UnistylesListener.addListeners(dependencies.filter(dependency => dependency === UnistyleDependency.Theme), updateTheme)
+            const disposeRuntime = UnistylesListener.addListeners(dependencies.filter(dependency => dependency !== UnistyleDependency.Theme), updateRuntime)
+
+            return () => {
+                disposeTheme()
+                disposeRuntime()
+            }
+        })
+        const mappingsProps = mappings ? mappingsCallback(mappings) : {}
+        const unistyleProps = narrowedProps.uniProps ? mappingsCallback(narrowedProps.uniProps) : {}
+
+        const combinedProps = {
+            ...deepMergeObjects(mappingsProps, unistyleProps, props),
+            ...narrowedProps.style ? {
+                style: {
+                    $$css: true,
+                    'unistyles': styleClassNames.join(' ')
+                },
+            } : {},
+            ...narrowedProps.contentContainerStyle ? {
+                style: {
+                    $$css: true,
+                    'unistyles': contentContainerStyleClassNames.join(' ')
+                },
+            } : {},
+        } as any
+
+        const NativeComponent = Component as ComponentType
+
+        return <NativeComponent {...combinedProps} ref={ref} />
+    })
+}

package/src/hooks/index.ts

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

package/src/hooks/useMedia.native.ts

@@ -0,0 +1,65 @@
+import { useEffect, useLayoutEffect, useState } from 'react'
+import { StyleSheet, UnistyleDependency, UnistylesRuntime } from '../specs'
+import { isValidMq, parseMq, isUnistylesMq } from '../mq'
+
+export const useMedia = (config: { mq: symbol }) => {
+    const computeIsVisible = (): boolean => {
+        const maybeMq = config.mq as unknown as string
+
+        if (!isUnistylesMq(maybeMq)) {
+            console.error(`🦄 Unistyles: Received invalid mq: ${maybeMq}`)
+
+            return false
+        }
+
+        const parsedMq = parseMq(maybeMq)
+
+        if (!isValidMq(parsedMq)) {
+            console.error(`🦄 Unistyles: Received invalid mq where min is greater than max: ${maybeMq}`)
+
+            return false
+        }
+
+        const { width, height } = UnistylesRuntime.screen
+
+        if (parsedMq.minWidth !== undefined && width < parsedMq.minWidth) {
+            return false
+        }
+
+        if (parsedMq.maxWidth !== undefined && width > parsedMq.maxWidth) {
+            return false
+        }
+
+        if (parsedMq.minHeight !== undefined && height < parsedMq.minHeight) {
+            return false
+        }
+
+        if (parsedMq.maxHeight !== undefined && height > parsedMq.maxHeight) {
+            return false
+        }
+
+        return true
+    }
+    const [isVisible, setIsVisible] = useState<boolean | null>(computeIsVisible())
+
+    useEffect(() => {
+        setIsVisible(computeIsVisible())
+    }, [config.mq])
+
+    useLayoutEffect(() => {
+        // @ts-expect-error - this is hidden from TS
+        const removeChangeListener = StyleSheet.addChangeListener((dependencies: Array<UnistyleDependency>) => {
+            if (dependencies.includes(UnistyleDependency.Breakpoints)) {
+                setIsVisible(computeIsVisible())
+            }
+        })
+
+        return () => {
+            removeChangeListener()
+        }
+    }, [config.mq])
+
+    return {
+        isVisible
+    }
+}

package/src/hooks/useMedia.ts

@@ -0,0 +1,47 @@
+import { useEffect, useRef, useState } from 'react'
+import { isUnistylesMq, isValidMq, parseMq } from '../mq'
+
+export const useMedia = (config: { mq: symbol }) => {
+    const disposeRef = useRef(() => {})
+    const [isVisible, setIsVisible] = useState(() => {
+        const maybeMq = config.mq as unknown as string
+
+        if (!isUnistylesMq(maybeMq)) {
+            console.error(`🦄 Unistyles: Received invalid mq: ${maybeMq}`)
+
+            return false
+        }
+
+        const parsedMq = parseMq(maybeMq)
+
+        if (!isValidMq(parsedMq)) {
+            console.error(`🦄 Unistyles: Received invalid mq where min is greater than max: ${maybeMq}`)
+
+            return false
+        }
+
+        const { minWidth, maxWidth, minHeight, maxHeight } = parsedMq
+
+        const mediaQuery = [
+            minWidth !== undefined ? `(min-width: ${minWidth}px)` : undefined,
+            maxWidth !== undefined ? `(max-width: ${maxWidth}px)` : undefined,
+            minHeight !== undefined ? `(min-height: ${minHeight}px)` : undefined,
+            maxHeight !== undefined ? `(max-height: ${maxHeight}px)` : undefined
+        ].filter(Boolean).join(' and ')
+
+        const media = window.matchMedia(mediaQuery)
+        const handler = (event: MediaQueryListEvent) => setIsVisible(event.matches)
+
+        media.addEventListener('change', handler)
+        disposeRef.current = () => media.removeEventListener('change', handler)
+
+        return media.matches
+    })
+
+    // Unmount
+    useEffect(() => () => disposeRef.current(), [])
+
+    return {
+        isVisible
+    }
+}

package/src/index.ts

@@ -1,15 +1,6 @@
-import React from 'react'
-
 export * from './specs'
 export { mq } from './mq'
 export type { UnistylesThemes, UnistylesBreakpoints } from './global'
-
-// todo verify true min version
-const minReactVersionRequiredByUnistyles = '18.3.1'
-
-if (React.version < minReactVersionRequiredByUnistyles) {
-    throw new Error(`
-        You are using an outdated version of React (${React.version}).
-        Unistyles requires at least React ${minReactVersionRequiredByUnistyles}.
-    `)
-}
+export { createUnistylesComponent, withUnistyles } from './core'
+export type { UnistylesVariants } from './types'
+export { Display, Hide, Variants, ScopedTheme } from './components'

package/src/mq.ts

@@ -1,5 +1,10 @@
 import type { Nullable } from './types'
 import type { UnistylesBreakpoints } from './global'
+import { UnistylesRuntime } from './specs'
+
+const IS_UNISTYLES_REGEX = /:([hw])\[(\d+)(?:,\s*(\d+|Infinity))?]/
+const UNISTYLES_WIDTH_REGEX = /:(w)\[(\d+)(?:,\s*(\d+|Infinity))?]/
+const UNISTYLES_HEIGHT_REGEX = /:(h)\[(\d+)(?:,\s*(\d+|Infinity))?]/
 
 type MQValue = keyof UnistylesBreakpoints | number
 
@@ -29,16 +34,8 @@ const getMQValue = (value: Nullable<MQValue>) => {
         return 0
     }
 
-    // todo take it from js
-    const breakpoints = {
-        xs: 0,
-        sm: 300,
-        md: 500,
-        lg: 800,
-        xl: 1200
-    }
+    const breakpoints = UnistylesRuntime.breakpoints
 
-    // @ts-ignore
     return breakpoints[value] ?? 0
 }
 
@@ -48,19 +45,40 @@ const getMQValue = (value: Nullable<MQValue>) => {
  */
 export const mq: MQHandler = {
     only: {
-        width: (wMin: Nullable<MQValue> = 0, wMax: MQValue = Infinity) => (`:w[${getMQValue(wMin)}, ${getMQValue(wMax)}]` as unknown as symbol),
-        height: (hMin: Nullable<MQValue> = 0, hMax: MQValue = Infinity) => (`:h[${getMQValue(hMin)}, ${getMQValue(hMax)}]` as unknown as symbol)
+        width: (wMin: Nullable<MQValue> = 0, wMax: MQValue = Number.POSITIVE_INFINITY) => (`:w[${getMQValue(wMin)}, ${getMQValue(wMax)}]` as unknown as symbol),
+        height: (hMin: Nullable<MQValue> = 0, hMax: MQValue = Number.POSITIVE_INFINITY) => (`:h[${getMQValue(hMin)}, ${getMQValue(hMax)}]` as unknown as symbol)
     },
-    width: (wMin: Nullable<MQValue> = 0, wMax: MQValue = Infinity) => ({
+    width: (wMin: Nullable<MQValue> = 0, wMax: MQValue = Number.POSITIVE_INFINITY) => ({
         and: {
-            height: (hMin: Nullable<MQValue> = 0, hMax: MQValue = Infinity) =>
+            height: (hMin: Nullable<MQValue> = 0, hMax: MQValue = Number.POSITIVE_INFINITY) =>
                 (`:w[${getMQValue(wMin)}, ${getMQValue(wMax)}]:h[${getMQValue(hMin)}, ${getMQValue(hMax)}]` as unknown as symbol)
         }
     }),
-    height: (hMin: Nullable<MQValue> = 0, hMax: MQValue = Infinity) => ({
+    height: (hMin: Nullable<MQValue> = 0, hMax: MQValue = Number.POSITIVE_INFINITY) => ({
         and: {
-            width: (wMin: Nullable<MQValue> = 0, wMax: MQValue = Infinity) =>
+            width: (wMin: Nullable<MQValue> = 0, wMax: MQValue = Number.POSITIVE_INFINITY) =>
                 (`:w[${getMQValue(wMin)}, ${getMQValue(wMax)}]:h[${getMQValue(hMin)}, ${getMQValue(hMax)}]` as unknown as symbol)
         }
     })
 }
+
+export const parseMq = (mq: string) => {
+    const [, width, fromW, toW] = UNISTYLES_WIDTH_REGEX.exec(mq) || []
+    const [, height, fromH, toH] = UNISTYLES_HEIGHT_REGEX.exec(mq) || []
+
+    return {
+        minWidth: !width || fromW === 'Infinity' ? undefined : Number(fromW),
+        maxWidth: !width || toW === 'Infinity' ? undefined : Number(toW),
+        minHeight: !height || fromH === 'Infinity' ? undefined : Number(fromH),
+        maxHeight: !height || toH === 'Infinity' ? undefined : Number(toH),
+    }
+}
+
+export const isUnistylesMq = (mq: string) => IS_UNISTYLES_REGEX.test(mq)
+
+export const isValidMq = (parsedMQ: ReturnType<typeof parseMq>) => {
+    const isWidthValid = parsedMQ.minWidth === undefined || parsedMQ.maxWidth === undefined || parsedMQ.minWidth <= parsedMQ.maxWidth
+    const isHeightValid = parsedMQ.minHeight === undefined || parsedMQ.maxHeight === undefined || parsedMQ.minHeight <= parsedMQ.maxHeight
+
+    return isWidthValid && isHeightValid
+}

package/src/specs/NativePlatform/NativePlatform.nitro.ts

@@ -1,5 +1,5 @@
 import type { HybridObject } from 'react-native-nitro-modules'
-import { type Dimensions, type Insets } from '../types'
+import type { Dimensions, Insets } from '../types'
 
 type ColorScheme = 'dark' | 'light' | 'unspecified'
 type Orientation = 'portrait' | 'landscape'
@@ -18,7 +18,8 @@ export enum UnistyleDependency {
     PixelRatio = 10,
     FontScale = 11,
     StatusBar = 12,
-    NavigationBar = 13
+    NavigationBar = 13,
+    Ime = 14
 }
 
 export interface UnistylesNativeMiniRuntime {
@@ -31,7 +32,8 @@ export interface UnistylesNativeMiniRuntime {
     readonly rtl: boolean
     readonly statusBar: Dimensions,
     readonly navigationBar: Dimensions
-    readonly orientation: Orientation
+    readonly isPortrait: boolean,
+    readonly isLandscape: boolean
 }
 
 // represents any native API that can communicate with Unistyles
@@ -49,13 +51,13 @@ export interface NativePlatform extends HybridObject<{ ios: 'swift', android: 'k
     getPrefersRtlDirection(): boolean,
 
     setRootViewBackgroundColor(color: number): void,
-    setNavigationBarBackgroundColor?(color: number): void,
     setNavigationBarHidden?(isHidden: boolean): void,
     setStatusBarHidden(isHidden: boolean): void,
-    setStatusBarBackgroundColor?(color: number): void,
     setImmersiveMode(isEnabled: boolean): void,
 
     // private
     getMiniRuntime(): UnistylesNativeMiniRuntime,
-    registerPlatformListener(callback: (dependencies: Array<UnistyleDependency>) => void): void
+    registerPlatformListener(callback: (dependencies: Array<UnistyleDependency>, miniRuntime: UnistylesNativeMiniRuntime) => void): void,
+    registerImeListener(callback: (miniRuntime: UnistylesNativeMiniRuntime) => void): void,
+    unregisterPlatformListeners(): void
 }

package/src/specs/NavigtionBar/UnistylesNavigationBar.nitro.ts

@@ -5,6 +5,5 @@ export interface UnistylesNavigationBar extends HybridObject<{ ios: 'c++', andro
     readonly width: number,
     readonly height: number,
 
-    setBackgroundColor(color: number): void,
     setHidden(isHidden: boolean): void
 }

package/src/specs/NavigtionBar/index.ts

@@ -1,25 +1 @@
-import { processColor } from 'react-native'
-import type { UnistylesNavigationBar as UnistylesNavigationBarSpec } from './UnistylesNavigationBar.nitro'
-import type { Color } from '../types'
-
-interface PrivateUnistylesNavigationBar extends Omit<UnistylesNavigationBarSpec, 'setBackgroundColor'> {
-    setBackgroundColor(color?: string): void,
-    _setBackgroundColor(color?: Color): void
-}
-
-export const attachNavigationBarJSMethods = (hybridObject: UnistylesNavigationBar) => {
-    const privateHybrid = hybridObject as PrivateUnistylesNavigationBar
-
-    privateHybrid._setBackgroundColor = hybridObject.setBackgroundColor
-    hybridObject.setBackgroundColor = (color?: string) => {
-        const parsedColor = processColor(color) ?? 0
-
-        privateHybrid._setBackgroundColor(parsedColor as number)
-    }
-}
-
-type PrivateMethods =
-    | '_setBackgroundColor'
-    | 'dispose'
-
-export type UnistylesNavigationBar = Omit<PrivateUnistylesNavigationBar, PrivateMethods>
+export type { UnistylesNavigationBar } from './UnistylesNavigationBar.nitro'