react-native-unistyles 3.5.2 → 3.6.0

package/src/core/createUnistylesImageBackground.tsx

@@ -5,6 +5,7 @@ import React, { useContext } from 'react'
 import { ScopedThemeContext } from '../components/ScopedThemeContext'
 import { UnistylesShadowRegistry } from '../specs'
 import { copyComponentProperties } from '../utils'
+import { hasUnistyles } from './hasUnistyles'
 import { passForwardedRef } from './passForwardRef'
 import { maybeWarnAboutMultipleUnistyles } from './warn'
 
@@ -17,32 +18,35 @@ export const createUnistylesImageBackground = (Component: typeof ImageBackground
         // @ts-ignore we don't know the type of the component
         maybeWarnAboutMultipleUnistyles(props.imageStyle, 'ImageBackground')
 
+        const linkRef = (ref: ImageBackground | null) => {
+            return passForwardedRef(
+                ref,
+                forwardedRef,
+                () => {
+                    // @ts-expect-error - this is hidden from TS
+                    UnistylesShadowRegistry.add(ref, props.style, scope)
+                },
+                () => {
+                    // @ts-expect-error - this is hidden from TS
+                    UnistylesShadowRegistry.remove(ref)
+                },
+            )
+        }
+        const linkImageRef = (ref: unknown) => {
+            // @ts-expect-error web types are not compatible with RN styles
+            UnistylesShadowRegistry.add(ref, props.imageStyle, scope)
+
+            return () => {
+                // @ts-ignore this is hidden from TS
+                UnistylesShadowRegistry.remove(ref)
+            }
+        }
+
         return (
             <Component
                 {...props}
-                ref={(ref) => {
-                    return passForwardedRef(
-                        ref,
-                        forwardedRef,
-                        () => {
-                            // @ts-expect-error - this is hidden from TS
-                            UnistylesShadowRegistry.add(ref, props.style, scope)
-                        },
-                        () => {
-                            // @ts-expect-error - this is hidden from TS
-                            UnistylesShadowRegistry.remove(ref)
-                        },
-                    )
-                }}
-                imageRef={(ref) => {
-                    // @ts-expect-error web types are not compatible with RN styles
-                    UnistylesShadowRegistry.add(ref, props.imageStyle, scope)
-
-                    return () => {
-                        // @ts-ignore this is hidden from TS
-                        UnistylesShadowRegistry.remove(ref)
-                    }
-                }}
+                ref={hasUnistyles(props.style) ? linkRef : forwardedRef}
+                imageRef={hasUnistyles(props.imageStyle) ? linkImageRef : props.imageRef}
             />
         )
     })

package/src/core/createUnistylesTouchableHighlight.tsx

@@ -5,6 +5,7 @@ import React, { useCallback, useContext, useLayoutEffect, useRef, useState } fro
 import { ScopedThemeContext } from '../components/ScopedThemeContext'
 import { UnistylesShadowRegistry } from '../specs'
 import { copyComponentProperties } from '../utils'
+import { hasUnistyles } from './hasUnistyles'
 import { passForwardedRef } from './passForwardRef'
 import { maybeWarnAboutMultipleUnistyles } from './warn'
 
@@ -49,6 +50,10 @@ export const createUnistylesTouchableHighlight = (Component: typeof TouchableHig
             [props, scope],
         )
 
