react-native-unistyles 3.0.0-rc.4 → 3.0.0-rc.5

package/src/components/ApplyScopedTheme.tsx

@@ -0,0 +1,17 @@
+import { useLayoutEffect } from 'react'
+import type { UnistylesThemes } from '../global'
+import { UnistylesShadowRegistry } from '../specs'
+
+type ApplyScopedThemeProps = {
+    name?: keyof UnistylesThemes
+}
+
+export const ApplyScopedTheme: React.FunctionComponent<ApplyScopedThemeProps> = ({ name }) => {
+    UnistylesShadowRegistry.setScopedTheme(name)
+
+    useLayoutEffect(() => {
+        UnistylesShadowRegistry.setScopedTheme(name)
+    })
+
+    return null
+}

package/src/components/NamedTheme.tsx

@@ -0,0 +1,33 @@
+import React, { useLayoutEffect } from 'react'
+import type { PropsWithChildren } from 'react'
+import type { UnistylesThemes } from '../global'
+import { UnistylesShadowRegistry } from '../specs'
+import { ApplyScopedTheme } from './ApplyScopedTheme'
+
+interface NamedThemeProps extends PropsWithChildren {
+    name: keyof UnistylesThemes,
+    previousScopedTheme?: string
+}
+
+export const NamedTheme: React.FunctionComponent<NamedThemeProps> = ({
+    name,
+    children,
+    previousScopedTheme
+}) => {
+    const mappedChildren = [
+        <ApplyScopedTheme key={name} name={name} />,
+        children,
+        <ApplyScopedTheme key='dispose' name={previousScopedTheme as keyof UnistylesThemes | undefined} />
+    ]
+
+    useLayoutEffect(() => {
+        // this will affect only scoped styles as other styles are not yet mounted
+        UnistylesShadowRegistry.flush()
+    })
+
+    return (
+        <React.Fragment>
+            {mappedChildren}
+        </React.Fragment>
+    )
+}

package/src/components/ScopedTheme.tsx

@@ -1,32 +1,52 @@
-import React, { useLayoutEffect } from 'react'
+import React from 'react'
 import type { UnistylesThemes } from '../global'
-import { UnistylesShadowRegistry } from '../specs'
+import { UnistylesRuntime, UnistylesShadowRegistry } from '../specs'
+import { AdaptiveTheme } from './AdaptiveTheme'
+import { NamedTheme } from './NamedTheme'
 
 type ThemeProps = {
-    name: keyof UnistylesThemes
+    name: keyof UnistylesThemes,
+    invertedAdaptive?: boolean
+} | {
+    name?: undefined,
+    invertedAdaptive: true
 }
 
-const Apply = ({ name }: { name?: keyof UnistylesThemes }) => {
-    UnistylesShadowRegistry.setScopedTheme(name)
+export const ScopedTheme: React.FunctionComponent<React.PropsWithChildren<ThemeProps>> = ({
+    name,
+    children,
+    invertedAdaptive
+}) => {
+    const hasAdaptiveThemes = UnistylesRuntime.hasAdaptiveThemes
+    const isAdaptiveTheme = invertedAdaptive && hasAdaptiveThemes
 
-    useLayoutEffect(() => {
-        UnistylesShadowRegistry.setScopedTheme(name)
-    })
+    if (invertedAdaptive && !hasAdaptiveThemes) {
+        return children
+    }
 
-    return null
-}
+    if (!invertedAdaptive && !name) {
+        if (__DEV__) {
+            console.error('ScopedTheme: name or invertedAdaptive must be provided')
+        }
+
+        return null
+    }
 
-export const ScopedTheme: React.FunctionComponent<React.PropsWithChildren<ThemeProps>> = ({ name, children }) => {
     const previousScopedTheme = UnistylesShadowRegistry.getScopedTheme()
-    const mappedChildren = [
-        <Apply key={name} name={name} />,
-        children,
-        <Apply key='dispose' name={previousScopedTheme as keyof UnistylesThemes | undefined} />
-    ]
-
-    return (
-        <React.Fragment>
-            {mappedChildren}
-        </React.Fragment>
-    )
+
+    return isAdaptiveTheme
+        ? (
+            <AdaptiveTheme previousScopedTheme={previousScopedTheme}>
+                {children}
+            </AdaptiveTheme>
+        )
+        : (
+            <NamedTheme
+                name={name as keyof UnistylesThemes}
+                previousScopedTheme={previousScopedTheme}
+            >
+                {children}
+            </NamedTheme>
+        )
+
 }

package/src/core/createUnistylesElement.native.tsx

@@ -1,49 +1,39 @@
-import React, { useLayoutEffect, useRef } from 'react'
+import React, { useRef } from 'react'
+import type { ScrollView } from 'react-native'
 import { UnistylesShadowRegistry } from '../specs'
 import { copyComponentProperties } from '../utils'
 import { passForwardedRef } from './passForwardRef'
 import { maybeWarnAboutMultipleUnistyles } from './warn'
 
-const getNativeRef = (Component: any, ref: any) => {
-    switch (Component.name) {
-        case 'KeyboardAvoidingView':
-            return ref.viewRef?.current
-        case 'FlatList':
-            return ref.getNativeScrollRef?.()
-        case 'VirtualizedList':
-            return ref.getScrollRef?.()
-        default:
-            return ref
-    }
-}
-
 export const createUnistylesElement = (Component: any) => {
-    const UnistylesComponent = React.forwardRef((props, forwardedRef) => {
-        const storedRef = useRef<unknown>(null)
-
-        useLayoutEffect(() => {
-            return () => {
-                if (storedRef.current) {
-                    // @ts-ignore
-                    UnistylesShadowRegistry.remove(storedRef.current)
-                }
-            }
-        }, [])
+    const UnistylesComponent = (props: any) => {
+        const scrollViewRef = useRef<ScrollView>(null)
 
         return (
             <Component
                 {...props}
                 ref={(ref: unknown) => {
-                    if (ref) {
-                        storedRef.current = getNativeRef(Component, ref)
+                    maybeWarnAboutMultipleUnistyles(props.style, Component.displayName)
+
+                    // https://github.com/facebook/react-native/issues/51878
+                    // tested with ScrollView, REA ScrolLView and Animated ScrollView
+                    const isScrollView = Component.displayName === 'ScrollView'
+
+                    if (isScrollView && ref) {
+                        scrollViewRef.current = ref as ScrollView
                     }
 
-                    // @ts-ignore we don't know the type of the component
-                    maybeWarnAboutMultipleUnistyles(props.style, Component.displayName)
+                    if (isScrollView && !ref) {
+                        // @ts-ignore this is hidden from TS
+                        UnistylesShadowRegistry.remove(scrollViewRef.current)
+                        scrollViewRef.current = null
+
+                        return
+                    }
 
                     return passForwardedRef(
                         ref,
-                        forwardedRef,
+                        props.ref,
                         () => {
                             // @ts-ignore this is hidden from TS
                             UnistylesShadowRegistry.add(ref, props.style)
@@ -56,7 +46,7 @@ export const createUnistylesElement = (Component: any) => {
                 }}
             />
         )
-    })
+    }
 
     return copyComponentProperties(Component, UnistylesComponent)
 }

package/src/core/createUnistylesElement.tsx

@@ -34,14 +34,14 @@ const buildUnistylesProps = (Component: any, props: ComponentProps, forwardedRef
 }
 
 export const createUnistylesElement = (Component: any) => {
-    const UnistylesComponent = React.forwardRef<unknown, ComponentProps>((props, forwardedRef) => {
+    const UnistylesComponent = (props: any) => {
         return (
             <Component
                 {...props}
-                {...buildUnistylesProps(Component, props, forwardedRef)}
+                {...buildUnistylesProps(Component, props, props.ref)}
             />
         )
-    })
+    }
 
     return copyComponentProperties(Component, UnistylesComponent)
 }

package/src/core/createUnistylesImageBackground.tsx

@@ -1,5 +1,5 @@
-import React, { useLayoutEffect, useRef } from 'react'
-import type { Image, ImageBackground, ImageBackgroundProps } from 'react-native'
+import React from 'react'
+import type { ImageBackground, ImageBackgroundProps } from 'react-native'
 import { UnistylesShadowRegistry } from '../specs'
 import { copyComponentProperties } from '../utils'
 import { passForwardedRef } from './passForwardRef'
@@ -7,17 +7,6 @@ import { maybeWarnAboutMultipleUnistyles } from './warn'
 
 export const createUnistylesImageBackground = (Component: typeof ImageBackground) => {
     const UnistylesImageBackground = React.forwardRef<ImageBackground, ImageBackgroundProps>((props, forwardedRef) => {
-        const storedImageRef = useRef<Image | null>(null)
-
-        useLayoutEffect(() => {
-            return () => {
-                if (storedImageRef.current) {
-                    // @ts-ignore
-                    UnistylesShadowRegistry.remove(storedImageRef.current)
-                }
-            }
-        }, [])
-
         // @ts-expect-error we don't know the type of the component
         maybeWarnAboutMultipleUnistyles(props.style, 'ImageBackground')
         // @ts-ignore we don't know the type of the component
@@ -37,21 +26,17 @@ export const createUnistylesImageBackground = (Component: typeof ImageBackground
                         () => {
                             // @ts-expect-error - this is hidden from TS
                             UnistylesShadowRegistry.remove(ref)
-
-                            if (storedImageRef.current) {
-                                // @ts-expect-error - this is hidden from TS
-                                UnistylesShadowRegistry.remove(storedImageRef.current)
-                            }
                         }
                     )
                 }}
                 imageRef={ref => {
-                    if (ref) {
-                        storedImageRef.current = ref
-                    }
-
                     // @ts-expect-error web types are not compatible with RN styles
                     UnistylesShadowRegistry.add(ref, props.imageStyle)
+
+                    return () => {
+                        // @ts-ignore this is hidden from TS
+                        UnistylesShadowRegistry.remove(ref)
+                    }
                 }}
             />
         )

package/src/core/parseBoxShadow.ts

@@ -0,0 +1,87 @@
+import { processColor } from 'react-native'
+
+type BoxShadow = {
+    inset?: boolean
+    offsetX?: number
+    offsetY?: number
+    blurRadius?: number
+    spreadDistance?: number
+    color?: string
+}
+
+const isValue = (str: string | undefined) => str && (str === '0' || str.endsWith('px'))
+
+const parseBoxShadow = (str: string): BoxShadow | undefined => {
+    if (str === 'none') {
+        return undefined
+    }
+
+    // split by space, but not if it's inside of ()
+    const parts = str.split(/\s+(?![^(]*\))/)
+    const lastIndex = parts.length - 1
+    const insetIndex = parts.findIndex(part => part === 'inset')
+
+    // inset can only be at the start or end
+    if (![-1, 0, lastIndex].includes(insetIndex)) {
+        return undefined
+    }
+
+    // if there is no inset, color can only be at the start or end
+    const maybeColorsIndexes = insetIndex === -1
+        ? [0, lastIndex]
+        : insetIndex === lastIndex
+            ? [0, lastIndex - 1]
+            : [1, lastIndex]
+
+    const colorIndex = maybeColorsIndexes.find(index => !isValue(parts[index])) ?? -1
+    const maybeColor = colorIndex !== -1
+        ? parts[colorIndex]
+        : undefined
+    const color = maybeColor && processColor(maybeColor)
+        ? parts[colorIndex]
+        : undefined
+    const values = parts.filter((_, index) => index !== colorIndex && index !== insetIndex)
+
+    // at this point there can be only 4 values
+    if (values.length > 4) {
+        return undefined
+    }
+
+    const [offsetX, offsetY, blurRadius, spreadRadius] = values
+
+    if (!isValue(offsetX) || !isValue(offsetY)) {
+        return undefined
+    }
+
+    const blurRadiusValue = isValue(blurRadius)
+        ? Number.parseFloat(blurRadius as string)
+        : undefined
+
+    if (blurRadiusValue !== undefined && blurRadiusValue < 0) {
+        return undefined
+    }
+
+    return {
+        inset: insetIndex !== -1
+            ? true
+            : undefined,
+        offsetX: Number.parseFloat(offsetX as string),
+        offsetY: Number.parseFloat(offsetY as string),
+        blurRadius: blurRadiusValue ?? 0,
+        spreadDistance: spreadRadius
+            ? Number.parseFloat(spreadRadius as string)
+            : 0,
+        color
+    }
+}
+
+export const parseBoxShadowString = (str: string): Array<BoxShadow> => {
+    const parts = str
+        .split(/,(?![^()]*\))/)
+        .map(part => part.trim().replace('\n', ''))
+        .filter(Boolean)
+        .map(parseBoxShadow)
+        .filter(Boolean) as Array<BoxShadow>
+
+    return parts
+}

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

@@ -26,6 +26,7 @@ export const withUnistyles = <TComponent, TMappings extends GenericComponentProp
     type PropsWithUnistyles = Partial<TProps> & {
         uniProps?: Mappings<TProps>
     }
+
     const getSecrets = (styleProps: Record<string, any> = {}): MappedSecrets => {
         const styles = Array.isArray(styleProps)
             ? styleProps.flat()

package/src/index.ts

@@ -1,3 +1,11 @@
+import React from 'react'
+
+const [majorReactVersions] = React.version.split('.').map(Number.parseInt)
+
+if (majorReactVersions === undefined || majorReactVersions < 19) {
+    throw new Error('Unistyles 🦄: To enable full Fabric power you need to use React 19.0.0 or higher')
+}
+
 export { StyleSheet, UnistylesRuntime, StatusBar, NavigationBar } from './specs'
 export { mq } from './mq'
 export type { UnistylesThemes, UnistylesBreakpoints } from './global'

package/src/mocks.ts

@@ -65,6 +65,8 @@ jest.mock('react-native-unistyles', () => {
         colorScheme: 'unspecified' as ColorScheme,
         contentSizeCategory: 'Medium' as IOSContentSizeCategory,
         orientation: 'portrait' as Orientation,
+        isPortrait: true,
+        isLandscape: false,
         breakpoints: {},
         dispose: () => { },
         equals: () => false,
@@ -91,7 +93,7 @@ jest.mock('react-native-unistyles', () => {
         pixelRatio: 0,
         rtl: false,
         getTheme: () => {
-            return {} as UnistylesTheme
+            return (Object.values(_REGISTRY.themes).at(0) ?? {}) as UnistylesTheme
         },
         setTheme: () => {},
         updateTheme: () => {},
@@ -200,7 +202,8 @@ jest.mock('react-native-unistyles', () => {
                 }
             },
             jsMethods: {
-                processColor: () => null
+                processColor: () => null,
+                parseBoxShadowString: () => []
             },
             hairlineWidth: 1,
             unid: -1,

package/src/reanimated/index.ts

@@ -1 +1,2 @@
 export { useAnimatedTheme } from './useAnimatedTheme'
+export { useAnimatedVariantColor } from './variant'

package/src/reanimated/variant/index.ts

@@ -0,0 +1 @@
+export * from './useAnimatedVariantColor'

package/src/reanimated/variant/types.ts

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

package/src/reanimated/variant/useAnimatedVariantColor.ts

@@ -0,0 +1,38 @@
+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_'))
+    // @ts-ignore this is hidden from TS
+    const hasVariants = style[secretKey]?.__stylesheetVariants
+
+    if (!hasVariants || !colorKey.toLowerCase().includes('color')) {
+        throw new Error('useAnimatedVariantColor: Style was not created by Unistyles, does not have variants or has no color property')
+    }
+
+    const { fromValue, toValue } = useUpdateVariantColor({
+        animateCallback: (from, to) => animate(from, to),
+        colorKey,
+        secretKey,
+        style,
+    })
+
+    const progress = useSharedValue(1)
+    const animate = (from: string, to: string) => {
+        'worklet'
+
+        fromValue.set(from)
+        toValue.set(to)
+    }
+
+    const derivedColor = useDerivedValue(() => {
+        return interpolateColor(
+            progress.value,
+            [0, 1],
+            [fromValue.get(), toValue.get()]
+        )
+    })
+
+    return derivedColor
+}

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

@@ -0,0 +1,38 @@
+import { useEffect, useLayoutEffect } from 'react'
+import { useSharedValue } from 'react-native-reanimated'
+import { StyleSheet, UnistyleDependency } from '../../specs'
+import type { UseUpdateVariantColorConfig } from './types'
+
+export const useUpdateVariantColor = <T extends Record<string, any>>({
+    colorKey,
+    style,
+    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)) {
+                // @ts-ignore
+                const newStyles = style[secretKey]?.uni__getStyles()
+
+                fromValue.set(toValue.value)
+                toValue.set(newStyles[colorKey])
+            }
+        })
+
+        return () => dispose()
+    }, [style, colorKey])
+
+    useLayoutEffect(() => {
+        fromValue.set(toValue.value)
+        toValue.set(style[colorKey])
+    }, [style, colorKey])
+
+    return {
+        fromValue,
+        toValue
+    }
+}

package/src/reanimated/variant/useUpdateVariantColor.ts

@@ -0,0 +1,81 @@
+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 { 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
+}: UseUpdateVariantColorConfig<T>) => {
+    const [dummyDiv] = useState(() => {
+        const div = document.createElement('div')
+
+        div.style.display = 'none'
+        document.body.appendChild(div)
+
+        return div
+    })
+    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'
+                ? currentColor
+                : getClosestBreakpointValue<string>(services.runtime, currentColor) ?? 'rgb(0, 0, 0)'
+
+            if (currentColorVar.startsWith('var(--')) {
+                dummyDiv.style.color = currentColorVar
+
+                return getComputedStyle(dummyDiv).color
+            }
+
+            return currentColorVar
+        },
+        [style, colorKey]
+    )
+    const fromValue = useSharedValue<string>(getCurrentColor())
+    const toValue = useSharedValue<string>(getCurrentColor())
+
+    useEffect(() => {
+        const dispose = services.listener.addListeners([UnistyleDependency.Theme], () => {
+            runOnUI(() => {
+                animateCallback?.(toValue.get(), getCurrentColor())
+            })()
+        })
+
+        return () => dispose()
+    }, [style, colorKey])
+
+    useLayoutEffect(() => {
+        animateCallback?.(toValue.get(), getCurrentColor())
+
+        const colorStyle = parsedStyles?.[colorKey as keyof UnistylesValues]
+
+        if (typeof colorStyle !== 'object' || colorStyle === null) {
+            return
+        }
+
+        const dispose = services.listener.addListeners([UnistyleDependency.Breakpoints], () => {
+            animateCallback?.(toValue.get(), getCurrentColor())
+        })
+
+        return () => dispose()
+    }, [style, colorKey])
+
+    useEffect(() => () => dummyDiv.remove(), [])
+
+    return {
+        fromValue,
+        toValue
+    }
+}

package/src/specs/ShadowRegistry/index.ts

@@ -9,6 +9,7 @@ interface ShadowRegistry extends UnistylesShadowRegistrySpec {
     // JSI
     link(node: ShadowNode, styles?: Array<Unistyle>): void,
     unlink(node: ShadowNode): void,
+    flush(): void,
     setScopedTheme(themeName?: string): void,
     getScopedTheme(): string | undefined
 }
@@ -23,8 +24,13 @@ const findShadowNodeForHandle = (handle: ViewHandle) => {
         ?? 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?.__internalInstanceHandle?.elementType ?? 'unknown'}`)
+        throw new Error(`Unistyles: Could not find shadow node for one of your components of type ${handle?.constructor?.name ?? 'unknown'}`)
     }
 
     return node

package/src/specs/StyleSheet/index.ts

@@ -1,6 +1,7 @@
 import { StyleSheet as NativeStyleSheet, processColor } from 'react-native'
 import type { StyleSheet as NativeStyleSheetType } from 'react-native'
 import { NitroModules } from 'react-native-nitro-modules'
+import { parseBoxShadowString } from '../../core/parseBoxShadow'
 import type { UnistylesBreakpoints, UnistylesThemes } from '../../global'
 import type { CreateUnistylesStyleSheet } from '../../types'
 import type { UnistylesStyleSheet as UnistylesStyleSheetSpec } from './UnistylesStyleSheet.nitro'
@@ -33,7 +34,8 @@ export interface UnistylesStyleSheet extends UnistylesStyleSheetSpec {
     create: CreateUnistylesStyleSheet,
     configure(config: UnistylesConfig): void,
     jsMethods: {
-        processColor: typeof processColor
+        processColor: typeof processColor,
+        parseBoxShadowString: typeof parseBoxShadowString
     }
 }
 
@@ -45,7 +47,8 @@ HybridUnistylesStyleSheet.absoluteFill = NativeStyleSheet.absoluteFill
 HybridUnistylesStyleSheet.flatten = NativeStyleSheet.flatten
 HybridUnistylesStyleSheet.compose = NativeStyleSheet.compose
 HybridUnistylesStyleSheet.jsMethods = {
-    processColor
+    processColor,
+    parseBoxShadowString
 }
 
 HybridUnistylesStyleSheet.init()

package/src/specs/UnistylesRuntime/UnistylesRuntime.nitro.ts

@@ -36,6 +36,8 @@ export interface UnistylesRuntime extends HybridObject<{ ios: 'c++', android: 'c
     readonly pixelRatio: number,
     readonly fontScale: number,
     readonly rtl: boolean,
+    readonly isLandscape: boolean,
+    readonly isPortrait: boolean,
 
     setTheme(themeName: string): void,
     setAdaptiveThemes(isEnabled: boolean): void,

package/src/utils.ts

@@ -35,10 +35,8 @@ export const copyComponentProperties = (Component: any, UnistylesComponent: any)
         UnistylesComponent[key] = value
     })
 
-    // Those are not enumerable, so we need to copy them manually
     UnistylesComponent.displayName = Component.displayName
-    UnistylesComponent.name = Component.name
-
+    
     return UnistylesComponent
 }