react-native-unistyles/src/reanimated/variant/useUpdateVariantColor.native.ts

Level up your React Native StyleSheet

import { useEffect, useLayoutEffect } from 'react'
import { useSharedValue } from 'react-native-reanimated'

import type { UseUpdateVariantColorConfig } from './types'

import { StyleSheet, UnistyleDependency } from '../../specs'

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(() => {
        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,
    }
}