From 724fc1e135850d9439abcba03df1cd288ca3593b Mon Sep 17 00:00:00 2001
From: PalmDevs <git@palmdevs.me>
Date: Wed, 23 Oct 2024 06:05:20 +0700
Subject: [PATCH] fix: wrap `addonpage` in `safeareaview`

---
 src/core/ui/components/AddonPage.tsx | 44 +++++++++++++++-------------
 1 file changed, 23 insertions(+), 21 deletions(-)

diff --git a/src/core/ui/components/AddonPage.tsx b/src/core/ui/components/AddonPage.tsx
index 7122e39..fc59350 100644
--- a/src/core/ui/components/AddonPage.tsx
+++ b/src/core/ui/components/AddonPage.tsx
@@ -7,7 +7,7 @@ import isValidHttpUrl from "@lib/utils/isValidHttpUrl";
 import { lazyDestructure } from "@lib/utils/lazy";
 import { findByProps } from "@metro";
 import { clipboard } from "@metro/common";
-import { Button, FlashList, FloatingActionButton, HelpMessage, IconButton, Stack, Text, TextInput } from "@metro/common/components";
+import { Button, FlashList, FloatingActionButton, HelpMessage, IconButton, SafeAreaView, Stack, Text, TextInput } from "@metro/common/components";
 import { ErrorBoundary, Search } from "@ui/components";
 import fuzzysort from "fuzzysort";
 import { ComponentType, ReactNode, useCallback, useMemo } from "react";
@@ -181,26 +181,28 @@ export default function AddonPage<T extends object>({ CardComponent, ...props }:
 
     return (
         <ErrorBoundary>
-            <FlashList
-                data={results}
-                extraData={search}
-                estimatedItemSize={136}
-                ListHeaderComponent={headerElement}
-                ListEmptyComponent={() => <View style={{ gap: 12, padding: 12, alignItems: "center" }}>
-                    <Image source={findAssetId("devices_not_found")} />
-                    <Text variant="text-lg/semibold" color="text-normal">
-                        Hmmm... could not find that!
-                    </Text>
-                </View>}
-                contentContainerStyle={{ padding: 8, paddingHorizontal: 12 }}
-                ItemSeparatorComponent={() => <View style={{ height: 8 }} />}
-                ListFooterComponent={props.ListFooterComponent}
-                renderItem={({ item }: any) => <CardComponent item={item.obj} result={item} />}
-            />
-            {props.installAction && <FloatingActionButton
-                icon={findAssetId("PlusLargeIcon")}
-                onPress={onInstallPress}
-            />}
+            <SafeAreaView>
+                <FlashList
+                    data={results}
+                    extraData={search}
+                    estimatedItemSize={136}
+                    ListHeaderComponent={headerElement}
+                    ListEmptyComponent={() => <View style={{ gap: 12, padding: 12, alignItems: "center" }}>
+                        <Image source={findAssetId("devices_not_found")} />
+                        <Text variant="text-lg/semibold" color="text-normal">
+                            Hmmm... could not find that!
+                        </Text>
+                    </View>}
+                    contentContainerStyle={{ padding: 8, paddingHorizontal: 12 }}
+                    ItemSeparatorComponent={() => <View style={{ height: 8 }} />}
+                    ListFooterComponent={props.ListFooterComponent}
+                    renderItem={({ item }: any) => <CardComponent item={item.obj} result={item} />}
+                />
+                {props.installAction && <FloatingActionButton
+                    icon={findAssetId("PlusLargeIcon")}
+                    onPress={onInstallPress}
+                />}
+            </SafeAreaView>
         </ErrorBoundary>
     );
 }