better list handling

src/pages/calendar/calendar.tsx

@@ -1,6 +1,7 @@
 import {MyTouchableOpacity} from '@components/MyTouchableOpacity';
-import {Text} from '@gluestack-ui/themed';
+import {Spinner, Text} from '@gluestack-ui/themed';
 import {RootState} from '@redux/store';
+import {useState} from 'react';
 import {Image} from 'react-native';
 import {FlatList} from 'react-native';
 import {View} from 'react-native';
@@ -13,17 +14,11 @@ const baseUrls = [
   'https://i.ytimg.com/vi/RDrJ1VmRi0w/hqdefault.jpg',
 ];
 
-const events: ArrayLike<any> | null | undefined = [];
-
-for (let i = 1; i <= 100; i++) {
-  const randomUrlIndex = Math.floor(Math.random() * baseUrls.length);
-
-  events.push({
-    id: i,
-    url: baseUrls[randomUrlIndex],
-    title: 'Bootshaus',
-    description: '01.12.2023 20:00 Uhr',
-  });
+interface Event {
+  id: number;
+  url: string;
+  title: string;
+  description: string;
 }
 
 /*
@@ -59,6 +54,28 @@ export function CalendarScreen() {
     (state: RootState) => state.nonSaveVariables.theme.colors,
   );
 
+  const [refreshing, setRefreshing] = useState(false);
+  //const [paginationPage, setPaginationPage] = useState(1);
+
+  const newEvents = () => {
+    let list = [];
+
+    for (let i = 1; i <= 10; i++) {
+      const randomUrlIndex = Math.floor(Math.random() * baseUrls.length);
+
+      list.push({
+        id: i,
+        url: baseUrls[randomUrlIndex],
+        title: 'Bootshaus',
+        description: '01.12.2023 20:00 Uhr',
+      });
+    }
+
+    return list;
+  };
+
+  const [events, setEvents] = useState(newEvents());
+
   return (
     <View>
       <FlatList
@@ -94,6 +111,34 @@ export function CalendarScreen() {
             </View>
           </MyTouchableOpacity>
         )}
+        refreshing={refreshing}
+        onRefresh={() => {
+          console.log('refresh');
+
+          setRefreshing(true);
+
+          setTimeout(() => {
+            setRefreshing(false);
+          }, 1000);
+        }}
+        onEndReached={() => {
+          console.log('end reached');
+
+          setEvents([...events, ...newEvents()]);
+        }}
+        onEndReachedThreshold={0}
+        ListFooterComponent={() => {
+          return (
+            <View
+              style={{
+                height: 40,
+                justifyContent: 'center',
+                alignItems: 'center',
+              }}>
+              <Spinner />
+            </View>
+          );
+        }}
       />
     </View>
   );