Color Utilities

/**
 * Represents an animated color value
 * Can be a color string (hex, rgb, etc.) or numeric color
 */
type AnimatedColor = string | number;

/**
 * Interpolate between two colors
 * @param value - Interpolation factor (0 to 1)
 * @param color1 - Start color
 * @param color2 - End color
 * @param colorSpace - Color space for interpolation (default: "RGB")
 * @returns Interpolated color
 */
function mixColor(
  value: number,
  color1: AnimatedColor,
  color2: AnimatedColor,
  colorSpace?: "RGB" | "HSV"
): AnimatedColor;

import { mixColor } from "react-native-redash";
import { useAnimatedStyle, useSharedValue } from "react-native-reanimated";

const progress = useSharedValue(0);

const animatedStyle = useAnimatedStyle(() => ({
  backgroundColor: mixColor(
    progress.value,
    "#ff0000", // Red
    "#0000ff", // Blue
    "RGB"
  )
}));

// HSV interpolation for more natural color transitions
const hsvStyle = useAnimatedStyle(() => ({
  backgroundColor: mixColor(
    progress.value,
    "#ff0000",
    "#00ff00",
    "HSV" // Goes through yellow instead of brown
  )
}));

/**
 * Determine if color is light based on luminance
 * @param r - Red component (0-255)
 * @param g - Green component (0-255)
 * @param b - Blue component (0-255)
 * @returns True if color is light, false if dark
 */
function isLight(r: number, g: number, b: number): boolean;

import { isLight, red, green, blue } from "react-native-redash";

const colorValue = 0xff5733ff; // Some color
const r = red(colorValue);
const g = green(colorValue);
const b = blue(colorValue);

const textColor = isLight(r, g, b) ? "black" : "white";

/**
 * Convert HSV color values to RGB
 * @param h - Hue (0 to 1)
 * @param s - Saturation (0 to 1)
 * @param v - Value/Brightness (0 to 1)
 * @returns RGB color object with r, g, b values (0-255)
 */
function hsv2rgb(h: number, s: number, v: number): {
  r: number;
  g: number;
  b: number;
};

import { hsv2rgb } from "react-native-redash";
import { useAnimatedStyle, useSharedValue } from "react-native-reanimated";

const hue = useSharedValue(0);

const animatedStyle = useAnimatedStyle(() => {
  const { r, g, b } = hsv2rgb(
    hue.value, // Hue (0 to 1)
    1.0,       // Full saturation
    1.0        // Full brightness
  );
  
  return {
    backgroundColor: `rgb(${r}, ${g}, ${b})`
  };
});

// Animate hue for rainbow effect
import { withRepeat, withTiming } from "react-native-reanimated";

useEffect(() => {
  hue.value = withRepeat(withTiming(1, { duration: 2000 }), -1, false);
}, []);

/**
 * Extract opacity/alpha component from color
 * @param color - Numeric color value
 * @returns Opacity value (0 to 1)
 */
function opacity(color: number): number;

/**
 * Extract red component from color
 * @param color - Numeric color value
 * @returns Red value (0 to 255)
 */
function red(color: number): number;

/**
 * Extract green component from color
 * @param color - Numeric color value
 * @returns Green value (0 to 255)
 */
function green(color: number): number;

/**
 * Extract blue component from color
 * @param color - Numeric color value
 * @returns Blue value (0 to 255)
 */
function blue(color: number): number;

import { opacity, red, green, blue, isLight } from "react-native-redash";

// Extract components from numeric color (ARGB format)
const color = 0xff5733aa; // Semi-transparent orange

const a = opacity(color); // ~0.67 (170/255)
const r = red(color);     // 87
const g = green(color);   // 51  
const b = blue(color);    // 170

// Use for dynamic styling
const brightness = isLight(r, g, b);
const contrastColor = brightness ? "black" : "white";

// Create variations
const lighterColor = `rgba(${r}, ${g}, ${b}, ${a * 0.5})`;
const solidColor = `rgb(${r}, ${g}, ${b})`;

import React, { useEffect } from "react";
import { View, StyleSheet } from "react-native";
import {
  mixColor,
  hsv2rgb,
  isLight,
  red,
  green,
  blue
} from "react-native-redash";
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withRepeat,
  withTiming,
  useDerivedValue
} from "react-native-reanimated";

export const ColorfulBox = () => {
  const progress = useSharedValue(0);
  const hue = useSharedValue(0);
  
  useEffect(() => {
    // Animate between colors
    progress.value = withRepeat(
      withTiming(1, { duration: 3000 }),
      -1,
      true
    );
    
    // Rotate through hue spectrum
    hue.value = withRepeat(
      withTiming(1, { duration: 5000 }),
      -1,
      false
    );
  }, []);
  
  // Mix between predefined colors
  const mixedStyle = useAnimatedStyle(() => ({
    backgroundColor: mixColor(
      progress.value,
      "#ff6b6b", // Red
      "#4ecdc4", // Teal
      "HSV"
    )
  }));
  
  // HSV color wheel
  const hsvStyle = useAnimatedStyle(() => {
    const { r, g, b } = hsv2rgb(hue.value, 0.8, 0.9);
    return {
      backgroundColor: `rgb(${r}, ${g}, ${b})`
    };
  });
  
  // Dynamic text color based on background
  const dynamicTextColor = useDerivedValue(() => {
    const { r, g, b } = hsv2rgb(hue.value, 0.8, 0.9);
    return isLight(r, g, b) ? "black" : "white";
  });
  
  const textStyle = useAnimatedStyle(() => ({
    color: dynamicTextColor.value
  }));
  
  return (
    <View style={styles.container}>
      <Animated.View style={[styles.box, mixedStyle]}>
        <Animated.Text style={[styles.text, { color: "white" }]}>
          Mixed Colors
        </Animated.Text>
      </Animated.View>
      
      <Animated.View style={[styles.box, hsvStyle]}>
        <Animated.Text style={[styles.text, textStyle]}>
          HSV Rainbow
        </Animated.Text>
      </Animated.View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    gap: 20
  },
  box: {
    width: 200,
    height: 100,
    borderRadius: 10,
    justifyContent: "center",
    alignItems: "center"
  },
  text: {
    fontSize: 16,
    fontWeight: "bold"
  }
});