react-native-unistyles 3.5.3 → 3.7.0

package/src/unifiber/src/host.ts

@@ -0,0 +1,236 @@
+// A Host is the view's creation fiber behind an opaque type: no allocation, and stable identity (=== / WeakMap keys).
+import type { FiberNode, RawFiber, ShadowNode } from './fiber'
+import * as fiber from './fiber'
+
+// Bound once: Metro's inline requires would turn each imported name used in a function into a require per call
+const {
+    committedOf,
+    fiberOfInstance,
+    firstHostBelow,
+    hostAncestor,
+    patchRenderedProps: patchFiberProps,
+    raw,
+    resolveHostFiber,
+    shadowNodesOf,
+} = fiber
+const { HostComponent: HOST_COMPONENT, Offscreen: OFFSCREEN, Suspense: SUSPENSE, Activity: ACTIVITY } = fiber.Tag
+
+declare const brand: unique symbol
+export type Host = { readonly [brand]: 'Host' }
+
+export const fiberOf = (host: Host): RawFiber => host as unknown as RawFiber
+
+export const toHost = (fiber: RawFiber | FiberNode | null | undefined): Host | undefined =>
+    ((fiber as RawFiber | null | undefined)?.stateNode?.canonical?.internalInstanceHandle ?? undefined) as Host | undefined
+
+const resolveRefSlowly = (ref: unknown): RawFiber | undefined =>
+    raw(resolveHostFiber(ref)) ?? (toHost(firstHostBelow(fiberOfInstance(ref))) as unknown as RawFiber | undefined)
+
+// The fast path is inlined: legacy Hermes doesn't inline calls
+export const getHostFor = (ref: unknown): Host | undefined => {
+    const fiber = (ref as { __internalInstanceHandle?: RawFiber } | null | undefined)?.__internalInstanceHandle
+
+    if (fiber !== undefined) {
+        return fiber as unknown as Host
+    }
+
+    return resolveRefSlowly(ref) as unknown as Host | undefined
+}
+
+export const getShadowNodeFor = (ref: unknown): ShadowNode | undefined => {
+    const fiber = (ref as { __internalInstanceHandle?: RawFiber } | null | undefined)?.__internalInstanceHandle
+
+    if (fiber !== undefined) {
+        return fiber.stateNode?.node
+    }
+
+    return resolveRefSlowly(ref)?.stateNode?.node
+}
+
+export const getHostForInstanceHandle = (handle: unknown): Host | undefined => toHost(handle as RawFiber | null | undefined)
+
+// Not the first host below the scroll view: on iOS a refreshControl comes first
+export const getContentContainerFor = (ref: any): Host | undefined => {
+    const scroll = ref?.getInnerViewRef ? ref : (ref?.getNativeScrollRef?.() ?? ref?.getScrollResponder?.())
+
+    return getHostFor(scroll?.getInnerViewRef?.())
+}
+
+export const getShadowNode = (host: Host): ShadowNode | undefined => fiberOf(host).stateNode?.node
+
+// Two nodes only while a render is in flight; after a commit both halves share one
+export const getShadowNodes = (host: Host, out: Array<ShadowNode> = []): Array<ShadowNode> => {
+    shadowNodesOf(host as unknown as FiberNode, out)
+
+    return out
+}
+
+export const getNativeTag = (host: Host): number | undefined => fiberOf(host).stateNode?.canonical?.nativeTag
+
+export const getParentHost = (host: Host): Host | undefined => toHost(hostAncestor(host as unknown as FiberNode))
+
+export const patchRenderedProps = (host: Host, patch: (props: Record<string, any>) => Record<string, any> | undefined): boolean =>
+    patchFiberProps(host as unknown as FiberNode, patch)
+
+export const HiddenBy = {
+    None: 0,
+    Suspense: 1,
+    Freeze: 2,
+    Activity: 4,
+} as const
+
+// `return` can point into either half of a pair; ask which half is committed only when they disagree
+export const committedHalf = (fiber: RawFiber, differs: (a: RawFiber, b: RawFiber) => boolean): RawFiber | null => {
+    const alternate = fiber.alternate
+
+    if (!alternate || !differs(fiber, alternate)) {
+        return fiber
+    }
+
+    return raw(committedOf(fiber as unknown as FiberNode)) ?? null
+}
+
+const hiddenStateDiffers = (a: RawFiber, b: RawFiber) => (a.memoizedState === null) !== (b.memoizedState === null)
+
+// React's own visibility bit on the Offscreen instance: shared by both halves and flipped in the commit before refs
+// detach, so it also holds inside a ref cleanup, where the committed half is still the old tree
+const OFFSCREEN_VISIBLE = 1
+const isOffscreenHidden = (offscreen: RawFiber): boolean => {
+    const visibility = offscreen.stateNode?._visibility
+
+    if (typeof visibility === 'number') {
+        return (visibility & OFFSCREEN_VISIBLE) === 0
+    }
+
+    return committedHalf(offscreen, hiddenStateDiffers)?.memoizedState != null
+}
+const freezeDiffers = (a: RawFiber, b: RawFiber) => a.memoizedProps?.freeze !== b.memoizedProps?.freeze
+
+// react-freeze: Freeze > Suspense > Suspender. The Suspender keeps stale props because it throws, so read Freeze's.
+const isFrozenBoundary = (suspense: RawFiber) =>
+    committedHalf(suspense.return as RawFiber, freezeDiffers)?.memoizedProps?.freeze === true
+
+// Every hidden subtree sits under an Offscreen fiber with memoizedState set
+export const getHiddenReasons = (host: Host): number => {
+    let reasons = 0
+
+    for (let current = fiberOf(host).return; current; current = current.return) {
+        if (current.tag !== OFFSCREEN || !isOffscreenHidden(current)) {
+            continue
+        }
+
+        const boundary = current.return
+
+        if (boundary?.tag === ACTIVITY) {
+            reasons |= HiddenBy.Activity
+        } else if (boundary?.tag === SUSPENSE) {
+            reasons |= isFrozenBoundary(boundary) ? HiddenBy.Freeze : HiddenBy.Suspense
+        }
+    }
+
+    return reasons
+}
+
+// Any hidden Offscreen, as in collectVisibleAncestors. Stops at the first: the reason isn't needed
+export const isHidden = (host: Host): boolean => {
+    for (let current = fiberOf(host).return; current; current = current.return) {
+        if (current.tag === OFFSCREEN && isOffscreenHidden(current)) {
+            return true
+        }
+    }
+
+    return false
+}
+export const isSuspended = (host: Host) => (getHiddenReasons(host) & HiddenBy.Suspense) !== 0
+export const isFrozen = (host: Host) => (getHiddenReasons(host) & HiddenBy.Freeze) !== 0
+export const isInHiddenActivity = (host: Host) => (getHiddenReasons(host) & HiddenBy.Activity) !== 0
+
+const isHiddenOffscreen = (offscreen: RawFiber, boundaries: Map<RawFiber, boolean>): boolean => {
+    let hidden = boundaries.get(offscreen)
+
+    if (hidden === undefined) {
+        hidden = isOffscreenHidden(offscreen)
+        boundaries.set(offscreen, hidden)
+
+        if (offscreen.alternate) {
+            boundaries.set(offscreen.alternate, hidden)
+        }
+    }
+
+    return hidden
+}
+
+// Hot loops below: indexed loops and writes, explicit null checks, no helper calls (legacy Hermes)
+export const collectVisibleAncestors = (hosts: ReadonlyArray<Host | null | undefined>, visit: (host: Host) => void) => {
+    const visibleByTag = new Map<number, boolean>()
+    const boundaries = new Map<RawFiber, boolean>()
+    const pending: Array<RawFiber> = []
+
+    for (let h = 0; h < hosts.length; h++) {
+        let visible = true
+        let count = 0
+
+        for (let current = hosts[h] as unknown as RawFiber | null | undefined; current != null; current = current.return) {
+            if (current.tag === HOST_COMPONENT) {
+                const stateNode = current.stateNode
+
+                if (stateNode == null || stateNode.canonical == null) {
+                    break
+                }
+
+                const answer = visibleByTag.get(stateNode.canonical.nativeTag)
+
+                if (answer !== undefined) {
+                    visible = answer
+                    break
+                }
+
+                pending[count++] = current
+            } else if (current.tag === OFFSCREEN && isHiddenOffscreen(current, boundaries)) {
+                visible = false
+                break
+            }
+        }
+
+        for (let i = 0; i < count; i++) {
+            const canonical = pending[i]!.stateNode.canonical
+
+            visibleByTag.set(canonical.nativeTag, visible)
+
+            if (visible && canonical.internalInstanceHandle != null) {
+                visit(canonical.internalInstanceHandle as Host)
+            }
+        }
+    }
+}
+
+// Hidden hosts included
+export const collectAncestors = (hosts: ReadonlyArray<Host | null | undefined>, visit: (host: Host) => void) => {
+    const visitedByTag = new Set<number>()
+
+    for (let h = 0; h < hosts.length; h++) {
+        for (let current = hosts[h] as unknown as RawFiber | null | undefined; current != null; current = current.return) {
+            if (current.tag !== HOST_COMPONENT) {
+                continue
+            }
+
+            const stateNode = current.stateNode
+
+            if (stateNode == null || stateNode.canonical == null) {
+                break
+            }
+
+            const canonical = stateNode.canonical
+
+            if (visitedByTag.has(canonical.nativeTag)) {
+                break
+            }
+
+            visitedByTag.add(canonical.nativeTag)
+
+            if (canonical.internalInstanceHandle != null) {
+                visit(canonical.internalInstanceHandle as Host)
+            }
+        }
+    }
+}

