Derived value (useDerivedValue) doesn't work for BoxShadow / Shadow

[kokosky93]

Hi, I try to follow the Neumorphism tutorial however I have some problems.

When I use useDerivedValue for BoxShadow or Shadow the shadow looks very strange. It looks normal for a static string color value.

so a result of this

    const c1 = useDerivedValue(
        () => `rgba(255, 255, 255, ${mix(pressed.value, 0, 0.7)})"`,
        [pressed]
    );

    const c2 = useDerivedValue(
        () => `rgba(174, 174, 192, ${mix(pressed.value, 0, 0.5)})"`,
        [pressed]
    );

     <Box box={container} color={Theme.white2}>
                <BoxShadow dx={-1} dy={-1} blur={3} color={c1} inner />
                <BoxShadow dx={1.5} dy={1.5} blur={3} color={c2} inner />
     </Box>

is this

a result of this

<Box box={container} color={Theme.white2}>
                <BoxShadow dx={-1} dy={-1} blur={3} color="rgba(255, 255, 255, 0.7)" inner />
                <BoxShadow dx={1.5} dy={1.5} blur={3} color="rgba(174, 174, 192, 0.5)" inner />
</Box>

is this

What am I doing wrong?

It doesn't work when I use Shadow instead of BoxShadow as well (the code below).

<Group>
       <RoundedRect rect={container} color={Theme.white2}>
              <Shadow dx={-1} dy={-1} blur={3} color={c1} inner />
              <Shadow dx={1.5} dy={1.5} blur={3} color={c2} inner />
        </RoundedRect>
</Group>

It doesn't work for static values (without mix function) put into useDerivedValue as well (the code below).

    const c1 = useDerivedValue(
        () => `rgba(255, 255, 255, 0.7)"`,
        [pressed]
    );

    const c2 = useDerivedValue(
        () => `rgba(174, 174, 192, 0.5)"`,
        [pressed]
    );

I work on a fresh expo project:
"@shopify/react-native-skia": "^1.3.6",
"expo": "~51.0.14",
"react-native": "0.74.2",
"react-native-reanimated": "~3.10.1",

[kokosky93]

This was because of (") character I added by mistake..