+        if (!hasUnistyles(props.style)) {
+            return <Component {...props} />
+        }
+
         return (
             <Component
                 {...props}

package/src/core/getClassname.ts

@@ -1,7 +1,7 @@
 import type { UnistylesValues } from '../types'
 
 import * as unistyles from '../web/services'
-import { checkForAnimated } from '../web/utils'
+import { checkForAnimated, isGeneratedUnistyle } from '../web/utils'
 
 export const getClassName = (unistyle: UnistylesValues | undefined | Array<UnistylesValues>, forChild?: boolean) => {
     if (!unistyle) {
@@ -11,6 +11,15 @@ export const getClassName = (unistyle: UnistylesValues | undefined | Array<Unist
     const flattenedStyles = Array.isArray(unistyle) ? unistyle.flat(Number.POSITIVE_INFINITY) : [unistyle]
     const animatedStyles = flattenedStyles.filter(checkForAnimated)
     const regularStyles = flattenedStyles.filter((style) => !checkForAnimated(style))
+    const [firstStyle, ...otherStyles] = regularStyles
+
+    // Already processed by an outer Unistyles component, e.g. createUnistylesElement(Animated.View),
+    // styles added after it (like Reanimated's initial animated values) stay inline
+    if (firstStyle && isGeneratedUnistyle(firstStyle) && firstStyle.hash) {
+        const { hash, injectedClassName } = firstStyle
+
+        return [{ $$css: true, hash, injectedClassName }, otherStyles.concat(animatedStyles)] as const
+    }
 
     const { hash, injectedClassName } = unistyles.services.shadowRegistry.addStyles(regularStyles, forChild)
 

package/src/core/hasUnistyles.ts

@@ -0,0 +1,20 @@
+// whether a style prop (also nested arrays) holds a unistyle, the only styles Unistyles updates
+// a view without one renders like a React Native view, it never links
+export const hasUnistyles = (style: unknown): boolean => {
+    if (Array.isArray(style)) {
+        return style.some(hasUnistyles)
+    }
+
+    if (!style || typeof style !== 'object') {
+        return false
+    }
+
+    // own keys only, like the registry. A unistyle starts with its `unistyles_` key, so it exits early
+    for (const key in style) {
+        if (key.startsWith('unistyles_') && Object.prototype.hasOwnProperty.call(style, key)) {
+            return true
+        }
+    }
+
+    return false
+}

package/src/core/useProxifiedUnistyles/useProxifiedUnistyles.ts

@@ -39,6 +39,7 @@ export const useProxifiedUnistyles = () => {
     const disposeRef = useRef<VoidFunction>(undefined)
     const syncedDependenciesSizeRef = useRef(-1)
     const syncedScopedThemeRef = useRef<UnistylesTheme | undefined>(undefined)
+    const wasDisposedRef = useRef(false)
 
     const reinitListener = () => {
         disposeRef.current?.()
@@ -59,12 +60,22 @@ export const useProxifiedUnistyles = () => {
                 runtimeChanged()
             },
         })
+
+        // <Activity> cleans up effects, a theme change made while hidden was missed (#1297)
+        if (wasDisposedRef.current) {
+            wasDisposedRef.current = false
+
+            if (!scopedTheme) {
+                setTheme(UnistylesRuntime.getTheme())
+            }
+        }
     }
 
     useEffect(() => {
         return () => {
             disposeRef.current?.()
             syncedDependenciesSizeRef.current = -1
+            wasDisposedRef.current = true
         }
     }, [disposeRef])
 

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

@@ -31,6 +31,28 @@ type MappedSecrets = {
     dependencies: Array<UnistyleDependency>
 }
 
+export const getSecrets = (styleProps: Record<string, any> = {}): MappedSecrets => {
+    const styles = Array.isArray(styleProps) ? styleProps.flat(Infinity) : [styleProps]
+
+    const secrets: Array<UnistylesSecrets> = styles.filter(Boolean).reduce((acc, style) => {
+        const unistyleKey = Object.keys(style).find((key) => key.startsWith('unistyles_'))
+
+        return acc.concat([
+            unistyleKey
+                ? style[unistyleKey]
+                : {
+                      uni__getStyles: () => style,
+                      uni__dependencies: [],
+                  },
+        ])
+    }, [])
+
+    return {
+        styles: secrets.reduce((acc, secret) => Object.assign(acc, secret.uni__getStyles()), {} as Record<string, any>),
+        dependencies: secrets.flatMap((secret) => secret.uni__dependencies),
+    }
+}
+
 export const withUnistyles = <TComponent, TMappings extends GenericComponentProps<TComponent>>(
     Component: TComponent,
     mappings?: Mappings<TMappings>,
@@ -44,31 +66,6 @@ export const withUnistyles = <TComponent, TMappings extends GenericComponentProp
         contentContainerStyle?: UnistylesValues
     }
 
-    const getSecrets = (styleProps: Record<string, any> = {}): MappedSecrets => {
-        const styles = Array.isArray(styleProps) ? styleProps.flat() : [styleProps]
-
-        const secrets: Array<UnistylesSecrets> = styles.filter(Boolean).reduce((acc, style) => {
-            const unistyleKey = Object.keys(style).find((key) => key.startsWith('unistyles_'))
-
-            return acc.concat([
-                unistyleKey
-                    ? style[unistyleKey]
-                    : {
-                          uni__getStyles: () => style,
-                          uni__dependencies: [],
-                      },
-            ])
-        }, [])
-
-        return {
-            styles: secrets.reduce(
-                (acc, secret) => Object.assign(acc, secret.uni__getStyles()),
-                {} as Record<string, any>,
-            ),
-            dependencies: secrets.flatMap((secret) => secret.uni__dependencies),
-        }
-    }
-
     return forwardRef<GenericComponentRef<TComponent>, PropsWithUnistyles>((props, ref) => {
         const narrowedProps = props as PropsWithUnistyles & UnistyleStyles
         const NativeComponent = Component as ComponentType

package/src/specs/ShadowRegistry/index.ts

@@ -2,10 +2,13 @@ import { NitroModules } from 'react-native-nitro-modules'
 
 import type { Scope } from '../../components/ScopedThemeContext'
 import type { VerifyReport } from '../../diagnostics/types'
+import type { Host } from '../../unifiber/src'
 import type { UnistylesShadowRegistry as UnistylesShadowRegistrySpec } from './ShadowRegistry.nitro'
 import type { ShadowNode, Unistyle, ViewHandle } from './types'
 
+import { Fiber, Reanimated } from '../../unifiber/src'
 import { StyleSheet } from '../StyleSheet'
+import { createUnistylesStyleSource } from './styleSource'
 
 interface ShadowRegistry extends UnistylesShadowRegistrySpec {
     // Babel API
@@ -19,175 +22,96 @@ interface ShadowRegistry extends UnistylesShadowRegistrySpec {
     setScopedTheme(themeName?: string): void
     getScopedTheme(): string | undefined
     verify(): VerifyReport
-    takeCommittedTags(): Array<number>
+    takeCommittedInstanceHandles(): Array<any>
     refreshReactNodes(nodes: Array<ShadowNode>): void
 }
 
 const HybridShadowRegistry = NitroModules.createHybridObject<ShadowRegistry>('UnistylesShadowRegistry')
 
-const HOST_COMPONENT_TAG = 5
-const SUSPENSE_TAG = 13
-const OFFSCREEN_TAG = 22
+const { collectVisibleAncestors, getHostFor, getHostForInstanceHandle, getShadowNode, getShadowNodes, isHidden } = Fiber
 
-const isInsideSuspendedBoundary = (fiber: any): boolean => {
-    let current = fiber?.return
+const { source: styleSource, bumpEpoch } = createUnistylesStyleSource({
+    get: () => HybridShadowRegistry.getScopedTheme(),
+    set: (name) => HybridShadowRegistry.setScopedTheme(name),
+})
+const owners = Fiber.createOwnerRegistry(styleSource, [Reanimated.cssAdapter], (reason) => {
+    console.warn(`Unistyles: ${reason}. CSS transitions won't follow theme changes.`)
+})
 
-    while (current) {
-        if ((current.tag === SUSPENSE_TAG || current.tag === OFFSCREEN_TAG) && current.memoizedState !== null) {
-            return true
-        }
-
-        current = current.return
-    }
-
-    return false
-}
-
-const findFiberForHandle = (handle: ViewHandle) => {
-    return (
-        handle?.__internalInstanceHandle ??
-        handle?.getScrollResponder?.()?.getNativeScrollRef?.()?.__internalInstanceHandle ??
-        handle?.getNativeScrollRef?.()?.__internalInstanceHandle ??
-        handle?._viewRef?.__internalInstanceHandle ??
-        handle?.viewRef?.current?.__internalInstanceHandle ??
-        handle?._nativeRef?.__internalInstanceHandle
-    )
-}
-
-const findShadowNodeForHandle = (handle: ViewHandle) => {
-    const node =
-        handle?.__internalInstanceHandle?.stateNode?.node ??
-        handle?.getScrollResponder?.()?.getNativeScrollRef?.()?.__internalInstanceHandle?.stateNode?.node ??
-        handle?.getNativeScrollRef?.()?.__internalInstanceHandle?.stateNode?.node ??
-        handle?._viewRef?.__internalInstanceHandle?.stateNode?.node ??
-        handle?.viewRef?.current?.__internalInstanceHandle?.stateNode?.node ??
-        handle?._nativeRef?.__internalInstanceHandle?.stateNode?.node
-
-    // @ts-ignore we don't know the type of handle
-    if (!node && handle?.props?.horizontal && handle?.constructor?.name === 'FlatList') {
-        throw new Error(
-            'Unistyles: detected an unsupported FlatList with the horizontal prop. This will cause crashes on Android due to a bug in React Native core. Read more: https://github.com/facebook/react-native/issues/51601',
-        )
-    }
-
-    return node
-}
-
-const getNativeTag = (handle: ViewHandle): number | undefined =>
-    findFiberForHandle(handle)?.stateNode?.canonical?.nativeTag
-
-// by native tag, weak: views unmounted while frozen never unlink, their dead refs are dropped when the map doubles
-const linkedHandles = new Map<number, WeakRef<ViewHandle>>()
-const MIN_SWEEP_SIZE = 256
-let sweepSize = MIN_SWEEP_SIZE
-
-const sweepUnmountedHandles = () => {
-    linkedHandles.forEach((ref, tag) => {
-        if (!ref.deref()) {
-            linkedHandles.delete(tag)
-        }
-    })
-
-    sweepSize = Math.max(MIN_SWEEP_SIZE, linkedHandles.size * 2)
-}
-
-const trackHandle = (handle: ViewHandle) => {
-    const tag = getNativeTag(handle)
-
-    // views re-link on every render
-    if (tag === undefined || linkedHandles.get(tag)?.deref() === handle) {
-        return
-    }
-
-    linkedHandles.set(tag, new WeakRef(handle))
-
-    if (linkedHandles.size >= sweepSize) {
-        sweepUnmountedHandles()
-    }
-}
+// A component can point at another native view by the time its ref is cleaned up, eg. FlatList on Android remounts
+// its native ScrollView when `horizontal` changes, so remove unlinks the view it was linked with
+// The host points at its current node, while a stored node would keep its first revision (and children) alive
+// Native views always resolve to their own host, so they skip it
+const linkedHosts = new WeakMap<object, Host>()
 
-const untrackHandle = (handle: ViewHandle) => {
-    const tag = getNativeTag(handle)
+const committedHosts: Array<Host | undefined> = []
+let refreshNodes: Array<ShadowNode> = []
 
-    if (tag !== undefined && linkedHandles.get(tag)?.deref() === handle) {
-        linkedHandles.delete(tag)
-    }
+const collectShadowNodes = (host: Host) => {
+    getShadowNodes(host, refreshNodes)
 }
 
 // React re-attaches an untouched subtree through its root's node and only follows clones made on the JS thread.
 // Once a node was cloned elsewhere (state updates, Reanimated), React would commit a subtree from before a Unistyles
 // update, so after a Unistyles commit the committed nodes and their host ancestors must point at the committed tree
 const refreshReactNodes = () => {
-    const tags = HybridShadowRegistry.takeCommittedTags()
+    bumpEpoch()
+
+    const handles = HybridShadowRegistry.takeCommittedInstanceHandles()
 
-    if (tags.length === 0) {
+    if (handles.length === 0) {
         return
     }
 
-    const nodes = new Set<ShadowNode>()
-    const visited = new Set<any>()
-
-    for (const tag of tags) {
-        const handle = linkedHandles.get(tag)?.deref()
-
-        if (!handle) {
-            continue
-        }
-
-        const fiber = findFiberForHandle(handle)
-
-        // hidden by Suspense or a frozen screen
-        if (!fiber || isInsideSuspendedBoundary(fiber)) {
-            continue
+    try {
+        for (let i = 0; i < handles.length; i++) {
+            committedHosts[i] = getHostForInstanceHandle(handles[i])
         }
 
-        for (let current: any = fiber; current && !visited.has(current); current = current.return) {
-            visited.add(current)
-
-            if (current.alternate) {
-                visited.add(current.alternate)
-            }
+        collectVisibleAncestors(committedHosts, collectShadowNodes)
 
-            if (current.tag !== HOST_COMPONENT_TAG) {
-                continue
-            }
-
-            for (const target of [current, current.alternate]) {
-                const node = target?.stateNode?.node
-
-                if (node) {
-                    nodes.add(node)
-                }
-            }
+        if (refreshNodes.length > 0) {
+            HybridShadowRegistry.refreshReactNodes(refreshNodes)
         }
-    }
 
-    if (nodes.size > 0) {
-        HybridShadowRegistry.refreshReactNodes(Array.from(nodes))
+        owners.refresh(committedHosts)
+    } finally {
+        committedHosts.length = 0
+        refreshNodes = []
     }
 }
 
 StyleSheet.addChangeListener(refreshReactNodes)
 
-// runs for every style on every link, so it allocates only for the rare merged style (eg. flattened by Animated)
-const splitMergedUnistyles = (style: any) => {
-    let hasUnistyle = false
+// skips empty styles and splits a style merged from many unistyles (eg. flattened by Animated) into one per unistyle
+// runs for every style on every link, so it reads the keys once and allocates only for the rare merged style
+const collectStyle = (style: any, collected: Array<any>) => {
+    if (!style) {
+        return
+    }
+
+    const keys = Object.keys(style)
+    let unistylesCount = 0
 
-    for (const key in style) {
-        if (!key.startsWith('unistyles_') || !Object.prototype.hasOwnProperty.call(style, key)) {
-            continue
+    for (const key of keys) {
+        if (key.startsWith('unistyles_')) {
+            unistylesCount++
         }
+    }
 
-        if (hasUnistyle) {
-            return Object.keys(style)
-                .filter((unistyleKey) => unistyleKey.startsWith('unistyles_'))
-                .map((unistyleKey) => ({ [unistyleKey]: style[unistyleKey] }))
+    if (unistylesCount < 2) {
+        if (keys.length > 0) {
+            collected.push(style)
         }
 
-        hasUnistyle = true
+        return
     }
 
-    return style
+    for (const key of keys) {
+        if (key.startsWith('unistyles_')) {
+            collected.push({ [key]: style[key] })
+        }
+    }
 }
 
 HybridShadowRegistry.add = (handle, styles, scope) => {
@@ -196,18 +120,19 @@ HybridShadowRegistry.add = (handle, styles, scope) => {
         return
     }
 
-    const stylesArray = Array.isArray(styles) ? styles.flat(Infinity) : [styles]
+    const filteredStyles: Array<any> = []
 
-    // filter styles that are undefined or with no keys
-    const filteredStyles = stylesArray
-        .filter((style) => style && Object.keys(style).length > 0)
-        .filter(Boolean)
-        .flatMap(splitMergedUnistyles)
+    if (Array.isArray(styles)) {
+        styles.flat(Infinity).forEach((style) => collectStyle(style, filteredStyles))
+    } else {
+        collectStyle(styles, filteredStyles)
+    }
 
     if (filteredStyles.length > 0) {
-        const node = findShadowNodeForHandle(handle)
+        const host = getHostFor(handle)
+        const node = host && getShadowNode(host)
 
-        if (!node) {
+        if (!host || !node) {
             throw new Error(
                 `Unistyles: Could not find shadow node for one of your components of type ${handle?.constructor?.name ?? 'unknown'}`,
             )
@@ -221,12 +146,15 @@ HybridShadowRegistry.add = (handle, styles, scope) => {
         }
 
         HybridShadowRegistry.link(node, filteredStyles)
+        owners.link(host)
+
+        if (!handle.__internalInstanceHandle) {
+            linkedHosts.set(handle, host)
+        }
 
         if (scope) {
             HybridShadowRegistry.setScopedTheme(previousScopedTheme)
         }
-
-        trackHandle(handle)
     }
 }
 
@@ -235,20 +163,30 @@ HybridShadowRegistry.remove = (handle) => {
         return
     }
 
-    const maybeNode = findShadowNodeForHandle(handle)
+    const linkedHost = handle.__internalInstanceHandle ? undefined : linkedHosts.get(handle)
+    const host = linkedHost ?? getHostFor(handle)
+    const maybeNode = host && getShadowNode(host)
 
-    if (maybeNode) {
-        const fiber = findFiberForHandle(handle)
+    if (linkedHost) {
+        linkedHosts.delete(handle)
+    }
 
-        if (fiber && isInsideSuspendedBoundary(fiber)) {
+    if (host && maybeNode) {
+        if (isHidden(host)) {
             HybridShadowRegistry.suspend(maybeNode)
         } else {
             HybridShadowRegistry.unlink(maybeNode)
-            untrackHandle(handle)
         }
     }
 }
 
-type PrivateMethods = 'add' | 'remove' | 'link' | 'unlink' | 'suspend' | 'takeCommittedTags' | 'refreshReactNodes'
+type PrivateMethods =
+    | 'add'
+    | 'remove'
+    | 'link'
+    | 'unlink'
+    | 'suspend'
+    | 'takeCommittedInstanceHandles'
+    | 'refreshReactNodes'
 
 export const UnistylesShadowRegistry = HybridShadowRegistry as Omit<ShadowRegistry, PrivateMethods>

package/src/specs/ShadowRegistry/styleSource.ts

@@ -0,0 +1,78 @@
+import type { Scope } from '../../components/ScopedThemeContext'
+import type { StyleSource } from '../../unifiber/src'
+
+import { ScopedThemeContext } from '../../components/ScopedThemeContext'
+
+type ScopedThemeAccess = {
+    get(): string | undefined
+    set(name: string | undefined): void
+}
+
+export const createUnistylesStyleSource = (scopedTheme: ScopedThemeAccess) => {
+    let epoch = 0
+    let warned = false
+
+    const source: StyleSource = {
+        name: 'unistyles',
+        epoch: () => epoch,
+        contexts: [ScopedThemeContext],
+        contextKey: (_context, scope) => (scope as Scope | null)?.name,
+        resolve: (props, read) => {
+            try {
+                return resolveFresh(props, read(ScopedThemeContext))
+            } catch (error) {
+                if (!warned) {
+                    warned = true
+                    console.warn(`Unistyles: Could not refresh styles for a CSS transition. ${String(error)}`)
+                }
+
+                return undefined
+            }
+        },
+    }
+
+    const resolveFresh = (props: Record<string, any>, scope: Scope | null | undefined) => {
+        const styles = [props.style].flat(Infinity)
+        const fresh: Record<string, unknown> = {}
+        let hasUnistyles = false
+
+        for (const style of styles) {
+            if (!style || typeof style !== 'object') {
+                continue
+            }
+
+            Object.assign(fresh, style)
+
+            for (const key in style) {
+                if (!key.startsWith('unistyles_') || !Object.prototype.hasOwnProperty.call(style, key)) {
+                    continue
+                }
+
+                hasUnistyles = true
+
+                const previousScopedTheme = scope ? scopedTheme.get() : undefined
+
+                if (scope) {
+                    scopedTheme.set(scope.name)
+                }
+
+                try {
+                    Object.assign(fresh, style[key]?.uni__getStyles?.())
+                } finally {
+                    if (scope) {
+                        scopedTheme.set(previousScopedTheme)
+                    }
+                }
+            }
+        }
+
+        return hasUnistyles ? fresh : undefined
+    }
+
+    return {
+        source,
+        bumpEpoch: () => {
+            epoch++
+        },
+    }
+}

package/src/specs/ShadowRegistry/types.ts

@@ -1,48 +1,8 @@
-export type StateNode = {
-    node?: ShadowNode
-    canonical?: {
-        nativeTag?: number
-    }
-}
-
-export type ShadowNode = {
-    __hostObjectShadowNodeWrapper: any
-}
+export type { ShadowNode } from '../../unifiber/src'
 
 export type ViewHandle = {
-    __internalInstanceHandle?: {
-        stateNode?: StateNode
-        elementType?: string
-    }
-    getScrollResponder?: () => {
-        getNativeScrollRef?: () => {
-            __internalInstanceHandle?: {
-                stateNode?: StateNode
-            }
-        }
-    }
-    getNativeScrollRef?: () => {
-        __internalInstanceHandle?: {
-            stateNode?: StateNode
-        }
-    }
-    _viewRef?: {
-        __internalInstanceHandle?: {
-            stateNode?: StateNode
-        }
-    }
-    viewRef?: {
-        current?: {
-            __internalInstanceHandle?: {
-                stateNode?: StateNode
-            }
-        }
-    }
-    _nativeRef?: {
-        __internalInstanceHandle?: {
-            stateNode?: StateNode
-        }
-    }
+    __internalInstanceHandle?: unknown
+    constructor?: { name?: string }
 }
 
 export type Unistyle = {