package/src/unifiber/src/index.ts

@@ -0,0 +1,43 @@
+import { createOwnerRegistry } from './adapters/registry'
+import { animatedComponentOf, reanimatedCSSAdapter } from './adapters/reanimated'
+import { getCreationStack, getOwners, verify } from './diagnostics'
+import * as HostApi from './host'
+
+export type { Host } from './host'
+export type { Drift } from './diagnostics'
+export type { ShadowNode } from './fiber'
+export type { OwnerAdapter, OwnerRegistry, StyleSource } from './adapters/registry'
+
+// Object literals, not classes: static methods on a Babel-transpiled class are slower on Hermes
+export const Fiber = {
+    getHostFor: HostApi.getHostFor,
+    getShadowNodeFor: HostApi.getShadowNodeFor,
+    getHostForInstanceHandle: HostApi.getHostForInstanceHandle,
+    getContentContainerFor: HostApi.getContentContainerFor,
+
+    getShadowNode: HostApi.getShadowNode,
+    getShadowNodes: HostApi.getShadowNodes,
+    getNativeTag: HostApi.getNativeTag,
+    getParentHost: HostApi.getParentHost,
+
+    isHidden: HostApi.isHidden,
+    isSuspended: HostApi.isSuspended,
+    isFrozen: HostApi.isFrozen,
+    isInHiddenActivity: HostApi.isInHiddenActivity,
+
+    collectVisibleAncestors: HostApi.collectVisibleAncestors,
+    collectAncestors: HostApi.collectAncestors,
+
+    patchRenderedProps: HostApi.patchRenderedProps,
+
+    verify,
+    getOwners,
+    getCreationStack,
+
+    createOwnerRegistry,
+}
+
+export const Reanimated = {
+    animatedComponentOf,
+    cssAdapter: reanimatedCSSAdapter,
+}

