From 63fd59e826acfa7808f0683adf3d780a40df2714 Mon Sep 17 00:00:00 2001
From: Beef <beefers@riseup.net>
Date: Sat, 13 May 2023 00:15:11 +0100
Subject: [PATCH] [UI > AddonPage] Move back to FlatList

---
 src/ui/settings/components/AddonPage.tsx | 32 +++++++++++++-----------
 1 file changed, 18 insertions(+), 14 deletions(-)

diff --git a/src/ui/settings/components/AddonPage.tsx b/src/ui/settings/components/AddonPage.tsx
index cbcce8e..c23d027 100644
--- a/src/ui/settings/components/AddonPage.tsx
+++ b/src/ui/settings/components/AddonPage.tsx
@@ -18,20 +18,24 @@ export default function AddonPage<T>({ items, safeModeMessage, safeModeExtras, c
 
     return (
         <ErrorBoundary>
-            <RN.ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 10 }}>
-                {settings.safeMode?.enabled && <RN.View style={{ marginBottom: 10 }}>
-                    <HelpMessage messageType={0}>{safeModeMessage}</HelpMessage>
-                    {safeModeExtras}
-                </RN.View>}
-                <Search
-                    style={{ marginBottom: 10 }}
-                    onChangeText={(v: string) => setSearch(v.toLowerCase())}
-                    placeholder="Search"
-                />
-                {/* TODO: When I am more awake, implement better searching than just by ID */}
-                {/* TODO: Also when I am more awake, make the search bar not scroll with the cards */}
-                {Object.values(items).filter(i => i.id?.toLowerCase().includes(search)).map((i, id) => <CardComponent item={i} index={id} />)}
-            </RN.ScrollView>
+            {/* TODO: Implement better searching than just by ID */}
+            <RN.FlatList
+                ListHeaderComponent={<>
+                    {settings.safeMode?.enabled && <RN.View style={{ marginBottom: 10 }}>
+                        <HelpMessage messageType={0}>{safeModeMessage}</HelpMessage>
+                        {safeModeExtras}
+                    </RN.View>}
+                    <Search
+                        style={{ marginBottom: 10 }}
+                        onChangeText={(v: string) => setSearch(v.toLowerCase())}
+                        placeholder="Search"
+                    />
+                </>}
+                style={{ paddingHorizontal: 10, paddingTop: 10 }}
+                contentContainerStyle={{ paddingBottom: 20 }}
+                data={Object.values(items).filter(i => i.id?.toLowerCase().includes(search))}
+                renderItem={({ item, index }) => <CardComponent item={item} index={index} />}
+            />
         </ErrorBoundary>
     )
 }
\ No newline at end of file