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

package/src/components/Pressable.web.tsx

@@ -0,0 +1,129 @@
+import React, { forwardRef, useEffect, useRef } from 'react'
+import { Pressable as NativePressableReactNative } from 'react-native'
+import type { PressableProps as Props, View, ViewStyle } from 'react-native'
+import { UnistylesShadowRegistry } from '../specs'
+
+type WebPressableState = {
+    pressed: boolean,
+    hovered: boolean,
+    focused: boolean
+}
+
+type WebPressableStyle = ((state: WebPressableState) => ViewStyle) | ViewStyle
+
+type PressableProps = Props & {
+    variants?: Record<string, string | boolean>
+    style?: WebPressableStyle,
+}
+
+const initialState: WebPressableState = {
+    pressed: false,
+    hovered: false,
+    focused: false
+}
+
+const events = {
+    'pointerdown': { pressed: true },
+    'pointerup': { pressed: false },
+    'pointerenter': { hovered: true },
+    'pointerleave': { hovered: false },
+    'focus': { focused: true },
+    'blur': { focused: false }
+} satisfies Partial<Record<keyof HTMLElementEventMap, Partial<WebPressableState>>>
+
+type UpdateStylesProps = {
+    ref: View | null,
+    style: WebPressableStyle,
+    variants?: Record<string, string | boolean>,
+    state: WebPressableState
+}
+
+const isFunctionWithBoundArgs = (fn: any): fn is Function & { getBoundArgs: Function } => {
+    return typeof fn === 'function' && 'getBoundArgs' in fn
+}
+
+const extractFunctionArgs = (styleResult: any) => {
+    return isFunctionWithBoundArgs(styleResult)
+        ? [styleResult.getBoundArgs()]
+        : Array.isArray(styleResult)
+            ? styleResult.map(style => isFunctionWithBoundArgs(style) ? style.getBoundArgs() : [])
+            : []
+}
+
+const extractStyleResult = (style: any) => {
+    return typeof style === 'function'
+        ? [style()]
+        : Array.isArray(style)
+            ? style.map(style => typeof style === 'function' ? style() : style)
+            : [style]
+}
+
+const updateStyles = ({ ref, style, variants, state }: UpdateStylesProps) => {
+    const styleResult = typeof style === 'function'
+        ? style(state)
+        : style
+    const fnArgs = extractFunctionArgs(styleResult)
+    const extractedResult = extractStyleResult(styleResult)
+
+    // @ts-expect-error - this is hidden from TS
+    UnistylesShadowRegistry.add(ref, extractedResult, variants, fnArgs)
+}
+
+export const Pressable = forwardRef<View, PressableProps>(({ variants, style, ...props }, passedRef) => {
+    const storedRef = useRef<View | null>(null)
+    const state = useRef<WebPressableState>(initialState)
+    const styleRef = useRef(style)
+
+    useEffect(() => {
+        styleRef.current = style
+    }, [style])
+
+    useEffect(() => {
+        const handler = (newState: Partial<WebPressableState>) => () => {
+            state.current = { ...state.current, ...newState }
+
+            updateStyles({
+                ref: storedRef.current,
+                style: styleRef.current as WebPressableStyle,
+                variants,
+                state: state.current
+            })
+        }
+
+        if (!storedRef.current) {
+            return
+        }
+
+        // ref on the web is dom element
+        const ref = storedRef.current as unknown as HTMLDivElement
+
+        Object.entries(events).forEach(([event, state]) => {
+            ref.addEventListener(event, handler(state))
+        })
+
+        return () => {
+            Object.entries(events).forEach(([event, state]) => {
+                ref.removeEventListener(event, handler(state))
+            })
+        }
+    }, [])
+
+    return (
+        <NativePressableReactNative
+            {...props}
+            ref={ref => {
+                storedRef.current = ref
+                updateStyles({
+                    ref,
+                    style: style as WebPressableStyle,
+                    variants,
+                    state: initialState
+                })
+
+                if (typeof passedRef === 'object' && passedRef !== null) {
+                    passedRef.current = ref
+                }
+            }}
+        />
+    )
+})

package/src/components/index.ts

@@ -0,0 +1,3 @@
+export { Hide } from './Hide'
+export { Display } from './Display'
+export { Pressable } from './Pressable'

package/src/core/createUnistylesComponent.native.tsx

