App.tsx

import React, {useEffect, useState} from 'react';
import {StyleSheet, Dimensions, View, Text, FlatList} from 'react-native';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withDecay,
} from 'react-native-reanimated';

import {
  Gesture,
  GestureDetector,
  GestureHandlerRootView,
} from 'react-native-gesture-handler';

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 prevTranslateY = useSharedValue(0);

  const data = generateLargeData(10000);

  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());
    }, 300);
    return () => clearInterval(interval);
  }, []);

  const panGesture = Gesture.Pan()
    .onStart(() => {
      prevTranslateY.set(translateY.value);
    })
    .onUpdate(event => {
      translateY.set(Math.min(prevTranslateY.value + event.translationY, 0));
    })
    .onEnd(event => {
      translateY.set(
        withDecay({
          velocity: event.velocityY * 2,
          clamp: [-height + 100, 0],
        }),
      );
    });

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

  return (
    <GestureHandlerRootView>
      <GestureDetector gesture={panGesture}>
        <View style={styles.gestureContainer}>
          <Animated.View style={[styles.container, animatedStyle]}>
            <Animated.Text style={styles.text}>Scroll me! {time}</Animated.Text>
            <FlatList
              data={data}
              renderItem={renderItem}
              keyExtractor={item => item.id}
              initialNumToRender={100}
              maxToRenderPerBatch={50}
              windowSize={30}
            />
          </Animated.View>
        </View>
      </GestureDetector>
    </GestureHandlerRootView>
  );
};

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,
  },
});

export default App;