Align handling colors with RN

[maciekstosio]

Summary

Fixes #5746. Not all color formats and syntax supported by RN is supported by reanimated. This PR should align with RN implementation. An example for rgb,rgba,hsl,hsl with comma and without (for view and Animated.View):

Before	After

Test plan

Reused RN tests.

Example from the video

import { StyleSheet, View, Text } from 'react-native';

import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withRepeat,
  withTiming,
} from 'react-native-reanimated';
import React, { useEffect } from 'react';

const CompareColumnAnimated = ({
  title,
  withComma,
}: {
  title: string;
  withComma?: boolean;
}) => {
  const sv = useSharedValue(0);

  const toRgb = (value: number) => {
    'worklet';
    return Math.floor(Math.abs(value) * 255);
  };

  useEffect(() => {
    sv.value = withRepeat(withTiming(1, { duration: 1000 }), -1, true);
    return () => {
      sv.value = 0;
    };
  }, [sv]);

  return (
    <View style={{}}>
      <View style={styles.header}>
        <Text>{title}</Text>
      </View>
      <Animated.View
        style={[
          styles.box,
          useAnimatedStyle(() => ({
            backgroundColor: `rgb(${toRgb(sv.value)} 255 255)`
              .split(' ')
              .join(withComma ? ', ' : ' '),
          })),
        ]}
      />
      <Animated.View
        style={[
          styles.box,
          useAnimatedStyle(() => ({
            backgroundColor: `rgba(${toRgb(sv.value)} 255 255 0.5)`
              .split(' ')
              .join(withComma ? ', ' : ' '),
          })),
        ]}
      />
      <Animated.View
        style={[
          styles.box,
          useAnimatedStyle(() => ({
            backgroundColor: `hsl(${sv.value * 180} 100% 50%)`
              .split(' ')
              .join(withComma ? ', ' : ' '),
          })),
        ]}
      />
      <Animated.View
        style={[
          styles.box,
          useAnimatedStyle(() => ({
            backgroundColor: `hsla(${sv.value * 180} 100% 50% 0.5)`
              .split(' ')
              .join(withComma ? ', ' : ' '),
          })),
        ]}
      />
    </View>
  );
};

const CompareColumn = ({
  title,
  withComma,
}: {
  title: string;
  withComma?: boolean;
}) => (
  <View style={{}}>
    <View style={styles.header}>
      <Text>{title}</Text>
    </View>
    <View
      style={[
        styles.box,
        {
          backgroundColor: 'rgb(100 255 255)'
            .split(' ')
            .join(withComma ? ', ' : ' '),
        },
      ]}
    />
    <View
      style={[
        styles.box,
        {
          backgroundColor: 'rgba(100 255 255 0.5)'
            .split(' ')
            .join(withComma ? ', ' : ' '),
        },
      ]}
    />
    <View
      style={[
        styles.box,
        {
          backgroundColor: 'hsl(100 100% 50%)'
            .split(' ')
            .join(withComma ? ', ' : ' '),
        },
      ]}
    />
    <View
      style={[
        styles.box,
        {
          backgroundColor: 'hsla(100 100% 50% 0.5)'
            .split(' ')
            .join(withComma ? ', ' : ' '),
        },
      ]}
    />
  </View>
);

export default function EmptyExample() {
  return (
    <View style={styles.container}>
      <CompareColumnAnimated title="anim comma" withComma />
      <CompareColumn title="view comma" withComma />
      <CompareColumnAnimated title="anim no comma" />
      <CompareColumn title="view no comma" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: 'row',
  },
  box: {
    width: 100,
    height: 100,
  },
  header: { justifyContent: 'center', alignSelf: 'center' },
});