Skip to content

Instantly share code, notes, and snippets.

@janicduplessis
Created December 7, 2023 23:04
Show Gist options
  • Save janicduplessis/b67d1fafc08ef848378263208ab93d4c to your computer and use it in GitHub Desktop.
Save janicduplessis/b67d1fafc08ef848378263208ab93d4c to your computer and use it in GitHub Desktop.
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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment