Does interpolateColor support alpha channel (RGBA)?

[mrousavy]

I'm trying to animate from a color value with transparency to a color value without transparency, and the result is just the colors going crazy disco mode (they're going through the whole color spectrum).

So does interpolateColor support values such as rgba(255, 255, 255, 0.5)? If no, are there plans to support it?

Note: I know I can animate opacity too, but that's actually not the same effect. Imagine animating a view that has subviews. With a background that has alpha, only the background is transparent. If I lower the opacity directly, all children are also see-through.

[piaskowyk]

I also noticed this problem. Example code:

import React from 'react';
import { View, Button } from 'react-native';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withTiming,
  Easing,
  interpolateColor,
} from 'react-native-reanimated';

export default function AnimatedStyleUpdateExample() {
  const color = useSharedValue(0)
  const animatedStyles = useAnimatedStyle(() => {
    return {
      backgroundColor: interpolateColor(
        color.value,
        [0, 1, 2],
        ['rgba(255,0,0,0.1)', 'rgba(0,255,0,0.9)', 'rgba(0,0,255,0.5)'],
        // ['rgb(255,0,0)', 'rgb(0,255,0)', 'rgb(0,0,255)'],
      ),
    };
  });

  return (
    <View>
      <Animated.View style={[{ height: 100, width: 100 }, animatedStyles]} />
      <Button onPress={() => {
        color.value = withTiming((color.value + 1) % 3, {duration: 1000, easing: Easing.linear})
      }} title="click" />
    </View>
  );
}

[piaskowyk]

@mrousavy good point 🙌
I fixed it here.