`useAnimatedStyle` does not support `hsl(x y% z%)` syntax for colors

[tomekzaw]

Description

When using hsl(x y% z%) syntax for background color in animated style, the color is not updated.

Steps to reproduce

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

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

export default function EmptyExample() {
  const sv = useSharedValue(0);

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

  const animatedStyle = useAnimatedStyle(() => {
    return {
      backgroundColor: `hsl(${sv.value * 180} 100% 50%)`,
    };
  });

  return (
    <View style={styles.container}>
      <Animated.View style={[styles.box, animatedStyle]} />
    </View>
  );
}

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

Snack or a link to a repository

nope

Reanimated version

3.7.1

React Native version

0.73.4

Platforms

Android, iOS

JavaScript runtime

Hermes

Workflow

React Native

Architecture

Paper (Old Architecture)

Build type

Debug app & dev bundle

Device

iOS simulator

Device model

iPhone 15 Pro

Acknowledgements

Yes

[github-actions[bot]]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[tomekzaw]

Workaround

Add commas (,) between HSL components.

   const animatedStyle = useAnimatedStyle(() => {
     return {
-      backgroundColor: `hsl(${sv.value * 180} 100% 50%)`,
+      backgroundColor: `hsl(${sv.value * 180}, 100%, 50%)`,
     };
   });
``