fix: set bottom inset for floating buttons

credit to e9877234be
This commit is contained in:
pylixonly 2024-11-09 17:43:14 +08:00
parent 5e3f9b7236
commit 6f52993838
3 changed files with 5 additions and 2 deletions

View file

@ -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}
/>}

View file

@ -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");

View file

@ -133,6 +133,7 @@ interface FABProps {
icon: ImageSourcePropType | ReactNode;
style?: Style;
onPress: () => void;
positionBottom?: number;
}
export type FloatingActionButton = React.FC<FABProps>;