fix: withSpring color properties flickering

[patrycjakalinska]

Summary

This PR addresses an issue where color-based properties (backgroundColor, boxShadow) were causing flickering when used with withSpring animations. The root cause of the flickering was RGBA values going below 0, resulting in NaN values.

I introduced clampRGBA function that guards values within given limits.

Before:

Screen.Recording.2024-12-16.at.11.14.39.mov

After:

Screen.Recording.2024-12-16.at.11.15.03.mov

Test plan

Paste this code to EmptyExample - it should work on both Paper and Fabric:

EmptyExample code

import { Text, StyleSheet, View, Pressable } from 'react-native';
import React from 'react';
import Animated, {
  useSharedValue,
  withSpring,
  useAnimatedStyle,
} from 'react-native-reanimated';

export default function EmptyExample() {
  const pressed = useSharedValue(false);
  const animatedStyle = useAnimatedStyle(() => {
    return {
      backgroundColor: withSpring(pressed.value ? 'blue' : 'red'),
    };
  });

  return (
    <View>
      <Animated.View style={[styles.box, animatedStyle]} />
      <Pressable
        onPress={() => {
          pressed.value = !pressed.value;
        }}>
        <Text>Press me</Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  box: {
    width: 50,
    height: 50,
  },
});

[tjzel]

What about convertToRGBA and toLinearSpace functions?

[patrycjakalinska]

convertToRGBA converts from rgba string (rgba(255, 0, 0, 1)) to RGBA array, so it should receive correct input. In our current implementation first convertToRGBA is called transforming rgba(255, 0, 0, 1) to [1,0,0,1], then withSpring happens, perhaps returning negative values. And this is the moment where we clamp the values. We could also put clamp in those function you mentioned, but i think it'll overkill because they are protected when other functions (ex. rgbaArrayToRGBAColor) are clamped.

In retrospective we can also move the clamping to util.ts file function colorOnFrame, and clamp the result. In my opinion it will be better to leave clamping in Colors.ts (and if you want extended to convertToRGBA and toLinearSpace). If we were ever to use converting functions in files other that util.ts, then it would guarantee safe result.

[piaskowyk]

I understand that you want to clamp values before converting the color array into a string, as done in the rgbaArrayToRGBAColor method. However, I'm curious why we also need to call clampRGBA in the toGammaSpace method. What's the reasoning behind this additional clamping step? 🤔

[patrycjakalinska]

To be honest toGammaSpace is initial place for clamping, as is it the first function to recieve wrong values that need to be clamped:

    animation.current = rgbaArrayToRGBAColor(
      toGammaSpace(res as ParsedColorArray)
    );

It is also helpful to put it in toGammaSpace as it protects interpolateColorRGB function

  return rgbaColor(
    toGammaSpace(r, gamma),
    toGammaSpace(g, gamma),
    toGammaSpace(b, gamma),
    a
  );

So answering your question, toGammaSpace is the place we must put clamping, rgbaArrayToRGBAColor is a place I decided to put it as a precaution if this function would be used without toGammaSpace preceding it C: