App.tsx

import React, {useEffect, useState} from 'react';
import {
  StyleSheet,
  Dimensions,
  View,
  Text,
  FlatList,
  Button,
} from 'react-native';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withSpring,
  withTiming,
  Easing,
  ReduceMotion,
} from 'react-native-reanimated';

const {width, height} = Dimensions.get('window');

const generateLargeData = (size: number) => {
  return Array.from({length: size}, (_, index) => ({
    id: index.toString(),
    value: Math.random(),
  }));
};

const App = () => {
  const [time, setTime] = useState(Date.now());
  const translateY = useSharedValue(0);
  const data = generateLargeData(1000000);
  const boxWidth = useSharedValue(20);

  const renderItem = ({item}: {item: {id: string; value: number}}) => {
    return (
      <View style={[styles.item]}>
        <Text style={styles.text2}>Item #{item.id}</Text>
        <Text style={styles.text2}>Value: {item.value.toFixed(5)}</Text>
      </View>
    );
  };

  useEffect(() => {
    const interval = setInterval(() => {
      setTime(Date.now());
    }, 1);
    return () => clearInterval(interval);
  }, []);

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{translateY: translateY.value}],
  }));

  return (
    <View style={[styles.gestureContainer]}>
      <Animated.View style={[styles.container, animatedStyle]}>
        <FlatList
          data={data}
          renderItem={renderItem}
          keyExtractor={item => item.id}
          initialNumToRender={100}
          maxToRenderPerBatch={50}
          windowSize={50}
        />
        <View style={styles.row}>
          <Button
            title="Down"
            onPress={() => {
              translateY.value = withSpring(translateY.value + 150, {
                duration: 2000,
              });
              boxWidth.value = withSpring(boxWidth.value - 50, {
                duration: 2000,
              });
            }}
          />
          <Button
            title="Up"
            onPress={() => {
              translateY.value = withTiming(translateY.value - 150, {
                duration: 1000,
                easing: Easing.inOut(Easing.quad),
                reduceMotion: ReduceMotion.System,
              });
              boxWidth.value = withTiming(boxWidth.value + 50, {
                duration: 1000,
              });
            }}
          />
        </View>
        <Animated.View
          style={{
            width: boxWidth,
            height: 20,
            backgroundColor: 'red',
          }}></Animated.View>
        <Text style={styles.text}>
          {global?.nativeFabricUIManager
            ? 'New Architecture'
            : 'Old Architecture'}
        </Text>
      </Animated.View>
    </View>
  );
};

const styles = StyleSheet.create({
  gestureContainer: {
    flex: 1,
  },
  container: {
    width,
    height,
    backgroundColor: 'lightblue',
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 24,
    fontWeight: 'bold',
    color: 'white',
  },
  item: {
    height: 50,
    justifyContent: 'center',
    alignItems: 'center',
    marginVertical: 2,
  },
  text2: {
    color: 'white',
    fontSize: 12,
  },
  row: {
    flexDirection: 'row',
  },
});

export default App;