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

Level up your React Native StyleSheet

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 as string).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
}