@@ -0,0 +1,83 @@
+import React, { type ComponentType, forwardRef, useEffect, useRef, useState } from 'react'
+import type { UnistylesTheme } from '../types'
+import { StyleSheet, UnistyleDependency, UnistylesRuntime, type UnistylesStyleSheet } from '../specs'
+import type { PartialBy } from '../types/common'
+import { deepMergeObjects } from '../utils'
+
+const SUPPORTED_STYLE_PROPS = ['style', 'contentContainerStyle'] as const
+type SupportedStyleProps = typeof SUPPORTED_STYLE_PROPS[number]
+
+export const createUnistylesComponent = <TProps extends Record<string, any>, TMappings extends Partial<Omit<TProps, SupportedStyleProps>>>(Component: ComponentType<TProps>, mappings?: (theme: UnistylesTheme) => TMappings) => {
+    return forwardRef<unknown, PartialBy<TProps, keyof TMappings | SupportedStyleProps>>((props, ref) => {
+        const narrowedProps = props as PartialBy<TProps, keyof TMappings | SupportedStyleProps>
+        const [theme, setTheme] = useState<UnistylesTheme>(UnistylesRuntime.getTheme())
+        const [, setRt] = useState(0)
+        const stylesRef = useRef<Record<string, any>>({})
+        const isForcedRef = useRef(false)
+
+        if (!isForcedRef.current) {
+            SUPPORTED_STYLE_PROPS.forEach(propName => {
+                if (narrowedProps?.[propName]) {
+                    if (Array.isArray(narrowedProps[propName])) {
+                        console.error(`🦄 Unistyles: createUnistylesComponent requires ${propName} to be an object. Please check props for component: ${Component.displayName}`)
+                    }
+
+                    // @ts-expect-error - this is hidden from TS
+                    if (props[propName].__unistyles_name && !props[propName].__proto__?.getStyle) {
+                        console.error(`🦄 Unistyles: createUnistylesComponent received style that is not bound. You likely used the spread operator on a Unistyle style. Please check props for component: ${Component.displayName}`)
+                    }
+
+                    stylesRef.current = {
+                        ...stylesRef.current,
+                        [propName]: narrowedProps[propName]
+                    }
+                }
+            })
+        }
+
+        useEffect(() => {
+            const removeChangeListener = (StyleSheet as UnistylesStyleSheet).addChangeListener(dependencies => {
+                const componentDependencies = (narrowedProps.style?.__proto__.uni__dependencies || mappings?.(theme).style?.__proto__.uni__dependencies) as Array<UnistyleDependency>
+
+                if (dependencies.includes(UnistyleDependency.Theme) && (!componentDependencies ||componentDependencies.includes(UnistyleDependency.Theme))) {
+                    setTheme(UnistylesRuntime.getTheme())
+
+                    // override with Unistyles styles
+                    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
+                }
+
+                if (dependencies.some(dependency => dependency >= 2) && (!componentDependencies || componentDependencies.some(dependency => dependency >= 2))) {
+                    setRt(prevState => prevState + 1)
+                }
+            })
+
+            return () => {
+                removeChangeListener()
+            }
+        }, [])
+
+        const mergedProps = mappings?.(theme) as Record<string, any> ?? {}
+        const finalProps = deepMergeObjects(mergedProps, props)
+
+        // override with Unistyles styles
+        SUPPORTED_STYLE_PROPS.forEach(propName => {
+            if (finalProps[propName]) {
+                finalProps[propName] = stylesRef.current[propName]
+            }
+        })
+
+        isForcedRef.current = false
+
+        return <Component {...finalProps as TProps} ref={ref} />
+    })
+}

package/src/core/createUnistylesComponent.tsx

@@ -0,0 +1,84 @@
+import React, { useEffect, useState, type ComponentType, forwardRef, useRef, useMemo } from 'react'
+import type { UnistylesTheme } from '../types'
+import { UnistylesRuntime } from '../specs'
+import { UnistyleDependency } from '../specs/NativePlatform'
+import type { PartialBy } from '../types/common'
+import { UnistylesListener } from '../web/listener'
+import { UnistylesShadowRegistry } from '../web'
+import { equal } from '../web/utils'
+import { deepMergeObjects } from '../utils'
+
+const SUPPORTED_STYLE_PROPS = ['style', 'contentContainerStyle'] as const
+const ALL_DEPENDENCIES = Object.values(UnistyleDependency).filter((dependency): dependency is UnistyleDependency => typeof dependency === 'number')
+
+type SupportedStyleProps = typeof SUPPORTED_STYLE_PROPS[number]
+
+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], undefined, []) ?? []
+
+        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], undefined, [])
+        }
+    })
+
+    return classNames
+}
+
+export const createUnistylesComponent = <TProps extends Record<string, any>, TMappings extends Partial<Omit<TProps, SupportedStyleProps>>>(Component: ComponentType<TProps>, mappings?: (theme: UnistylesTheme) => TMappings) => {
+    return forwardRef<unknown, PartialBy<TProps, keyof TMappings | SupportedStyleProps>>((props, ref) => {
+        const narrowedProps = props as PartialBy<TProps, keyof TMappings | SupportedStyleProps>
+        const [mappingsProps, setMappingsProps] = useState(mappings?.(UnistylesRuntime.getTheme()))
+        const styleClassNames = useShadowRegistry(narrowedProps.style)
+        const contentContainerStyleClassNames = useShadowRegistry(narrowedProps.contentContainerStyle)
+
+        useEffect(() => {
+            const disposeMappings = UnistylesListener.addListeners(ALL_DEPENDENCIES, () => {
+                if (!mappings) {
+                    disposeMappings()
+
+                    return
+                }
+
+                return setMappingsProps(mappings(UnistylesRuntime.getTheme()))
+            })
+
+            return () => disposeMappings()
+        }, [mappingsProps, narrowedProps.style])
+
+        const combinedProps = {
+            ...deepMergeObjects(props, (mappingsProps ?? {}) as object),
+            ...narrowedProps.style ? {
+                style: {
+                    $$css: true,
+                    'unistyles': styleClassNames.join(' ')
+                },
+            } : {},
+            ...narrowedProps.contentContainerStyle ? {
+                style: {
+                    $$css: true,
+                    'unistyles': contentContainerStyleClassNames.join(' ')
+                },
+            } : {},
+        } as unknown as TProps
+
+        return <Component {...combinedProps} ref={ref} />
+    })
+}

