react-native-unistyles/lib/module/reanimated/variant/useAnimatedVariantColor.js

Level up your React Native StyleSheet

"use strict";

import { interpolateColor, useDerivedValue, useSharedValue } from 'react-native-reanimated';
import { useUpdateVariantColor } from './useUpdateVariantColor';
export const useAnimatedVariantColor = (style, colorKey) => {
  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, to) => {
    'worklet';

    fromValue.set(from);
    toValue.set(to);
  };
  const derivedColor = useDerivedValue(() => {
    return interpolateColor(progress.value, [0, 1], [fromValue.get(), toValue.get()]);
  });
  return derivedColor;
};
//# sourceMappingURL=useAnimatedVariantColor.js.map