Significant performance degradation in Group transform from v1.5.1 to v1.5.2

[padge]

When adjusting a Group's scale via transform, the UI FPS drops from approx. 58-60 (v1.5.1) to 34-40 (v1.5.2) when repeatedly tapping the Scale button in this example.

import React, { useEffect, useState } from "react";
import { Button, Dimensions, View } from "react-native";
import { Canvas, Group, Rect } from "@shopify/react-native-skia";
import {
  useDerivedValue,
  useSharedValue,
  withTiming,
} from "react-native-reanimated";

const { width } = Dimensions.get("window");

export function TestScreen() {
  const scale = useSharedValue(1);
  const [zoomed, setZoomed] = useState(false);

  useEffect(() => {
    scale.value = withTiming(zoomed ? 2 : 1, { duration: 500 });
  }, [zoomed, scale]);

  const transform = useDerivedValue(() => {
    return [{ scale: scale.value }];
  }, []);

  const n = 18;
  const size = width / n;

  return (
    <View style={{ flex: 1, justifyContent: "center" }}>
      <Button onPress={() => setZoomed((prev) => !prev)} title="Scale" />
      <Canvas style={{ width: width, height: width }}>
        <Group transform={transform}>
          {[...Array(n * n)].map((_, i) => {
            const x = (i % n) * size;
            const y = Math.floor(i / n) * size;
            return (
              <Rect
                key={i}
                x={x}
                y={y}
                width={size}
                height={size}
                color={`hsl(${i}, 80%, 70%)`}
              />
            );
          })}
        </Group>
      </Canvas>
    </View>
  );
}

package.json

"@shopify/react-native-skia": "1.5.2",
"expo": "^52.0.0",
"react": "18.3.1",
"react-native": "0.76.2",
"react-native-reanimated": "~3.16.1",

[wcandillon]

Are you noticing it on Android/iOS or both?

[padge]

I only tested on iOS. My project isn't set up for Android atm.

[wcandillon]

I am not able to reproduce it at all on your example but I am investigating on other example if performance has regressed.

[wcandillon]

I am unable to observe any performance regressions, still looking into it but would you have some tips on how I could notice it?

[padge]

Okay interesting.. I was testing with new architecture disabled on an iPhone 13 mini (no simulator), bare expo project.

I'm working on testing it on a fresh expo install, so I'll let you know if I can reproduce it that way or not.

[wcandillon]

I think I am able to reproduce it now. This is shocking, will be working on a fix asap.

On Mon, Nov 18, 2024 at 6:50 PM William Candillon @.***> wrote:

I'm still looking into it but so far no luck

On Mon, Nov 18, 2024 at 6:43 PM Ryan Padget @.***> wrote:

Okay interesting.. I was testing with new architecture disabled on an iPhone 13 mini (no simulator), bare expo project.

I'm working on testing it on a fresh expo install, so I'll let you know if I can reproduce it that way or not.

— Reply to this email directly, view it on GitHub or unsubscribe. You are receiving this email because you commented on the thread.

Triage notifications on the go with GitHub Mobile for iOS or Android.

[padge]

Glad you were able to reproduce it! I was able to reproduce it with a fresh project as well. Let me know if you'd like a link to it or not.

[github-actions[bot]]

:tada: This issue has been resolved in version 1.5.4 :tada:

The release is available on:

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

Your semantic-release bot :package::rocket:

[wcandillon]

Thanks a lot of reporting this, sorry I didn't catch this mistake :) Hope it works well for you now.

[padge]

No problem, and no worries! I just tested it and the performance is back to normal 🎉 Thank you for the quick fix (and great library)!