Animated element freeze the app when it out off-screen

[bayazetyan]

Description

The provided example demonstrates how animations can impact the UI thread. When the animated element moves off-screen, the application experiences a significant slowdown. This issue is particularly noticeable when the animated element is inside a ScrollView. However, when the element is visible within the viewport, everything works smoothly.
Initially, I suspected that the problem was due to the animation being inside a ScrollView. However, after testing, I observed the same slowdown occurring even when the animated element is placed off-screen outside of a ScrollView.

"react-native-reanimated": "^3.16.1",
"@shopify/react-native-skia": "^1.5.3",
"react-native": "0.76.1",

export const Skeleton = (props) => {
  const {
    height,
    width,
    radius = 0,
    duration = 1000,
    color = '#CCC',
  } = props;

  const contrastColor = calculateTint(color, 0.4).tint.hex;
  const animationIndicator = useSharedValue(0);

  useEffect(() => {
      animationIndicator.value = withRepeat(
        withTiming(1, {
          duration: 1000,
          easing: Easing.inOut(Easing.linear),
        }),
        -1
      );
  }, [animationIndicator, duration]);

  const transform = useDerivedValue(() => {
    const x = interpolate(
      animationIndicator.value,
      [0, 1],
      [-1.5 * width, width]
    );

    return [{ translateX: x }];
  }, []);

  return (
     <Canvas style={{ width, height }}>
        <RoundedRect
          x={0}
          y={0}
          r={radius}
          color={color}
          width={width}
          height={height}
        >
          <LinearGradient
            start={vec(0, 0)}
            end={vec(width, 0)}
            transform={transform}
            colors={[color, contrastColor, color]}
          />
        </RoundedRect>
      </Canvas>
  );
};

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2024-12-26.at.16.27.01.mp4

[adriangonzy]

@bayazetyan I think I have a similar issue

[adriangonzy]

My package versions.

"@shopify/react-native-skia": "1.5.0",
"react-native": "~0.76.3",
"react-native-reanimated": "~3.16.2",

For more context, I recently upgraded to the new react native architecture but not sure its the reason. I think this was already happening.
I use expo sdk 52 too.

And I have a scrollView inside a tabview that has some animated widgets and background. When commenting those widgets, the scroll view seems smooth, when uncommenting and as soon as they are out of the screen, same as @bayazetyan the UI frames go to ~5-10fps and the UI seems to freeze until I scroll the animated components back.

@wcandillon Maybe we are doing something very wrong by putting skia canvas in scrollviews or there is something else, but this seems like a real bug.

Any help would be great, as I love skia and rely heavily on it for all the animations.

[adriangonzy]

I upgraded to the latest skia version (1.8.0) but still experiencing the same issue.

[bayazetyan]

@adriangonzy This happens when the animated element is inside a Scroll View. If the element is inside a View but extends beyond the screen, there are no fps issues.

[adriangonzy]

I tested on a real device and not the simulator and did not have any issue in the end. It seems to be only a problem on the simulator.

In my case, I need to have my components in a scrollview.

[bayazetyan]

Same things on real device all work correct. If there are no other comments, I will close this issue soon.