-
Notifications
You must be signed in to change notification settings - Fork 0
finish basic home page #8
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,57 @@ | ||
| import { Text, View } from 'react-native'; | ||
| import { useBottomTabBarHeight } from "@react-navigation/bottom-tabs"; | ||
| import { useRouter } from "expo-router"; | ||
| import { Pressable, ScrollView, Text, View } from "react-native"; | ||
| import { useSafeAreaInsets } from "react-native-safe-area-context"; | ||
|
|
||
| export default function HomeScreen() { | ||
| const router = useRouter(); | ||
| const tabBarHeight = useBottomTabBarHeight(); | ||
| const insets = useSafeAreaInsets(); | ||
|
|
||
| const H_PADDING = 24; | ||
| const CTA_GAP = 12; | ||
|
|
||
| return ( | ||
| <View className="flex-1 items-center justify-center bg-milk-coffee"> | ||
| <Text className="text-xl font-semibold text-dark-coffee">Home Screen</Text> | ||
| <View className="flex-1 bg-cream"> | ||
| {/* Header Card */} | ||
| <View | ||
| className="bg-dark-coffee w-full pb-6 rounded-b-3xl shadow-sm" | ||
| style={{ paddingTop: insets.top + 16, paddingHorizontal: H_PADDING }} | ||
| > | ||
| <Text className="text-white text-3xl font-bold tracking-wider"> | ||
| Kopi Shop | ||
| </Text> | ||
| </View> | ||
|
|
||
| {/* Content */} | ||
| <ScrollView | ||
| className="flex-1" | ||
| contentContainerStyle={{ | ||
| paddingTop: 24, | ||
| paddingHorizontal: H_PADDING, | ||
| paddingBottom: tabBarHeight + 72 + CTA_GAP, | ||
| }} | ||
| showsVerticalScrollIndicator={false} | ||
| > | ||
| {/* Placeholder for future content */} | ||
| </ScrollView> | ||
|
|
||
| {/* Bottom CTA */} | ||
| <View | ||
| style={{ | ||
| paddingHorizontal: H_PADDING, | ||
| paddingBottom: tabBarHeight + CTA_GAP, | ||
| }} | ||
| > | ||
|
Comment on lines
+40
to
+45
|
||
| <Pressable | ||
| onPress={() => router.push("/kopi")} | ||
| className="bg-dark-coffee py-4 px-5 rounded-2xl flex-row items-center justify-center shadow-lg active:opacity-90" | ||
| > | ||
| <Text className="text-white text-lg font-bold tracking-wide"> | ||
| Start Kopi Maker → | ||
| </Text> | ||
| </Pressable> | ||
| </View> | ||
| </View> | ||
| ); | ||
| } | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The
paddingBottomcalculation may not account for the bottom CTA button height correctly. The button appears to be absolutely positioned, but this calculation uses72as a magic number which seems intended to represent the button height plus spacing. However, the actual button height is defined bypy-4(padding vertical) plus text height, which may not equal 72 pixels. Consider extracting the button height as a constant (e.g.,const CTA_HEIGHT = 60;) and using it consistently in both the ScrollView'spaddingBottomand for layout calculations to ensure the content doesn't get hidden behind the button.