From 6f52993838573cd133f128c1c0b8507524140a00 Mon Sep 17 00:00:00 2001
From: pylixonly <82711525+pylixonly@users.noreply.github.com>
Date: Sat, 9 Nov 2024 17:43:14 +0800
Subject: [PATCH] fix: set bottom inset for floating buttons

credit to e9877234befc837126f4a24b23c837e7ed8f6b5b
---
 src/core/ui/components/AddonPage.tsx | 4 +++-
 src/metro/common/components.ts       | 2 +-
 src/metro/common/types/components.ts | 1 +
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/core/ui/components/AddonPage.tsx b/src/core/ui/components/AddonPage.tsx
index 7122e394..f2c5d4c3 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, Stack, Text, TextInput, useSafeAreaInsets } from "@metro/common/components";
 import { ErrorBoundary, Search } from "@ui/components";
 import fuzzysort from "fuzzysort";
 import { ComponentType, ReactNode, useCallback, useMemo } from "react";
@@ -111,6 +111,7 @@ export default function AddonPage<T extends object>({ CardComponent, ...props }:
 
     const [search, setSearch] = React.useState("");
     const [sortFn, setSortFn] = React.useState<((a: unknown, b: unknown) => number) | null>(() => null);
+    const { bottom: bottomInset } = useSafeAreaInsets();
 
     const results = useMemo(() => {
         let values = props.items;
@@ -198,6 +199,7 @@ export default function AddonPage<T extends object>({ CardComponent, ...props }:
                 renderItem={({ item }: any) => <CardComponent item={item.obj} result={item} />}
             />
             {props.installAction && <FloatingActionButton
+                positionBottom={bottomInset + 8}
                 icon={findAssetId("PlusLargeIcon")}
                 onPress={onInstallPress}
             />}
diff --git a/src/metro/common/components.ts b/src/metro/common/components.ts
index 48c8d3eb..358b46b2 100644
--- a/src/metro/common/components.ts
+++ b/src/metro/common/components.ts
@@ -20,7 +20,7 @@ export const CompatButton = findByPropsLazy("Looks", "Colors", "Sizes");
 export const HelpMessage = findByNameLazy("HelpMessage");
 
 // React Native's included SafeAreaView only adds padding on iOS.
-export const { SafeAreaView, SafeAreaProvider } = lazyDestructure(() => findByProps("useSafeAreaInsets"));
+export const { SafeAreaView, SafeAreaProvider, useSafeAreaInsets } = lazyDestructure(() => findByProps("useSafeAreaInsets"));
 
 // ActionSheet
 export const ActionSheetRow = findProp("ActionSheetRow");
diff --git a/src/metro/common/types/components.ts b/src/metro/common/types/components.ts
index 1a8bbde2..619e8e20 100644
--- a/src/metro/common/types/components.ts
+++ b/src/metro/common/types/components.ts
@@ -133,6 +133,7 @@ interface FABProps {
     icon: ImageSourcePropType | ReactNode;
     style?: Style;
     onPress: () => void;
+    positionBottom?: number;
 }
 
 export type FloatingActionButton = React.FC<FABProps>;