React-native-reanimated: Color node documentation fixes

[kmagiera]

Document that the values provided for the color node should be integers (rounded to integers). In addition we should verify if the provided values are rounded and warn if the aren't as otherwise the resulting color is kind of random.

[osdnk]

I'm rather into throwing error from native or rounding it inside color node

[terrysahaidak]

Probably, rounding is the reason for my bug with animating the color.
Here is an example:
https://snack.expo.io/@terrysahaidak/reanimatedcolorbugexample
Let me know if I should open a separate issue for it.

(Thank you guys for such an awesome lib!)

[jacobarvidsson]

I am getting this color bug as well, where instead of transitioning between two colors smoothly, it flashes with all different colors throughout the animations, just as in the snack above. I am using integers in the interpolation, am I doing something wrong or is this a bug?

interpolate(scale, {
      inputRange: [0.7, 1],
      outputRange: [
        Animated.color(67, 125, 239, 1),
        Animated.color(227, 232, 243, 1),
      ]
})

[gazedash]

Same for me @jacobarvidsson

[jacobarvidsson]

I realised what I did wrong, wrote a helper method for future use:

import Animated from "react-native-reanimated";

const { round, interpolate, Extrapolate, color } = Animated;

const colorRegex = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i;

const hexToRgb = (hex: string) => {
  const result = colorRegex.exec(hex);
  return result
    ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16),
      }
    : null;
};

const white = { r: 255, g: 255, b: 255 };

export const interpolateColors = (
  animationValue: Animated.Adaptable<number>,
  inputRange: number[],
  hexColors: string[],
) => {
  const colors = hexColors.map(hexColor => hexToRgb(hexColor) || white);
  const r = round(
    interpolate(animationValue, {
      inputRange,
      outputRange: colors.map(c => c.r),
      extrapolate: Extrapolate.CLAMP,
    }),
  );
  const g = round(
    interpolate(animationValue, {
      inputRange,
      outputRange: colors.map(c => c.g),
      extrapolate: Extrapolate.CLAMP,
    }),
  );
  const b = round(
    interpolate(animationValue, {
      inputRange,
      outputRange: colors.map(c => c.b),
      extrapolate: Extrapolate.CLAMP,
    }),
  );
  return color(r, g, b);
};

then use it:
style={{ backgroundColor: interpolateColors(scale, [0.7, 1], ["#32CD32", "#228B22"]) }}

[agrinko]

It's super confusing. Interpolating colors shouldn't require so much boilerplate. This helper utility should be included in the library.
Thanks @jacobarvidsson :+1:

[kmagiera]

Happy to accept it as a PR

[jacobarvidsson]

@agrinko There is a util library for react-native-reanimated and react-native-gesture-handler which has a great implementation of color interpolation, among other things: https://wcandillon.github.io/react-native-redash/colors

[jtomaszewski]

See a PR here, basically I added the helper function into the repo. https://github.com/software-mansion/react-native-reanimated/pull/777