color and sizing

This commit is contained in:
Violet Caulfield
2025-01-15 10:46:38 -06:00
parent 90e5003d46
commit fcb66dd519
2 changed files with 11 additions and 4 deletions

View File

@@ -6,11 +6,13 @@ import Icon from "./icon";
export default function IconCard({
name,
onPress,
width,
caption,
subCaption,
}: {
name: string,
onPress: () => void,
width?: number | undefined,
caption?: string | undefined,
subCaption?: string | undefined
}) : React.JSX.Element {
@@ -26,8 +28,8 @@ export default function IconCard({
animation="bouncy"
hoverStyle={{ scale: 0.925 }}
pressStyle={{ scale: 0.875 }}
width={150}
height={150}
width={width ? width : 150}
height={width ? width : 150}
onPress={onPress}
>
<Card.Header>

View File

@@ -1,5 +1,5 @@
import { FlatList } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { SafeAreaView, useSafeAreaFrame } from "react-native-safe-area-context";
import Categories from "./categories";
import IconCard from "@/components/Global/helpers/icon-card";
import { StackParamList } from "@/components/types";
@@ -13,15 +13,20 @@ export default function LibraryScreen({
route: RouteProp<StackParamList, "Library">,
navigation: NativeStackNavigationProp<StackParamList>
}): React.JSX.Element {
const { width } = useSafeAreaFrame();
return (
<SafeAreaView>
<SafeAreaView edges={["top", "right", "left"]}>
<FlatList
contentInsetAdjustmentBehavior="automatic"
data={Categories}
numColumns={2}
renderItem={({ index, item }) => {
return (
<IconCard
name={item.iconName}
width={width / 2.1}
onPress={() => {
navigation.navigate(item.name)
}}