SkiaPerfRepro.tsx

/* eslint-disable react-native/no-inline-styles */
import {Canvas, Group, Rect} from '@shopify/react-native-skia';
import React from 'react';
import {View, Text} from 'react-native';
import RNBootSplash from 'react-native-bootsplash';
import Animated, {
    useAnimatedScrollHandler,
    useAnimatedStyle,
    useDerivedValue,
    useSharedValue,
    withRepeat,
    withTiming,
} from 'react-native-reanimated';

const array = new Array(30).fill(0).map((_, index) => index);

function App() {
    React.useEffect(() => {
        RNBootSplash.hide({fade: true});
        offset.value = withRepeat(withTiming(-3000, {duration: 8000}), -1, true);
    }, []);

    const offset = useSharedValue(0);
    const offsetTx = useDerivedValue(() => [{translateY: offset.value}]);
    const offsetStyle = useAnimatedStyle(() => ({transform: offsetTx.value}));

    const onScroll = useAnimatedScrollHandler({
        onScroll: (event) => {
            requestAnimationFrame(() => {
                offset.value = event.contentOffset.y * -1;
            });
        },
    });

    return (
        <View style={{flex: 1, marginTop: 100, flexDirection: 'row'}}>
            <Text style={{position: 'absolute', top: -30, left: 20}}>
                Skia Mirror | ScrollView | Reanimated Mirror
            </Text>
            <Canvas debug={true} mode="continuous" style={[{flex: 1}]} pointerEvents="none">
                <Group transform={offsetTx} layer={false}>
                    {array.map((index) => (
                        <Rect
                            key={index}
                            x={15}
                            y={150 * index + 50}
                            width={100}
                            height={100}
                            color="red"
                        />
                    ))}
                </Group>
            </Canvas>
            <Animated.View style={[{flex: 1, backgroundColor: 'black'}]}>
                <Animated.ScrollView
                    onScroll={onScroll}
                    /* i tried with 16 ass well */
                    scrollEventThrottle={1}>
                    {array.map((index) => (
                        <View
                            key={index}
                            style={{
                                left: 15,
                                marginTop: 50,
                                width: 100,
                                height: 100,
                                backgroundColor: 'red',
                            }}
                        />
                    ))}
                </Animated.ScrollView>
            </Animated.View>
            <Animated.View style={{flex: 1, backgroundColor: 'yellow', overflow: 'hidden'}}>
                <Animated.View style={offsetStyle}>
                    {array.map((index) => (
                        <View
                            key={index}
                            style={{
                                left: 15,
                                marginTop: 50,
                                width: 100,
                                height: 100,
                                backgroundColor: 'red',
                            }}
                        />
                    ))}
                </Animated.View>
            </Animated.View>
        </View>
    );
}

export default App;