react-native-unistyles 3.4.0 → 3.5.1

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

@@ -1,12 +1,29 @@
 import type { TextProps } from 'react-native'
 
 import { type ComponentType, createElement, forwardRef } from 'react'
+import * as ReactNative from 'react-native'
 
 import { createUnistylesElement } from '../../core'
 
+const RN = ReactNative as typeof ReactNative & { unstable_NativeText?: unknown }
+
+const resolveRCTText = () => {
+    // RN 0.83+ re-exports the host component, which at runtime is the 'RCTText' string itself
+    if (typeof RN.unstable_NativeText === 'string') {
+        return RN.unstable_NativeText
+    }
+
+    // older RN has no public handle on it, but reading Text evaluates the very same module
+    if (!RN.Text) {
+        throw new Error('Unistyles 🦄: react-native did not expose Text, unable to render NativeText')
+    }
+
+    return 'RCTText'
+}
+
 // credits to @hirbod
 const LeanText = forwardRef((props, ref) => {
-    return createElement('RCTText', { ...props, ref })
+    return createElement(resolveRCTText(), { ...props, ref })
 }) as ComponentType<TextProps>
 
 LeanText.displayName = 'RCTText'

package/src/components/native/NativeText.tsx

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

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

@@ -1,15 +1,35 @@
 import type { ViewProps } from 'react-native'
 
 import { type ComponentType, createElement, forwardRef } from 'react'
+import * as ReactNative from 'react-native'
 
 import { createUnistylesElement } from '../../core'
 
+const RN = ReactNative as typeof ReactNative & { unstable_NativeView?: unknown }
+
+const resolveRCTView = () => {
+    // RN 0.83+ re-exports the host component, which at runtime is the 'RCTView' string itself
+    if (typeof RN.unstable_NativeView === 'string') {
+        return RN.unstable_NativeView
+    }
+
+    // older RN has no public handle on it, but reading View evaluates the very same module
+    if (!RN.View) {
+        throw new Error('Unistyles 🦄: react-native did not expose View, unable to render NativeView')
+    }
+
+    return 'RCTView'
+}
+
 // credits to @hirbod
 const LeanView = forwardRef((props, ref) => {
-    return createElement('RCTView', { ...props, ref })
+    return createElement(resolveRCTView(), { ...props, ref })
 }) as ComponentType<ViewProps>
 
 LeanView.displayName = 'RCTView'
 
+// named export matches unstable_NativeView from react-native
+export const NativeView = createUnistylesElement(LeanView)
+
 // this will match default export from react-native
-export default createUnistylesElement(LeanView)
+export default NativeView

package/src/components/native/NativeView.tsx

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

package/src/components/native/Pressable.tsx

