Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

BoxShadow opacity not animating #2792

Open
padge opened this issue Dec 4, 2024 · 0 comments
Open

BoxShadow opacity not animating #2792

padge opened this issue Dec 4, 2024 · 0 comments

Comments

@padge
Copy link

padge commented Dec 4, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant