rea-performance-2.tsx

import Animated, {
  useSharedValue,
  withTiming,
  useAnimatedStyle,
  runOnUI,
  withRepeat,
  useFrameCallback,
  makeMutable
} from 'react-native-reanimated';
import { View, Button } from 'react-native';
import React, { useEffect } from 'react';
import { globalState } from './global';

function AnimatedItem() {
  const width = useSharedValue(10);
  const opacity = useSharedValue(0.25);

  const style = useAnimatedStyle(() => {
    return {
      width: withTiming(width.value, { duration: 10 * 1000 }),
      opacity: withTiming(opacity.value, { duration: 10 * 1000 }),
      // width: width.value,
      // opacity: opacity.value,
    };
  });

  useEffect(() => {
    width.value = 300;
    opacity.value = 1;
    // width.value = withTiming(300, { duration: 10 * 1000 });
    // opacity.value = withTiming(1, { duration: 10 * 1000 });
  }, []);

  return (
    <Animated.View
      style={[
        { width: 0.1, height: 1, backgroundColor: 'black' },
        style,
      ]}
    />
  );
}

function Example1() {
  const N = 2000;
  return (
    <View
      style={{
        flex: 1,
        flexDirection: 'column',
      }}>
      {new Array(N).fill(0).map((_, i) => (<AnimatedItem key={i} />))}
    </View>
  );
}

function Example2() {
  const N = 1000;

  const randomWidth = useSharedValue(0);
  const style = useAnimatedStyle(() => {
    return {
      width: withTiming(randomWidth.value),
    };
  });

  return (
    <View
      style={{
        flex: 1,
        flexDirection: 'column',
      }}>
      <Button
        title="toggle"
        onPress={() => {
          randomWidth.value = Math.random() * 350;
        }}
      />
      {new Array(N).fill(0).map((_, i) => (
        <Animated.View
          key={i}
          style={[
            { width: 2, height: 1, backgroundColor: 'black' },
            style,
          ]}
        />
      ))}  
    </View>
  );
}

const measurements = makeMutable<number[]>([]);
const measurementsSum = makeMutable(0);
const measurementsCount = makeMutable(0);
const timestamp = makeMutable(performance.now());

function AnimatedStyleUpdateExample(): React.ReactElement {
  useEffect(() => {
    const currentTimestamp = performance.now();
    console.log('RenderTime:', currentTimestamp - globalState.timestamp);
  }, []);
  useFrameCallback((data) => {
    'worklet'
    const duration = performance.now() - timestamp.value;
    timestamp.value = performance.now();
    measurementsSum.value = measurementsSum.value + duration;
    measurementsCount.value = measurementsCount.value + 1;
    if (measurementsCount.value === 10) {
      console.log('Average time:', measurementsSum.value / 10);
      measurementsSum.value = 0;
      measurementsCount.value = 0;
    }
  });
  return (<Example1 />);
}

export default AnimatedStyleUpdateExample;