Wheel scroll picker, data length over 100, usage of useDerivedValue, interpolate, and useAnimatedStyle is causing extreme scroll performance issues

[lukasjaronis]

Version: 2.11.0

The below snippet is what is causing major performance issues when scrolling.

As soon as I apply the childViewStyle on each item based on its index, anything over 100 items in data length, scrolling becomes extremely laggy and unbearable for the user.

So my main question is, is there anything else I can do to apply these animated styles? Perhaps I am doing something wrong? Advice would be helpful.

    const translateY = useSharedValue(0)

    <Animated.View style={viewStyle}>
      {values.map((v, i) => {
        const y = useDerivedValue(() =>
          interpolate((translateY.value - ITEM_HEIGHT * 2) / -ITEM_HEIGHT, [i - 3, i, i + 3], [-1, 0, 1], Extrapolate.CLAMP), [translateY.value]
        )

        const childViewStyle = useAnimatedStyle(() => ({
          transform: [
            { perspective: 500 },
            { rotateX: 90 * y.value + 'deg' },
            {
              scale: 1 - 0.8 * Math.abs(y.value),
            },
          ],
        }))

        return (
          <Animated.View key={v.value} style={[childViewStyle]}>
            <Text style={[styles.label]}>{v.label}</Text>
          </Animated.View>
        )
      })}
    </Animated.View>

The first screen (you will see it switch) is data length of 99. The next screen is data length of 999. You can clearly tell a difference in performance, and it's just simply not smooth at all.

Screen.Recording.2022-10-15.at.3.59.36.PM.mov