Remove unnecessary color processing in interpolateColor

[szydlovsky]

Summary

Our interpolateColor function seems to have some unnecessary color processing in it. It was added some 3-4 years ago and should not be needed by now.

Why

There is a function called rgbaColor which is used in hsvToColor (which in turn is used only in interpolateColor) as well as directly in interpolateColor. So it's safe to say it is used only there. All it does is take r,g,b,a values, runs a small check on them and then returns a rgba string.
It has a check whether we are on UI thread or not. If we were on UI, it returned a number-formatted color (formatted for native platforms) instead of the usual rgba string. The problem is, these values are then directly returned from the function. I believe it was needed back then, but now we have a function called processColorInProps which does exactly that + it doesn't interfere with returned values of interpolateColor. Taking all these things into consideration, I believe this check in rgbaColor function is not needed anymore.

Moreover, it creates problems. When interpolateColor gets called on UI thread (for example by using it inside useDerivedValue hook as shown by this issue: #6119), the user gets these number-formatted colors which don't work when passed anywhere.

Test plan

Copy App.tsx from snack linked to the mentioned issue and make sure the text stays blue. Also, check out Color Interpolation example from the example app.

Tested on iOS and Android (both Paper and Fabric) as well as Web. I've noticed neither issues nor regressions.

[tomekzaw]

LGTM but let's wait for @piaskowyk's approval

[piaskowyk]

According to my test and our runtimetests it works 🎉

[jesse-one-app]

this change has caused an issue in our project when using interpolateColor inside of a useAnimatedProps hook with an Animated.createAnimatedComponent using a react-native-svg path. The color changes briefly then resets back to black.

When i roll back to 3.13.0 that doesn't include this change the color works as expected.

@piaskowyk Can we revert this change or fix the issues it has with animated props?

[tomekzaw]

It seems like this should be fixed with software-mansion/react-native-svg#2397

[bohdanprog]

Hello @jesse-one-app,
I tried to reproduce your issue but couldn't. Could you please check that example? It should work.

import React from 'react';
import {Svg, Circle} from 'react-native-svg';
import Animated, {
  createAnimatedPropAdapter,
  processColor,
  useAnimatedProps,
  useSharedValue,
  withRepeat,
  withTiming,
  interpolateColor,
} from 'react-native-reanimated';

const AnimatedCircle = Animated.createAnimatedComponent(Circle);

const adapter = createAnimatedPropAdapter(
  props => {
    if (Object.keys(props).includes('fill')) {
      props.fill = {type: 0, payload: processColor(props.fill)};
    }
  },
  ['fill'],
);

export default function App() {
  const opacity = useSharedValue(0);

  React.useEffect(() => {
    opacity.value = withRepeat(withTiming(1), -1, true);
  }, []);

  const circleAnimatedProps = useAnimatedProps(
    () => {
      const coordinates = {cx: 50, cy: 50, r: 50};

      return {
        cx: coordinates.cx,
        cy: coordinates.cy,
        r: coordinates.r,
        fill: interpolateColor(opacity.value, [0, 1], ['red', 'green']),
        opacity: opacity.value,
        strokeWidth: 2,
      };
    },
    [],
    adapter,
  );

  return (
    <Svg width="100%" height="100%">
      <AnimatedCircle animatedProps={circleAnimatedProps} />
    </Svg>
  );
}

[jesse-one-app]

@bohdanprog we were not calling processColor in the createAnimatedPropAdapter function

thanks for the example and the help!