Fix animating colors direclty from useAnimatedStyle

[kmagiera]

Description

This PR fixes the ability to use color animations directly in useAnimatedStyle.

Changes

This diff changes the way parseColors method works. Before this change we'd run all the updates for color properties (e.g. backgroundColor) via that method and expect it to update color to a normalized form. This way we'd get normalized values to send to the native side. However, if you'd specify withTiming(someColor) as a value, the parser would return undefined and override that animated value. As a result removing that animation object from styles would result in disabling that animation completely (the code fragment responsible for running animation would never see it). What we should be doing instead is to allow animated color values to be passed as animation objects and be parsed only when they are turned into actual values when the animation is running.

Before

To test it add a code that has style like this:

const style = useAnimatedStyle(() => { backgroundColor: withTiming(toggle ? 'red' : 'green') });

Before this change the color would not change after we switch the toggle

After

After this change the color propertly animated when toggle variable is flipped.

Test code and steps to reproduce

const style = useAnimatedStyle(() => { backgroundColor: withTiming(toggle ? 'red' : 'green') });

[SpaghettiC0des]

Hi @kmagiera. Seems like this is still happening on the latest version, 2.3.1?

Here's a code snippet, interpolateColor works but not with withTiming.

const captureButtonStyle = useAnimatedStyle(() => {
    return {
      //   backgroundColor: interpolateColor(
      //     Number(recordingStarted.value),
      //     [0, 0.5, 1],
      //     [Colors.backdropLight, Colors.grey3, Colors.error],
      //   ),
      backgroundColor: withTiming(
        processColor(
          recordingStarted.value ? Colors.error : Colors.backdropLight,
        ),
      ),
    };
  }, [recordingStarted.value]);