react-native-unistyles 3.0.24 → 3.1.0

package/src/reanimated/useAnimatedTheme.native.ts

@@ -1,14 +1,15 @@
 import { useEffect } from 'react'
 import { type SharedValue, useSharedValue } from 'react-native-reanimated'
-import { StyleSheet, UnistyleDependency, UnistylesRuntime } from '../specs'
+
 import type { UnistylesTheme } from '../types'
 
+import { StyleSheet, UnistyleDependency, UnistylesRuntime } from '../specs'
+
 export const useAnimatedTheme = () => {
     const theme = useSharedValue(UnistylesRuntime.getTheme())
 
     useEffect(() => {
-        // @ts-ignore this is hidden from TS
-        const dispose = StyleSheet.addChangeListener(changedDependencies => {
+        const dispose = StyleSheet.addChangeListener((changedDependencies) => {
             if (changedDependencies.includes(UnistyleDependency.Theme)) {
                 theme.set(UnistylesRuntime.getTheme())
             }

package/src/reanimated/useAnimatedTheme.ts

@@ -1,14 +1,18 @@
 import { useEffect } from 'react'
 import { type SharedValue, useSharedValue } from 'react-native-reanimated'
-import { UnistyleDependency, UnistylesRuntime } from '../specs'
+
 import type { UnistylesTheme } from '../types'
+
+import { UnistyleDependency, UnistylesRuntime } from '../specs'
 import { services } from '../web/services'
 
 export const useAnimatedTheme = () => {
     const theme = useSharedValue(UnistylesRuntime.getTheme())
 
     useEffect(() => {
-        const dispose = services.listener.addListeners([UnistyleDependency.Theme], () => theme.set(UnistylesRuntime.getTheme()))
+        const dispose = services.listener.addListeners([UnistyleDependency.Theme], () =>
+            theme.set(UnistylesRuntime.getTheme()),
+        )
 
         return () => {
             dispose()

package/src/reanimated/variant/types.ts

@@ -1,18 +1,19 @@
 type KeysOfUnion<T> = T extends T ? keyof T : never
 
-export type ColorKeys<T> = KeysOfUnion<T> extends infer K
-    ? K extends string
-        ? K extends `${string}Color${string}`
-            ? K
-            : K extends `${string}color${string}`
+export type ColorKeys<T> =
+    KeysOfUnion<T> extends infer K
+        ? K extends string
+            ? K extends `${string}Color${string}`
                 ? K
-                : never
+                : K extends `${string}color${string}`
+                  ? K
+                  : never
+            : never
         : never
-    : never
 
 export type UseUpdateVariantColorConfig<T extends Record<string, any>> = {
-    animateCallback?: (from: string, to: string) => void,
-    colorKey: ColorKeys<T>,
-    style: T,
+    animateCallback?: (from: string, to: string) => void
+    colorKey: ColorKeys<T>
+    style: T
     secretKey: string | undefined
 }

package/src/reanimated/variant/useAnimatedVariantColor.ts

@@ -1,14 +1,18 @@
 import { interpolateColor, useDerivedValue, useSharedValue } from 'react-native-reanimated'
+
 import type { ColorKeys } from './types'
+
 import { useUpdateVariantColor } from './useUpdateVariantColor'
 
 export const useAnimatedVariantColor = <T extends Record<string, any>>(style: T, colorKey: ColorKeys<T>) => {
-    const secretKey = Object.keys(style).find(key => key.startsWith('unistyles_'))
+    const secretKey = Object.keys(style).find((key) => key.startsWith('unistyles_'))
     // @ts-ignore this is hidden from TS
     const hasVariants = style[secretKey]?.__stylesheetVariants
 
     if (!hasVariants || !(colorKey as string).toLowerCase().includes('color')) {
-        throw new Error('useAnimatedVariantColor: Style was not created by Unistyles, does not have variants or has no color property')
+        throw new Error(
+            'useAnimatedVariantColor: Style was not created by Unistyles, does not have variants or has no color property',
+        )
     }
 
     const { fromValue, toValue } = useUpdateVariantColor({
@@ -27,11 +31,7 @@ export const useAnimatedVariantColor = <T extends Record<string, any>>(style: T,
     }
 
     const derivedColor = useDerivedValue(() => {
-        return interpolateColor(
-            progress.value,
-            [0, 1],
-            [fromValue.get(), toValue.get()]
-        )
+        return interpolateColor(progress.value, [0, 1], [fromValue.get(), toValue.get()])
     })
 
     return derivedColor

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

@@ -1,20 +1,24 @@
 import { useEffect, useLayoutEffect } from 'react'
 import { useSharedValue } from 'react-native-reanimated'
-import { StyleSheet, UnistyleDependency } from '../../specs'
+
 import type { UseUpdateVariantColorConfig } from './types'
 
+import { StyleSheet, UnistyleDependency } from '../../specs'
+
 export const useUpdateVariantColor = <T extends Record<string, any>>({
     colorKey,
     style,
-    secretKey
+    secretKey,
 }: UseUpdateVariantColorConfig<T>) => {
     const fromValue = useSharedValue<string>(style[colorKey])
     const toValue = useSharedValue<string>(style[colorKey])
 
     useEffect(() => {
-        // @ts-ignore this is hidden from TS
-        const dispose = StyleSheet.addChangeListener(changedDependencies => {
-            if (changedDependencies.includes(UnistyleDependency.Theme) || changedDependencies.includes(UnistyleDependency.Breakpoints)) {
+        const dispose = StyleSheet.addChangeListener((changedDependencies) => {
+            if (
+                changedDependencies.includes(UnistyleDependency.Theme) ||
+                changedDependencies.includes(UnistyleDependency.Breakpoints)
+            ) {
                 // @ts-ignore
                 const newStyles = style[secretKey]?.uni__getStyles()
 
@@ -33,6 +37,6 @@ export const useUpdateVariantColor = <T extends Record<string, any>>({
 
     return {
         fromValue,
-        toValue
+        toValue,
     }
 }

package/src/reanimated/variant/useUpdateVariantColor.ts

@@ -1,15 +1,17 @@
 import { useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react'
 import { runOnUI, useSharedValue } from 'react-native-reanimated'
-import { UnistyleDependency } from '../../specs'
+
 import type { UnistylesValues } from '../../types'
+import type { UseUpdateVariantColorConfig } from './types'
+
+import { UnistyleDependency } from '../../specs'
 import { services } from '../../web/services'
 import { getClosestBreakpointValue } from '../../web/utils'
-import type { UseUpdateVariantColorConfig } from './types'
 
 export const useUpdateVariantColor = <T extends Record<string, any>>({
     animateCallback,
     colorKey,
-    style
+    style,
 }: UseUpdateVariantColorConfig<T>) => {
     const [dummyDiv] = useState(() => {
         const div = document.createElement('div')
@@ -22,27 +24,25 @@ export const useUpdateVariantColor = <T extends Record<string, any>>({
     const parsedStyles = useMemo(() => {
         return services.shadowRegistry.addStyles([style]).parsedStyles
     }, [style])
-    const getCurrentColor = useCallback(
-        () => {
-            if (!parsedStyles) {
-                return 'rgb(0, 0, 0)'
-            }
-
-            const currentColor = parsedStyles[colorKey as keyof UnistylesValues] as string | Record<string, string>
-            const currentColorVar = typeof currentColor === 'string'
+    const getCurrentColor = useCallback(() => {
+        if (!parsedStyles) {
+            return 'rgb(0, 0, 0)'
+        }
+
+        const currentColor = parsedStyles[colorKey as keyof UnistylesValues] as string | Record<string, string>
+        const currentColorVar =
+            typeof currentColor === 'string'
                 ? currentColor
-                : getClosestBreakpointValue<string>(services.runtime, currentColor) ?? 'rgb(0, 0, 0)'
+                : (getClosestBreakpointValue<string>(services.runtime, currentColor) ?? 'rgb(0, 0, 0)')
 
-            if (currentColorVar.startsWith('var(--')) {
-                dummyDiv.style.color = currentColorVar
+        if (currentColorVar.startsWith('var(--')) {
+            dummyDiv.style.color = currentColorVar
 
-                return getComputedStyle(dummyDiv).color
-            }
+            return getComputedStyle(dummyDiv).color
+        }
 
-            return currentColorVar
-        },
-        [style, colorKey]
-    )
+        return currentColorVar
+    }, [style, colorKey])
     const fromValue = useSharedValue<string>(getCurrentColor())
     const toValue = useSharedValue<string>(getCurrentColor())
 
@@ -76,6 +76,6 @@ export const useUpdateVariantColor = <T extends Record<string, any>>({
 
     return {
         fromValue,
-        toValue
+        toValue,
     }
 }

package/src/server/getServerUnistyles.tsx

@@ -1,11 +1,14 @@
 import React from 'react'
 import { StyleSheet } from 'react-native'
+
 import * as unistyles from '../web/services'
 import { error, isServer } from '../web/utils'
 import { serialize } from './serialize'
 import { DefaultServerUnistylesSettings, type ServerUnistylesSettings } from './types'
 
-export const getServerUnistyles = ({ includeRNWStyles = true }: ServerUnistylesSettings = DefaultServerUnistylesSettings) => {
+export const getServerUnistyles = ({
+    includeRNWStyles = true,
+}: ServerUnistylesSettings = DefaultServerUnistylesSettings) => {
     if (!isServer()) {
         throw error('Server styles should only be read on the server')
     }
@@ -17,10 +20,14 @@ export const getServerUnistyles = ({ includeRNWStyles = true }: ServerUnistylesS
 
     return (
         <>
-            {rnwStyle && <style id='rnw-style'>{rnwStyle}</style>}
-            <style id='unistyles-web'>{css}</style>
+            {rnwStyle && <style id="rnw-style">{rnwStyle}</style>}
+            <style id="unistyles-web">{css}</style>
             {/* biome-ignore lint/security/noDangerouslySetInnerHtml: Needs the json quotes to be unescaped */}
-            <script id='unistyles-script' defer dangerouslySetInnerHTML={{ __html: `window.__UNISTYLES_STATE__ = ${serialize(state)}`}} />
+            <script
+                id="unistyles-script"
+                defer
+                dangerouslySetInnerHTML={{ __html: `window.__UNISTYLES_STATE__ = ${serialize(state)}` }}
+            />
         </>
     )
 }

package/src/server/index.ts

@@ -2,4 +2,3 @@ export { useServerUnistyles } from './useServerUnistyles'
 export { getServerUnistyles } from './getServerUnistyles'
 export { resetServerUnistyles } from './resetServerUnistyles'
 export { hydrateServerUnistyles } from './hydrateServerUnistyles'
-

package/src/server/types.ts

@@ -1,4 +1,4 @@
 export type ServerUnistylesSettings = {
-  includeRNWStyles?: boolean
+    includeRNWStyles?: boolean
 }
 export const DefaultServerUnistylesSettings = {}

package/src/server/useServerUnistyles.tsx

@@ -1,11 +1,14 @@
 import React, { useRef } from 'react'
+
 import { isServer } from '../web/utils'
 import { getServerUnistyles } from './getServerUnistyles'
 import { hydrateServerUnistyles } from './hydrateServerUnistyles'
 import { resetServerUnistyles } from './resetServerUnistyles'
 import { DefaultServerUnistylesSettings, type ServerUnistylesSettings } from './types'
 
-export const useServerUnistyles = (settings: ServerUnistylesSettings = DefaultServerUnistylesSettings): React.ReactNode | null => {
+export const useServerUnistyles = (
+    settings: ServerUnistylesSettings = DefaultServerUnistylesSettings,
+): React.ReactNode | null => {
     const isServerInserted = useRef(false)
 
     if (isServer() && !isServerInserted.current) {

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

@@ -1,4 +1,5 @@
 import type { HybridObject } from 'react-native-nitro-modules'
+
 import type { Dimensions, Insets } from '../types'
 
 type ColorScheme = 'dark' | 'light' | 'unspecified'
@@ -20,45 +21,47 @@ export enum UnistyleDependency {
     StatusBar = 12,
     NavigationBar = 13,
     Ime = 14,
-    Rtl = 15
+    Rtl = 15,
 }
 
 export interface UnistylesNativeMiniRuntime {
-    readonly colorScheme: ColorScheme,
-    readonly screen: Dimensions,
-    readonly contentSizeCategory: string,
-    readonly insets: Insets,
-    readonly pixelRatio: number,
-    readonly fontScale: number,
+    readonly colorScheme: ColorScheme
+    readonly screen: Dimensions
+    readonly contentSizeCategory: string
+    readonly insets: Insets
+    readonly pixelRatio: number
+    readonly fontScale: number
     readonly rtl: boolean
-    readonly statusBar: Dimensions,
+    readonly statusBar: Dimensions
     readonly navigationBar: Dimensions
-    readonly isPortrait: boolean,
+    readonly isPortrait: boolean
     readonly isLandscape: boolean
 }
 
 // represents any native API that can communicate with Unistyles
 // not available from JS
-export interface NativePlatform extends HybridObject<{ ios: 'swift', android: 'kotlin' }> {
-    getInsets(): Insets,
-    getColorScheme(): ColorScheme,
-    getFontScale(): number,
-    getPixelRatio(): number,
-    getOrientation(): Orientation,
-    getContentSizeCategory(): string,
-    getScreenDimensions(): Dimensions,
-    getStatusBarDimensions(): Dimensions,
-    getNavigationBarDimensions(): Dimensions,
-    getPrefersRtlDirection(): boolean,
+export interface NativePlatform extends HybridObject<{ ios: 'swift'; android: 'kotlin' }> {
+    getInsets(): Insets
+    getColorScheme(): ColorScheme
+    getFontScale(): number
+    getPixelRatio(): number
+    getOrientation(): Orientation
+    getContentSizeCategory(): string
+    getScreenDimensions(): Dimensions
+    getStatusBarDimensions(): Dimensions
+    getNavigationBarDimensions(): Dimensions
+    getPrefersRtlDirection(): boolean
 
-    setRootViewBackgroundColor(color: number): void,
-    setNavigationBarHidden?(isHidden: boolean): void,
-    setStatusBarHidden(isHidden: boolean): void,
-    setImmersiveMode(isEnabled: boolean): void,
+    setRootViewBackgroundColor(color: number): void
+    setNavigationBarHidden?(isHidden: boolean): void
+    setStatusBarHidden(isHidden: boolean): void
+    setImmersiveMode(isEnabled: boolean): void
 
     // private
-    getMiniRuntime(): UnistylesNativeMiniRuntime,
-    registerPlatformListener(callback: (dependencies: Array<UnistyleDependency>, miniRuntime: UnistylesNativeMiniRuntime) => void): void,
-    registerImeListener(callback: (miniRuntime: UnistylesNativeMiniRuntime) => void): void,
+    getMiniRuntime(): UnistylesNativeMiniRuntime
+    registerPlatformListener(
+        callback: (dependencies: Array<UnistyleDependency>, miniRuntime: UnistylesNativeMiniRuntime) => void,
+    ): void
+    registerImeListener(callback: (miniRuntime: UnistylesNativeMiniRuntime) => void): void
     unregisterPlatformListeners(): void
 }

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

@@ -1,9 +1,9 @@
 import type { HybridObject } from 'react-native-nitro-modules'
 
 // created from UnistylesRuntime, do not use it directly
-export interface UnistylesNavigationBar extends HybridObject<{ ios: 'c++', android: 'c++' }> {
-    readonly width: number,
-    readonly height: number,
+export interface UnistylesNavigationBar extends HybridObject<{ ios: 'c++'; android: 'c++' }> {
+    readonly width: number
+    readonly height: number
 
     setHidden(isHidden: boolean): void
 }

package/src/specs/ShadowRegistry/ShadowRegistry.nitro.ts

@@ -1,3 +1,3 @@
 import type { HybridObject } from 'react-native-nitro-modules'
 
-export interface UnistylesShadowRegistry extends HybridObject<{ ios: 'c++', android: 'c++' }> {}
+export interface UnistylesShadowRegistry extends HybridObject<{ ios: 'c++'; android: 'c++' }> {}

package/src/specs/ShadowRegistry/index.ts

@@ -1,36 +1,36 @@
 import { NitroModules } from 'react-native-nitro-modules'
+
 import type { UnistylesShadowRegistry as UnistylesShadowRegistrySpec } from './ShadowRegistry.nitro'
 import type { ShadowNode, Unistyle, ViewHandle } from './types'
 
 interface ShadowRegistry extends UnistylesShadowRegistrySpec {
     // Babel API
-    add(handle?: ViewHandle, styles?: Array<Unistyle>): void,
-    remove(handle?: ViewHandle): void,
+    add(handle?: ViewHandle, styles?: Array<Unistyle>): void
+    remove(handle?: ViewHandle): void
     // JSI
-    link(node: ShadowNode, styles?: Array<Unistyle>): void,
-    unlink(node: ShadowNode): void,
-    flush(): void,
-    setScopedTheme(themeName?: string): void,
+    link(node: ShadowNode, styles?: Array<Unistyle>): void
+    unlink(node: ShadowNode): void
+    flush(): void
+    setScopedTheme(themeName?: string): void
     getScopedTheme(): string | undefined
 }
 
 const HybridShadowRegistry = NitroModules.createHybridObject<ShadowRegistry>('UnistylesShadowRegistry')
 
 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
+    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')
-    }
-
-    if (!node) {
-        throw new Error(`Unistyles: Could not find shadow node for one of your components of type ${handle?.constructor?.name ?? 'unknown'}`)
+        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
@@ -42,33 +42,39 @@ HybridShadowRegistry.add = (handle, styles) => {
         return
     }
 
-    const stylesArray = Array.isArray(styles)
-        ? styles.flat()
-        : [styles]
+    const stylesArray = Array.isArray(styles) ? styles.flat() : [styles]
 
     // filter styles that are undefined or with no keys
     const filteredStyles = stylesArray
-        .filter(style => style && Object.keys(style).length > 0)
+        .filter((style) => style && Object.keys(style).length > 0)
         .flat()
         .filter(Boolean)
 
     if (filteredStyles.length > 0) {
-        HybridShadowRegistry.link(findShadowNodeForHandle(handle), filteredStyles)
+        const node = findShadowNodeForHandle(handle)
+
+        if (!node) {
+            throw new Error(
+                `Unistyles: Could not find shadow node for one of your components of type ${handle?.constructor?.name ?? 'unknown'}`,
+            )
+        }
+
+        HybridShadowRegistry.link(node, filteredStyles)
     }
 }
 
-HybridShadowRegistry.remove = handle => {
+HybridShadowRegistry.remove = (handle) => {
     if (!handle) {
         return
     }
 
-    HybridShadowRegistry.unlink(findShadowNodeForHandle(handle))
+    const maybeNode = findShadowNodeForHandle(handle)
+
+    if (maybeNode) {
+        HybridShadowRegistry.unlink(maybeNode)
+    }
 }
 
-type PrivateMethods =
-    | 'add'
-    | 'remove'
-    | 'link'
-    | 'unlink'
+type PrivateMethods = 'add' | 'remove' | 'link' | 'unlink'
 
 export const UnistylesShadowRegistry = HybridShadowRegistry as Omit<ShadowRegistry, PrivateMethods>

package/src/specs/ShadowRegistry/types.ts

@@ -8,33 +8,33 @@ export type ShadowNode = {
 
 export type ViewHandle = {
     __internalInstanceHandle?: {
-        stateNode?: StateNode,
+        stateNode?: StateNode
         elementType?: string
-    },
+    }
     getScrollResponder?: () => {
-        getNativeScrollRef?: () => ({
+        getNativeScrollRef?: () => {
             __internalInstanceHandle?: {
                 stateNode?: StateNode
             }
-        })
-    },
-    getNativeScrollRef?: () => ({
+        }
+    }
+    getNativeScrollRef?: () => {
         __internalInstanceHandle?: {
             stateNode?: StateNode
         }
-    }),
+    }
     _viewRef?: {
         __internalInstanceHandle?: {
             stateNode?: StateNode
         }
-    },
+    }
     viewRef?: {
         current?: {
             __internalInstanceHandle?: {
                 stateNode?: StateNode
             }
         }
-    },
+    }
     _nativeRef?: {
         __internalInstanceHandle?: {
             stateNode?: StateNode
@@ -43,7 +43,6 @@ export type ViewHandle = {
 }
 
 export type Unistyle = {
-    __unid?: number,
     initial?: {
         updater?: () => void
     }

package/src/specs/StatusBar/UnistylesStatusBar.nitro.ts

@@ -1,9 +1,9 @@
 import type { HybridObject } from 'react-native-nitro-modules'
 
 // created from UnistylesRuntime, do not use it directly
-export interface UnistylesStatusBar extends HybridObject<{ ios: 'c++', android: 'c++' }> {
-    readonly width: number,
-    readonly height: number,
+export interface UnistylesStatusBar extends HybridObject<{ ios: 'c++'; android: 'c++' }> {
+    readonly width: number
+    readonly height: number
 
-    setHiddenNative(isHidden: boolean): void,
+    setHiddenNative(isHidden: boolean): void
 }

package/src/specs/StatusBar/index.ts

@@ -1,11 +1,13 @@
 import { StatusBar as NativeStatusBar } from 'react-native'
-import { StatusBarStyle } from '../types'
+
 import type { UnistylesStatusBar as UnistylesStatusBarSpec } from './UnistylesStatusBar.nitro'
 
+import { StatusBarStyle } from '../types'
+
 export type StatusBarHiddenAnimation = 'none' | 'fade' | 'slide'
 
 interface PrivateUnistylesStatusBar extends Omit<UnistylesStatusBarSpec, 'setBackgroundColor' | 'setHidden'> {
-    setStyle(style: StatusBarStyle, animated?: boolean): void,
+    setStyle(style: StatusBarStyle, animated?: boolean): void
     setHidden(isHidden: boolean, animation?: StatusBarHiddenAnimation): void
 }
 
@@ -29,8 +31,6 @@ export const attachStatusBarJSMethods = (hybridObject: UnistylesStatusBar) => {
     }
 }
 
-type PrivateMethods =
-    | 'dispose'
-    | 'setHiddenNative'
+type PrivateMethods = 'dispose' | 'setHiddenNative'
 
 export type UnistylesStatusBar = Omit<PrivateUnistylesStatusBar, PrivateMethods>

package/src/specs/StyleSheet/UnistylesStyleSheet.nitro.ts

@@ -1,9 +1,9 @@
 import type { HybridObject } from 'react-native-nitro-modules'
+
 import type { UnistyleDependency } from '../NativePlatform'
 
-export interface UnistylesStyleSheet extends HybridObject<{ ios: 'c++', android: 'c++' }> {
+export interface UnistylesStyleSheet extends HybridObject<{ ios: 'c++'; android: 'c++' }> {
     readonly hairlineWidth: number
-    readonly unid: number
 
     addChangeListener(onChanged: (dependencies: Array<UnistyleDependency>) => void): () => void
 }