gistfile1.txt

import React, { useState } from 'react';
import {Button, FlatList, SafeAreaView, StyleSheet, Text, View} from 'react-native';

function App() {
  const [data, setData] = useState(generatePosts(10));

  const loadNewerChats = () => {
    setData([...generatePosts(1000, data.length), ...data]);
  };

  const renderItem = ({ item }) => <Item data={item} />;

  const keyExtractor = (item) => `key_${item.id}`;

  return (
    <SafeAreaView style={{flex: 1}}>
      <FlatList
        data={data}
        renderItem={renderItem}
        keyExtractor={keyExtractor}
        maintainVisibleContentPosition={{ minIndexForVisible: 0 }}
        style={{ flex: 1 }}
      />
      <Button
        title="load newer"
        onPress={loadNewerChats}
      />
    </SafeAreaView>
  );
}

function Item({ data }) {
  return (
    <View style={styles.item}>
      <Text style={styles.title}>
        {data.id} - {data.title}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  item: {
    backgroundColor: '#f9c2ff',
    marginVertical: 8,
    marginHorizontal: 16,
    height: 70,
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    fontSize: 24,
  },
});

const generatePosts = (count, start = 0) => {
  return Array.from({ length: count }, (_, i) => ({
    title: `Title ${start + i + 1}`,
    id: start + i,
  }));
};

export default App;