@@ -41,9 +41,14 @@ export const Pressable: React.ForwardRefExoticComponent<PressableProps & React.R
                 isServer()
                     ? undefined
                     : (ref) => {
+                          if (!ref) {
+                              // @ts-expect-error hidden from TS
+                              UnistylesShadowRegistry.remove(storedRef, classNames?.[0].hash)
+                          }
+
                           storedRef = ref as unknown as HTMLElement
                           // @ts-expect-error hidden from TS
-                          UnistylesShadowRegistry.add(storedRef, classNames?.hash)
+                          UnistylesShadowRegistry.add(storedRef, classNames?.[0].hash)
 
                           if (typeof forwardedRef === 'function') {
                               return forwardedRef(ref)
@@ -61,10 +66,10 @@ export const Pressable: React.ForwardRefExoticComponent<PressableProps & React.R
                 UnistylesShadowRegistry.setScopedTheme(scopedTheme)
 
                 // @ts-expect-error hidden from TS
-                UnistylesShadowRegistry.remove(storedRef, classNames?.hash)
+                UnistylesShadowRegistry.remove(storedRef, classNames?.[0].hash)
                 classNames = getClassName(styleResult as UnistylesValues)
                 // @ts-expect-error hidden from TS
-                UnistylesShadowRegistry.add(storedRef, classNames?.hash)
+                UnistylesShadowRegistry.add(storedRef, classNames?.[0].hash)
 
                 UnistylesShadowRegistry.setScopedTheme(previousScopedTheme)
 

package/src/components/native/TouchableHighlight.native.tsx

@@ -0,0 +1,5 @@
+import { TouchableHighlight as NativeTouchableHighlight } from 'react-native'
+
+import { createUnistylesTouchableHighlight } from '../../core'
+
+export const TouchableHighlight = createUnistylesTouchableHighlight(NativeTouchableHighlight)

package/src/core/createUnistylesActivityIndicator.tsx

@@ -0,0 +1,47 @@
+import type { ActivityIndicator } from 'react-native'
+
+import React from 'react'
+
+import { isAndroid } from '../common'
+import { UnistylesShadowRegistry } from '../specs'
+import { copyComponentProperties } from '../utils'
+import { passForwardedRef } from './passForwardRef'
+import { maybeWarnAboutMultipleUnistyles } from './warn'
+
+const getWrapperHandle = (ref: any) => {
+    const spinner = ref?.__internalInstanceHandle
+
+    return {
+        __internalInstanceHandle: isAndroid ? spinner?.return?.return : spinner?.return,
+    }
+}
+
+export const createUnistylesActivityIndicator = (Component: typeof ActivityIndicator) => {
+    const UnistylesActivityIndicator = (props: any) => {
+        return (
+            <Component
+                {...props}
+                ref={(ref: unknown) => {
+                    maybeWarnAboutMultipleUnistyles(props.style, 'ActivityIndicator')
+
+                    const wrapperHandle = getWrapperHandle(ref)
+
+                    return passForwardedRef(
+                        ref,
+                        props.ref,
+                        () => {
+                            // @ts-ignore this is hidden from TS
+                            UnistylesShadowRegistry.add(wrapperHandle, props.style)
+                        },
+                        () => {
+                            // @ts-ignore this is hidden from TS
+                            UnistylesShadowRegistry.remove(wrapperHandle)
+                        },
+                    )
+                }}
+            />
+        )
+    }
+
+    return copyComponentProperties(Component, UnistylesActivityIndicator)
+}

package/src/core/createUnistylesElement.tsx

@@ -1,16 +1,21 @@
 import type { ViewStyle } from 'react-native'
 
-import React from 'react'
+import React, { useCallback, useLayoutEffect, useRef } from 'react'
 
 import type { UnistylesValues } from '../types'
 
 import { copyComponentProperties } from '../utils'
+import * as unistyles from '../web/services'
 import { isServer } from '../web/utils'
-import { createUnistylesRef } from '../web/utils/createUnistylesRef'
 import { getClassName } from './getClassname'
 import { maybeWarnAboutMultipleUnistyles } from './warn'
 
-const STYLE_PROPS = ['contentContainerStyle', 'columnWrapperStyle'] as const
+const STYLE_PROPS = [
+    'contentContainerStyle',
+    'columnWrapperStyle',
+    'ListHeaderComponentStyle',
+    'ListFooterComponentStyle',
+] as const
 
 type StyleProp = (typeof STYLE_PROPS)[number] | 'style'
 
@@ -18,28 +23,59 @@ type ComponentProps = {
     [K in StyleProp]?: UnistylesValues
 }
 
-const buildUnistylesProps = (Component: any, props: ComponentProps, forwardedRef: React.ForwardedRef<unknown>) => {
+const buildUnistylesProps = (Component: any, props: ComponentProps) => {
     const componentStyleProps = ['style' as const, ...STYLE_PROPS.filter((styleProp) => styleProp in props)]
-    const classNames = Object.fromEntries(
-        componentStyleProps.map((styleProp) => [styleProp, getClassName(props[styleProp])]),
-    )
-    const refs = componentStyleProps.map((styleProp) => {
-        return createUnistylesRef(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)),
+    return Object.fromEntries(componentStyleProps.map((styleProp) => [styleProp, getClassName(props[styleProp])]))
+}
+
+const assignRef = (ref: React.Ref<unknown> | undefined, value: unknown) => {
+    if (typeof ref === 'function') {
+        ref(value)
+    } else if (ref) {
+        ref.current = value
     }
 }
 
 export const createUnistylesElement = (Component: any) => {
-    const UnistylesComponent = (props: any) => {
-        return <Component {...props} {...buildUnistylesProps(Component, props, props.ref)} />
+    const UnistylesComponent = ({ ref, ...props }: any) => {
+        const classNames = buildUnistylesProps(Component, props)
+        const hashes = Object.values(classNames).map((className) => className?.[0].hash)
+        const stored = useRef({ node: null as unknown, hashes, ref })
+        // Stable for the component lifetime, as some components (e.g. ScrollView) call only the latest ref on unmount
+        const unistylesRef = useCallback((node: unknown) => {
+            const { shadowRegistry } = unistyles.services
+
+            stored.current.hashes.forEach((hash) =>
+                node ? shadowRegistry.add(node, hash) : shadowRegistry.remove(stored.current.node, hash),
+            )
+            stored.current.node = node
+            assignRef(stored.current.ref, node)
+        }, [])
+
+        // React won't call a stable ref again, so apply style and ref changes after commit
+        useLayoutEffect(() => {
+            const { shadowRegistry } = unistyles.services
+            const { node, hashes: previousHashes, ref: previousRef } = stored.current
+
+            if (previousHashes.join() !== hashes.join()) {
+                previousHashes.forEach((hash) => shadowRegistry.remove(node, hash))
+                hashes.forEach((hash) => shadowRegistry.add(node, hash))
+            }
+
+            if (previousRef !== ref) {
+                assignRef(previousRef, null)
+                assignRef(ref, node)
+            }
+
+            stored.current = { node, hashes, ref }
+        })
+
+        return <Component {...props} {...classNames} ref={isServer() ? undefined : unistylesRef} />
     }
 
     return copyComponentProperties(Component, UnistylesComponent)

package/src/core/createUnistylesTouchableHighlight.tsx

@@ -0,0 +1,69 @@
+import type { TouchableHighlight } from 'react-native'
+
+import React, { useCallback, useLayoutEffect, useRef, useState } from 'react'
+
+import { UnistylesShadowRegistry } from '../specs'
+import { copyComponentProperties } from '../utils'
+import { passForwardedRef } from './passForwardRef'
+import { maybeWarnAboutMultipleUnistyles } from './warn'
+
+export const createUnistylesTouchableHighlight = (Component: typeof TouchableHighlight) => {
+    const UnistylesTouchableHighlight = (props: any) => {
+        const relinkRef = useRef<() => void>(undefined)
+        const [hiddenUnderlays, setHiddenUnderlays] = useState(0)
+
+        useLayoutEffect(() => {
+            if (hiddenUnderlays > 0) {
+                relinkRef.current?.()
+            }
+        }, [hiddenUnderlays])
+
+        // new props come with a parent render, re-renders for the underlay keep the ref and the scoped theme it captured
+        const ref = useCallback(
+            (ref: unknown) => {
+                maybeWarnAboutMultipleUnistyles(props.style, 'TouchableHighlight')
+
+                const scopedTheme = UnistylesShadowRegistry.getScopedTheme()
+
+                relinkRef.current = () => {
+                    const previousScopedTheme = UnistylesShadowRegistry.getScopedTheme()
+
+                    UnistylesShadowRegistry.setScopedTheme(scopedTheme)
+                    // @ts-ignore this is hidden from TS
+                    UnistylesShadowRegistry.remove(ref)
+                    // @ts-ignore this is hidden from TS
+                    UnistylesShadowRegistry.add(ref, props.style)
+                    UnistylesShadowRegistry.setScopedTheme(previousScopedTheme)
+                }
+
+                return passForwardedRef(
+                    ref,
+                    props.ref,
+                    () => {
+                        // @ts-ignore this is hidden from TS
+                        UnistylesShadowRegistry.add(ref, props.style)
+                    },
+                    () => {
+                        relinkRef.current = undefined
+                        // @ts-ignore this is hidden from TS
+                        UnistylesShadowRegistry.remove(ref)
+                    },
+                )
+            },
+            [props],
+        )
+
+        return (
+            <Component
+                {...props}
+                ref={ref}
+                onHideUnderlay={() => {
+                    setHiddenUnderlays((count) => count + 1)
+                    props.onHideUnderlay?.()
+                }}
+            />
+        )
+    }
+
+    return copyComponentProperties(Component, UnistylesTouchableHighlight)
+}

package/src/core/index.ts

@@ -1,5 +1,7 @@
 export { createUnistylesElement } from './createUnistylesElement'
+export { createUnistylesActivityIndicator } from './createUnistylesActivityIndicator'
 export { createUnistylesImageBackground } from './createUnistylesImageBackground'
+export { createUnistylesTouchableHighlight } from './createUnistylesTouchableHighlight'
 export { withUnistyles } from './withUnistyles'
 export { passForwardedRef } from './passForwardRef'
 export { getClassName } from './getClassname'

package/src/core/passForwardRef.ts

@@ -6,7 +6,7 @@ export const passForwardedRef = <T>(
     onMount?: () => void,
     onUnmount?: () => void,
 ) => {
-    const passForwardedRef = () => {
+    const passForwardedRef = (): unknown => {
         if (typeof forwardedRef === 'function') {
             return forwardedRef(ref)
         }
@@ -15,14 +15,26 @@ export const passForwardedRef = <T>(
             forwardedRef.current = ref
         }
 
-        return () => {}
+        return undefined
     }
     const forwardedRefReturnFn = passForwardedRef()
 
     onMount?.()
 
     return () => {
-        forwardedRefReturnFn?.()
-        onUnmount?.()
+        try {
+            // React 19 allows a callback ref to return a cleanup function, but returning
+            // any other value is still valid, so it can't be called unconditionally.
+            // Without a cleanup function React detaches the ref with null, so do we.
+            if (typeof forwardedRefReturnFn === 'function') {
+                forwardedRefReturnFn()
+            } else if (typeof forwardedRef === 'function') {
+                forwardedRef(null)
+            } else if (forwardedRef) {
+                forwardedRef.current = null
+            }
+        } finally {
+            onUnmount?.()
+        }
     }
 }

package/src/diagnostics/index.ts

@@ -0,0 +1,3 @@
+// package exports resolve this file as is, so the platform split lives in ./verify
+export { verify } from './verify'
+export type { VerifyMismatch, VerifyReport } from './types'

package/src/diagnostics/types.ts

@@ -0,0 +1,25 @@
+export type VerifyMismatch = {
+    tag: number
+    component: string
+    styleKey: string
+    prop: string
+    expected: string
+    actual: string
+}
+
+export type VerifyReport = {
+    // all nodes linked with Unistyles
+    linked: number
+    // nodes compared with the committed shadow tree
+    checked: number
+    // linked nodes that are not part of the committed shadow tree
+    detached: number
+    // nodes hidden by Suspense or frozen screens
+    suspended: number
+    // nodes unmounted without unlink, waiting for the sweep
+    orphans: number
+    // shadow tree updates that were not committed yet
+    pendingUpdates: number
+    mismatches: Array<VerifyMismatch>
+    errors: Array<string>
+}

package/src/diagnostics/verify.native.ts

@@ -0,0 +1,7 @@
+import type { VerifyReport } from './types'
+
+import { UnistylesShadowRegistry } from '../specs'
+
+// Compares props committed to the shadow tree with styles rebuilt for every linked node
+// (its own arguments, variants and the current theme). Meant for tests, it never commits anything.
+export const verify = (): VerifyReport => UnistylesShadowRegistry.verify()

package/src/diagnostics/verify.ts

@@ -0,0 +1,13 @@
+import type { VerifyReport } from './types'
+
+// There is no shadow tree on web
+export const verify = (): VerifyReport => ({
+    linked: 0,
+    checked: 0,
+    detached: 0,
+    suspended: 0,
+    orphans: 0,
+    pendingUpdates: 0,
+    mismatches: [],
+    errors: [],
+})

package/src/index.ts

@@ -8,9 +8,12 @@ if (majorReactVersions === undefined || majorReactVersions < 19) {
 
 export { StyleSheet, UnistylesRuntime } from './specs'
 export { UnistyleDependency } from './specs'
+export type { UnistylesMiniRuntime } from './specs'
+export { ColorScheme, Orientation, StatusBarStyle } from './specs/types'
 export { mq } from './mq'
 export type { UnistylesThemes, UnistylesBreakpoints } from './global'
 export { withUnistyles, useUnistyles, createUnistylesElement } from './core'
-export type { UnistylesVariants, UnistylesValues, IOSContentSizeCategory, AndroidContentSizeCategory } from './types'
+export type { UnistylesVariants, UnistylesValues } from './types'
+export { IOSContentSizeCategory, AndroidContentSizeCategory, WebContentSizeCategory } from './types'
 export { Display, Hide, ScopedTheme } from './components'
 export { useServerUnistyles, hydrateServerUnistyles, getServerUnistyles, resetServerUnistyles } from './server'

package/src/mocks.ts

@@ -11,6 +11,10 @@ type Registry = {
     breakpoints: UnistylesBreakpoints
 }
 
+type GlobalWithRegistry = typeof globalThis & {
+    __UNISTYLES_MOCK_REGISTRY__?: Registry
+}
+
 jest.mock('react-native-nitro-modules', () => ({
     NitroModules: {
         createHybridObject: () => ({
@@ -26,10 +30,10 @@ jest.mock('react-native-nitro-modules', () => ({
 
 jest.mock('react-native-unistyles', () => {
     const React = require('react')
-    const _REGISTRY: Registry = {
+    const _REGISTRY = ((globalThis as GlobalWithRegistry).__UNISTYLES_MOCK_REGISTRY__ ??= {
         themes: {},
         breakpoints: {},
-    }
+    })
     const miniRuntime = {
         themeName: undefined,
         breakpoint: undefined,
@@ -146,6 +150,47 @@ jest.mock('react-native-unistyles', () => {
     }
 
     return {
+        ColorScheme: {
+            Light: 'light',
+            Dark: 'dark',
+            Unspecified: 'unspecified',
+        },
+        Orientation: {
+            Portrait: 'portrait',
+            Landscape: 'landscape',
+        },
+        StatusBarStyle: {
+            Default: 'default',
+            Light: 'light',
+            Dark: 'dark',
+        },
+        IOSContentSizeCategory: {
+            AccessibilityExtraExtraExtraLarge: 'accessibilityExtraExtraExtraLarge',
+            AccessibilityExtraExtraLarge: 'accessibilityExtraExtraLarge',
+            AccessibilityExtraLarge: 'accessibilityExtraLarge',
+            AccessibilityLarge: 'accessibilityLarge',
+            AccessibilityMedium: 'accessibilityMedium',
+            ExtraExtraExtraLarge: 'xxxLarge',
+            ExtraExtraLarge: 'xxLarge',
+            ExtraLarge: 'xLarge',
+            Large: 'Large',
+            Medium: 'Medium',
+            Small: 'Small',
+            ExtraSmall: 'xSmall',
+            Unspecified: 'unspecified',
+        },
+        AndroidContentSizeCategory: {
+            Small: 'Small',
+            Default: 'Default',
+            Large: 'Large',
+            ExtraLarge: 'ExtraLarge',
+            Huge: 'Huge',
+            ExtraHuge: 'ExtraHuge',
+            ExtraExtraHuge: 'ExtraExtraHuge',
+        },
+        WebContentSizeCategory: {
+            Unspecified: 'web-unspecified',
+        },
         Hide: () => null,
         Display: () => null,
         ScopedTheme: () => null,

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

@@ -1,4 +1,4 @@
-import { useEffect, useLayoutEffect } from 'react'
+import { useEffect, useLayoutEffect, useRef } from 'react'
 import { useSharedValue } from 'react-native-reanimated'
 
 import type { UseUpdateVariantColorConfig } from './types'
@@ -12,6 +12,7 @@ export const useUpdateVariantColor = <T extends Record<string, any>>({
 }: UseUpdateVariantColorConfig<T>) => {
     const fromValue = useSharedValue<string>(style[colorKey])
     const toValue = useSharedValue<string>(style[colorKey])
+    const applied = useRef<{ style: T; colorKey: typeof colorKey }>(undefined)
 
     useEffect(() => {
         const dispose = StyleSheet.addChangeListener((changedDependencies) => {
@@ -31,6 +32,11 @@ export const useUpdateVariantColor = <T extends Record<string, any>>({
     }, [style, colorKey])
 
     useLayoutEffect(() => {
+        if (applied.current?.style === style && applied.current.colorKey === colorKey) {
+            return
+        }
+
+        applied.current = { style, colorKey }
         fromValue.set(toValue.value)
         toValue.set(style[colorKey])
     }, [style, colorKey])