package/src/core/getBoundArgs.ts

@@ -0,0 +1,15 @@
+export const getBoundArgs = (fn: Function) => {
+    const boundArgs = [] as Array<any>
+
+    fn.bind = (thisArg, ...args) => {
+        boundArgs.push(...args)
+
+        const newFn = Function.prototype.bind.apply(fn, [thisArg, ...args])
+
+        newFn.getBoundArgs = () => boundArgs
+
+        return newFn
+    }
+
+    return fn
+}

package/src/core/getId.ts

@@ -0,0 +1 @@
+export const getId = () => `${Math.random().toString(36).substring(2, 9)}`

package/src/core/index.ts

@@ -0,0 +1,3 @@
+export { createUnistylesComponent } from './createUnistylesComponent'
+export { getBoundArgs } from './getBoundArgs'
+export { getId } from './getId'

package/src/hooks/index.ts

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

package/src/hooks/useMedia.ts

@@ -0,0 +1,64 @@
+import { useEffect, useLayoutEffect, useState } from 'react'
+import { StyleSheet, UnistyleDependency, UnistylesRuntime, type UnistylesStyleSheet } 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(() => {
+        const removeChangeListener = (StyleSheet as UnistylesStyleSheet).addChangeListener(dependencies => {
+            if (dependencies.includes(UnistyleDependency.Breakpoints)) {
+                setIsVisible(computeIsVisible())
+            }
+        })
+
+        return () => {
+            removeChangeListener()
+        }
+    }, [config.mq])
+
+    return {
+        isVisible
+    }
+}

package/src/hooks/useMedia.web.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, getBoundArgs } from './core'
+export type { UnistylesVariants } from './types'
+export * 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'

package/src/specs/ShadowRegistry/index.ts

@@ -4,11 +4,11 @@ import type { ShadowNode, Unistyle, ViewHandle } from './types'
 
 interface ShadowRegistry extends UnistylesShadowRegistrySpec {
     // Babel API
-    add(handle?: ViewHandle, style?: Unistyle, variants?: Record<string, string | boolean>, args?: Array<any>): void,
-    remove(handle?: ViewHandle, style?: Unistyle): void,
+    add(handle?: ViewHandle, styles?: Array<Unistyle>, variants?: Record<string, string | boolean>, args?: Array<Array<any>>, id?: string): void,
+    remove(handle?: ViewHandle): void,
     // JSI
-    link(node: ShadowNode, style: Unistyle, variants?: Record<string, string | boolean>, args?: Array<any>): void,
-    unlink(node: ShadowNode, style: Unistyle): void
+    link(node: ShadowNode, styles?: Array<Unistyle>, variants?: Record<string, string | boolean>, args?: Array<Array<any>>, id?: string): void,
+    unlink(node: ShadowNode): void
 }
 
 const HybridShadowRegistry = NitroModules.createHybridObject<ShadowRegistry>('UnistylesShadowRegistry')
@@ -19,27 +19,32 @@ const findShadowNodeForHandle = (handle: ViewHandle) => {
         ?? handle?.getNativeScrollRef?.()?.__internalInstanceHandle?.stateNode?.node
 
     if (!node) {
-        // todo extend log with file name / component name
-        throw new Error('Could not find shadow node for one of your components')
+        throw new Error(`Unistyles: Could not find shadow node for one of your components of type ${handle?.__internalInstanceHandle?.elementType ?? 'unknown'}`)
     }
 
     return node
 }
 
-HybridShadowRegistry.add = (handle, style, variants, args) => {
-    if (!handle || !style?.__unid) {
+HybridShadowRegistry.add = (handle, styles, variants, args, id) => {
+    // virtualized nodes can be null
+    if (!handle || !styles || !Array.isArray(styles)) {
         return
     }
 
-    HybridShadowRegistry.link(findShadowNodeForHandle(handle), style, variants ?? {}, args ?? [])
+    // filter Reanimated styles and styles that are undefined
+    const filteredStyles = styles
+        .filter(style => !style?.initial?.updater)
+        .filter(Boolean)
+
+    HybridShadowRegistry.link(findShadowNodeForHandle(handle), filteredStyles, variants ?? {}, args ?? [], id)
 }
 
-HybridShadowRegistry.remove = (handle, style) => {
-    if (!handle || !style?.__unid) {
+HybridShadowRegistry.remove = handle => {
+    if (!handle) {
         return
     }
 
-    HybridShadowRegistry.unlink(findShadowNodeForHandle(handle), style)
+    HybridShadowRegistry.unlink(findShadowNodeForHandle(handle))
 }
 
 type PrivateMethods =