BoxShadow opacity not animating

[padge]

In this example, animating the Group's opacity causes the Box's color to transition as expected, however the the shadows remain visible the entire time. The same thing happens if I move the opacity from the Group to the Box.

import { useEffect } from "react";
import {
  Box,
  BoxShadow,
  Canvas,
  Group,
  rect,
  rrect,
} from "@shopify/react-native-skia";
import { useSharedValue, withTiming } from "react-native-reanimated";

export function BoxDemoScreen() {
  const opacity = useSharedValue(0);
  useEffect(() => {
    const animate = () => {
      opacity.value = 0;
      opacity.value = withTiming(1, { duration: 3000 });
    };
    animate();
    const i = setInterval(animate, 4000);
    return () => clearInterval(i);
  }, []);

  return (
    <Canvas style={{ flex: 1 }}>
      <Group opacity={opacity}>
        <Box box={rrect(rect(100, 200, 128, 128), 24, 24)} color="#add8e6">
          <BoxShadow dx={10} dy={10} blur={10} color="#93b8c4" inner />
          <BoxShadow dx={-10} dy={-10} blur={10} color="#c7f8ff" inner />
        </Box>
      </Group>
    </Canvas>
  );
}

package.json

"@shopify/react-native-skia": "1.6.0",
"expo": "~52.0.7",
"react-native": "0.76.2",
"react-native-reanimated": "~3.16.1",

New architecture is enabled. Using hermes. Testing on iOS device only.

[wcandillon]

thanks for reporting this, I can confirm that this is fixed in #2865

[github-actions]

🎉 This issue has been resolved in version 1.10.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