Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Drop in performance with a lot of objects

See original GitHub issue

Description

Hello dear developers. I just encountered big drop in performance compared with reanimated v1 when you have about 50 Views with own SharedValue and own rotate transformation (especially on android device) . V2 shows about 40 fps, when v1 shows 60. Is v1 more performant? Or I do something wrong?

Screenshots

https://user-images.githubusercontent.com/39302602/104703629-9da3d400-5728-11eb-960f-7f667257cd3f.mp4

https://user-images.githubusercontent.com/39302602/104703724-bdd39300-5728-11eb-9add-1c588a51279c.mp4

Steps To Reproduce

Use code below or:

Add 50 Animated.Views with own Shared value and run rotate transformation

Expected behavior

60fps

Actual behavior

40fps

Snack or minimal code example

import { loop } from "react-native-redash/src/v1";

const dummy = new Array(50).fill(1);
function App() {
  return (
    <View style={{ flex: 1, flexDirection: "row", flexWrap: "wrap" }}>
      {dummy.map((_, i) => {
        const val = useSharedValue(0);

        val.value = withRepeat(
          withTiming(1, { duration: Math.random() * 2000 + 4000 }),
          -1
        );

        const style = useAnimatedStyle(() => {
          return {
            transform: [
              { rotate: interpolate(val.value, [0, 1], [0, Math.PI * 2]) + "rad" },
            ],
          };
        });

        //reanimated1 code
        // const val = loop({ duration: Math.random() * 2000 + 4000 });

        // const style = {
        //   transform: [
        //     {
        //       rotate: concat(
        //         interpolateNode(val, {
        //           inputRange: [0, 1],
        //           outputRange: [0, Math.PI * 2],
        //         }),
        //         "rad"
        //       ),
        //     },
        //   ],
        // };
        return (
          <Animated.View
            key={i}
            style={[
              {
                width: 60,
                height: 60,
                borderWidth: 1,
                backgroundColor: `hsl(${(360 / dummy.length) * i}, 100%, 40%)`,
              },
              style,
            ]}
          />
        );
      })}
    </View>
  );
}