package/src/utils.ts

@@ -1,5 +1,10 @@
 export const isDefined = <T>(value: T): value is NonNullable<T> => value !== undefined && value !== null
 
+// Reanimated useAnimatedStyle handle, it's a plain object, not an Animated.Node
+// styleUpdaterContainer was added in Reanimated 4.1, so check only the keys every version has
+export const isAnimatedStyleHandle = (value: unknown): boolean =>
+    typeof value === 'object' && value !== null && 'viewDescriptors' in value && 'initial' in value
+
 export const deepMergeObjects = <T extends Record<PropertyKey, any>>(...sources: Array<T>) => {
     const target = {} as T
 
@@ -23,7 +28,53 @@ export const deepMergeObjects = <T extends Record<PropertyKey, any>>(...sources:
     return target
 }
 
+// React tells a class component from a function component by these keys
+const CLASS_PROTOTYPE_KEYS = ['isReactComponent', 'render']
+const CLASS_STATIC_KEYS = ['contextType', 'contextTypes', 'childContextTypes', 'getDerivedStateFromProps']
+
+// owner doesn't have the key, objects that inherit from owner read it from source
+const hideFromOwner = (owner: object, source: object, key: string) => {
+    Object.defineProperty(owner, key, {
+        configurable: true,
+        get() {
+            return this === owner ? undefined : Reflect.get(source, key, this)
+        },
+        set(value) {
+            Object.defineProperty(this, key, { value, writable: true, enumerable: true, configurable: true })
+        },
+    })
+}
+
+const inheritNativeClass = (Component: any, UnistylesComponent: (props: unknown) => unknown) => {
+    function UnistylesClassComponent(this: unknown, ...args: Array<unknown>) {
+        if (this instanceof UnistylesClassComponent) {
+            return Reflect.construct(Component, args, new.target ?? this.constructor)
+        }
+
+        return UnistylesComponent(args[0])
+    }
+
+    Object.setPrototypeOf(UnistylesClassComponent, Component)
+    UnistylesClassComponent.prototype = Object.create(Component.prototype, {
+        constructor: { value: UnistylesClassComponent, writable: true, configurable: true },
+    })
+    // only the keys of the class, eg. React warns about a subclass with a `contextType` key that isn't a context
+    CLASS_PROTOTYPE_KEYS.filter((key) => key in Component.prototype).forEach((key) =>
+        hideFromOwner(UnistylesClassComponent.prototype, Component.prototype, key),
+    )
+    CLASS_STATIC_KEYS.filter((key) => key in Component).forEach((key) =>
+        hideFromOwner(UnistylesClassComponent, Component, key),
+    )
+
+    return UnistylesClassComponent
+}
+
 export const copyComponentProperties = (Component: any, UnistylesComponent: any) => {
+    // static properties (eg. displayName) are inherited from the class
+    if (Component?.prototype?.isReactComponent && typeof UnistylesComponent === 'function') {
+        return inheritNativeClass(Component, UnistylesComponent)
+    }
+
     Object.entries(Component).forEach(([key, value]) => {
         // Filter out the keys we don't want to copy
         if (['$$typeof', 'render', 'contextType'].includes(key)) {

package/src/web/convert/index.ts

@@ -2,11 +2,38 @@ import type { UnistylesValues } from '../../types'
 import type { UnistylesRuntime } from '../runtime'
 
 import { deepMergeObjects } from '../../utils'
-import { getBoxShadow, getFilterStyle, getTransformStyle } from './object'
+import {
+    getBackgroundLayers,
+    getBoxShadow,
+    getFilterStyle,
+    getFontVariationSettings,
+    getTransformStyle,
+} from './object'
 import { isPseudo } from './pseudo'
 import { getBoxShadowStyle, getTextShadowStyle } from './shadow'
 import { getStyle } from './style'
-import { isBoxShadow, isFilter, isShadow, isTextShadow, isTransform } from './utils'
+import {
+    isBackgroundLayer,
+    isBoxShadow,
+    isFilter,
+    isFontVariationSettings,
+    isShadow,
+    isTextShadow,
+    isTransform,
+} from './utils'
+
+// a breakpoint can hold React Native's array or object syntax too
+const getBreakpointStyle = (key: string, value: any) => {
+    if (isBackgroundLayer(key, value)) {
+        return getBackgroundLayers(key, value)
+    }
+
+    if (isFontVariationSettings(key, value)) {
+        return getFontVariationSettings(value)
+    }
+
+    return getStyle(key, value)
+}
 
 export const convertUnistyles = (value: UnistylesValues, runtime: UnistylesRuntime) => {
     // Flag to mark if textShadow is already created
@@ -65,10 +92,19 @@ export const convertUnistyles = (value: UnistylesValues, runtime: UnistylesRunti
             return getTransformStyle(unistylesValue)
         }
 
+        // React Native's array and object syntaxes, not breakpoints
+        if (isBackgroundLayer(unistylesKey, unistylesValue)) {
+            return getBackgroundLayers(unistylesKey, unistylesValue)
+        }
+
+        if (isFontVariationSettings(unistylesKey, unistylesValue)) {
+            return getFontVariationSettings(unistylesValue)
+        }
+
         // Breakpoints
         if (typeof unistylesValue === 'object' && unistylesValue !== null) {
             return Object.entries(unistylesValue).map(([breakpointKey, breakpointValue]) => {
-                return { [breakpointKey]: getStyle(unistylesKey, breakpointValue) }
+                return { [breakpointKey]: getBreakpointStyle(unistylesKey, breakpointValue) }
             })
         }
 

package/src/web/convert/object/backgroundLayers.ts

@@ -0,0 +1,33 @@
+import { normalizeNumericValue } from '../utils'
+
+type BackgroundLayerKey = 'backgroundSize' | 'backgroundPosition' | 'backgroundRepeat'
+type BackgroundSize = string | { x: string | number; y: string | number }
+type BackgroundPosition = Partial<Record<'top' | 'left' | 'right' | 'bottom', string | number>>
+type BackgroundRepeat = { x: string; y: string }
+
+const createBackgroundSizeValue = (size: BackgroundSize) => {
+    if (typeof size === 'string') {
+        return size
+    }
+
+    return `${normalizeNumericValue(size.x)} ${normalizeNumericValue(size.y)}`
+}
+
+const createBackgroundPositionValue = (position: BackgroundPosition) => {
+    const edges = (['left', 'right', 'top', 'bottom'] as const).filter((edge) => position[edge] !== undefined)
+
+    return edges.map((edge) => `${edge} ${normalizeNumericValue(position[edge]!)}`).join(' ')
+}
+
+const createBackgroundRepeatValue = (repeat: BackgroundRepeat) => `${repeat.x} ${repeat.y}`
+
+const createBackgroundLayerValue = {
+    backgroundSize: createBackgroundSizeValue,
+    backgroundPosition: createBackgroundPositionValue,
+    backgroundRepeat: createBackgroundRepeatValue,
+} as Record<BackgroundLayerKey, (layer: any) => string>
+
+// React Native's processed syntax, one object per background layer
+export const getBackgroundLayers = (key: string, layers: Array<unknown>) => ({
+    [key]: layers.map(createBackgroundLayerValue[key as BackgroundLayerKey]).join(', '),
+})

package/src/web/convert/object/fontVariationSettings.ts

@@ -0,0 +1,7 @@
+// Same output as React Native's processFontVariationSettings, eg. { wght: 700 } -> 'wght' 700
+export const getFontVariationSettings = (fontVariationSettings: Record<string, number>) => ({
+    fontVariationSettings: Object.keys(fontVariationSettings)
+        .sort()
+        .map((axis) => `${axis.includes("'") ? `"${axis}"` : `'${axis}'`} ${fontVariationSettings[axis]}`)
+        .join(', '),
+})

package/src/web/convert/object/index.ts

@@ -1,3 +1,5 @@
 export * from './transform'
 export * from './boxShadow'
 export * from './filter'
+export * from './backgroundLayers'
+export * from './fontVariationSettings'

package/src/web/convert/utils.ts

@@ -21,6 +21,17 @@ export const isFilter = (key: string, value: any): value is Array<Filters> => ke
 export const isBoxShadow = (key: string, value: any): value is Array<BoxShadowValue> =>
     key === 'boxShadow' && Array.isArray(value)
 
+export const isBackgroundLayer = (key: string, value: any): value is Array<unknown> =>
+    ['backgroundSize', 'backgroundPosition', 'backgroundRepeat'].includes(key) && Array.isArray(value)
+
+// { wght: 700 } is the object syntax, a breakpoints object holds strings or objects
+export const isFontVariationSettings = (key: string, value: any): value is Record<string, number> =>
+    key === 'fontVariationSettings' &&
+    typeof value === 'object' &&
+    value !== null &&
+    !Array.isArray(value) &&
+    Object.values(value).every((axisValue) => typeof axisValue === 'number')
+
 export const normalizeNumericValue = (value: number | string) =>
     value && typeof value === 'number' ? `${value}px` : value
 

package/src/web/registry.ts

@@ -32,7 +32,7 @@ export class UnistylesRegistry {
                 )
             }
 
-            return stylesheet(scopedTheme, this.services.runtime.miniRuntime)
+            return stylesheet(scopedTheme, this.services.runtime.getMiniRuntime(scopedThemeName))
         }
 
         const computedStylesheet = this.stylesheets.get(stylesheet)
@@ -41,11 +41,9 @@ export class UnistylesRegistry {
             return computedStylesheet
         }
 
-        const currentTheme = this.services.runtime.getTheme(
-            this.services.runtime.themeName,
-            this.services.state.CSSVars,
-        )
-        const createdStylesheet = stylesheet(currentTheme, this.services.runtime.miniRuntime)
+        const themeName = this.services.runtime.themeName
+        const currentTheme = this.services.runtime.getTheme(themeName, this.services.state.CSSVars)
+        const createdStylesheet = stylesheet(currentTheme, this.services.runtime.getMiniRuntime(themeName))
         const dependencies = Object.values(createdStylesheet).flatMap((value) => extractUnistyleDependencies(value))
 
         this.addDependenciesToStylesheet(stylesheet, dependencies)
@@ -65,9 +63,10 @@ export class UnistylesRegistry {
         dependencies.forEach((dependency) => dependenciesMap.add(dependency))
 
         const dispose = this.services.listener.addStylesheetListeners(Array.from(dependenciesMap), () => {
+            const themeName = this.services.runtime.themeName
             const newComputedStylesheet = stylesheet(
-                this.services.runtime.getTheme(this.services.runtime.themeName, this.services.state.CSSVars),
-                this.services.runtime.miniRuntime,
+                this.services.runtime.getTheme(themeName, this.services.state.CSSVars),
+                this.services.runtime.getMiniRuntime(themeName),
             )
 
             this.stylesheets.set(stylesheet, newComputedStylesheet)

package/src/web/runtime.ts

@@ -49,13 +49,8 @@ export class UnistylesRuntime {
         }
     }
 
+    // App theme, like on native. ScopedTheme is read from React Context (useUnistyles) (#1295)
     get themeName() {
-        const scopedTheme = this.services.shadowRegistry.getScopedTheme()
-
-        if (scopedTheme) {
-            return scopedTheme
-        }
-
         if (this.services.state.hasAdaptiveThemes) {
             return schemeToTheme(this.colorScheme) as AppThemeName
         }
@@ -150,9 +145,14 @@ export class UnistylesRuntime {
     }
 
     get miniRuntime(): UnistylesMiniRuntime {
+        return this.getMiniRuntime(this.themeName)
+    }
+
+    // StyleSheets get the name of the theme they are called with
+    getMiniRuntime = (themeName?: AppThemeName): UnistylesMiniRuntime => {
         return {
             colorScheme: this.colorScheme,
-            themeName: this.themeName,
+            themeName,
             contentSizeCategory: this.contentSizeCategory,
             breakpoint: this.breakpoint,
             isLandscape: this.orientation === Orientation.Landscape,

package/src/web/utils/unistyle.ts

@@ -6,7 +6,7 @@ import type { StyleSheet, StyleSheetWithSuperPowers, UnistylesValues } from '../
 import type { UnistylesRuntime } from '../runtime'
 
 import { ColorScheme, Orientation } from '../../specs/types'
-import { isDefined, isUnistylesMq, parseMq } from '../../utils'
+import { isAnimatedStyleHandle, isDefined, isUnistylesMq, parseMq } from '../../utils'
 import * as unistyles from '../services'
 import { UNI_GENERATED_KEYS, type UniGeneratedKey, type UniGeneratedStyle } from '../types'
 import { hyphenate, keyInObject, reduceObject } from './common'
@@ -98,9 +98,13 @@ export const getMediaQuery = (query: string, allBreakpoints: Array<string>) => {
         .map((b) => unistyles.services.runtime.breakpoints[b] as number)
         .sort((a, b) => a - b)
         .find((b) => b > breakpointValue)
+    // Viewport widths are fractional CSS px under browser zoom / OS scaling, so an integer
+    // `max-width: next - 1` leaves a dead band (e.g. 767 < width < 768) that matches neither
+    // this breakpoint nor the next one. 0.02px below the next breakpoint (the Bootstrap
+    // convention) closes it without overlapping `(min-width: next)`.
     const queries = [
         `(min-width: ${breakpointValue}px)`,
-        nextBreakpoint ? `(max-width: ${nextBreakpoint - 1}px)` : undefined,
+        nextBreakpoint ? `(max-width: ${nextBreakpoint - 0.02}px)` : undefined,
     ]
         .filter(Boolean)
         .join(' and ')
@@ -138,12 +142,15 @@ export const checkForAnimated = (value: any): boolean => {
     }
 
     if (typeof value === 'object' && value !== null) {
+        if (isAnimatedStyleHandle(value)) {
+            return true
+        }
+
         const objectValues = Object.values(value)
         const secrets = extractSecrets(value)
 
-        // @ts-expect-error React Native Web exports Animated.AnimatedNode as Animated.Node
         // prettier-ignore
-        return value instanceof Animated.Node || objectValues.length > 0 && objectValues.some(checkForAnimated) || secrets && Object.keys(secrets).length === 0
+        return value instanceof Animated.Node || objectValues.length > 0 && objectValues.some(checkForAnimated) || !!secrets && Object.keys(secrets).length === 0
     }
 
     return false

package/lib/commonjs/web/convert/module.d.js

@@ -1,2 +0,0 @@
-"use strict";
-//# sourceMappingURL=module.d.js.map

package/lib/commonjs/web/convert/module.d.js.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["web/convert/module.d.ts"],"mappings":"","ignoreList":[]}

package/lib/module/web/convert/module.d.js

@@ -1,2 +0,0 @@
-"use strict";
-//# sourceMappingURL=module.d.js.map

package/lib/module/web/convert/module.d.js.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["web/convert/module.d.ts"],"mappings":"","ignoreList":[]}

package/lib/typescript/src/__tests__/mocks.spec.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=mocks.spec.d.ts.map

package/lib/typescript/src/__tests__/mocks.spec.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"mocks.spec.d.ts","sourceRoot":"","sources":["../../../../src/__tests__/mocks.spec.ts"],"names":[],"mappings":""}

package/lib/typescript/src/__tests__/passForwardRef.spec.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=passForwardRef.spec.d.ts.map

package/lib/typescript/src/__tests__/passForwardRef.spec.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"passForwardRef.spec.d.ts","sourceRoot":"","sources":["../../../../src/__tests__/passForwardRef.spec.ts"],"names":[],"mappings":""}

package/lib/typescript/src/__tests__/scoped-theme.spec.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=scoped-theme.spec.d.ts.map

package/lib/typescript/src/__tests__/scoped-theme.spec.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"scoped-theme.spec.d.ts","sourceRoot":"","sources":["../../../../src/__tests__/scoped-theme.spec.ts"],"names":[],"mappings":""}

package/lib/typescript/src/__tests__/shadow-registry.spec.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=shadow-registry.spec.d.ts.map

package/lib/typescript/src/__tests__/shadow-registry.spec.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"shadow-registry.spec.d.ts","sourceRoot":"","sources":["../../../../src/__tests__/shadow-registry.spec.ts"],"names":[],"mappings":""}

package/lib/typescript/src/__tests__/web-child-selector.spec.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=web-child-selector.spec.d.ts.map

package/lib/typescript/src/__tests__/web-child-selector.spec.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"web-child-selector.spec.d.ts","sourceRoot":"","sources":["../../../../src/__tests__/web-child-selector.spec.ts"],"names":[],"mappings":""}

package/lib/typescript/src/__tests__/web-listener.spec.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=web-listener.spec.d.ts.map

package/lib/typescript/src/__tests__/web-listener.spec.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"web-listener.spec.d.ts","sourceRoot":"","sources":["../../../../src/__tests__/web-listener.spec.ts"],"names":[],"mappings":""}

package/lib/typescript/src/__tests__/web-pointer-events.spec.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=web-pointer-events.spec.d.ts.map

package/lib/typescript/src/__tests__/web-pointer-events.spec.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"web-pointer-events.spec.d.ts","sourceRoot":"","sources":["../../../../src/__tests__/web-pointer-events.spec.ts"],"names":[],"mappings":""}

package/lib/typescript/src/__tests__/web-runtime.spec.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=web-runtime.spec.d.ts.map