Skip to content

Commit

Permalink
feat(expo): address screen
Browse files Browse the repository at this point in the history
  • Loading branch information
@mrevanzak
mrevanzak committed Nov 12, 2023
1 parent 9415093 commit 6459db1
Show file tree
Hide file tree
Showing 11 changed files with 400 additions and 163 deletions.
6 changes: 4 additions & 2 deletions apps/expo/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
"@expo/metro-config": "^0.10.7",
"@expo/vector-icons": "^13.0.0",
"@gorhom/bottom-sheet": "^4",
"@hookform/resolvers": "^3.3.0",
"@shopify/flash-list": "1.4.3",
"@tanstack/react-query": "^5.0.5",
"@trpc/client": "next",
Expand All @@ -35,14 +36,15 @@
"nativewind": "^2.0.11",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-hook-form": "^7.47.0",
"react-native": "0.72.6",
"react-native-gesture-handler": "~2.12.1",
"react-native-parallax-scroll-view": "^0.21.3",
"react-native-reanimated": "^3.3.0",
"react-native-safe-area-context": "4.6.3",
"react-native-screens": "~3.22.1",
"react-native-ui-lib": "^7.9.1",
"superjson": "1.13.1",
"zod": "^3.21.4",
"zustand": "^4.4.6"
},
"devDependencies": {
Expand Down Expand Up @@ -70,4 +72,4 @@
]
},
"prettier": "@vivat/prettier-config"
}
}
206 changes: 94 additions & 112 deletions apps/expo/src/app/(app)/[productId].tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from "react";
import { ActivityIndicator } from "react-native";
import ParallaxScrollView from "react-native-parallax-scroll-view";
import { RefreshControl, ScrollView } from "react-native-gesture-handler";
import {
AnimatedImage,
Avatar,
Expand All @@ -10,131 +10,113 @@ import {
Text,
View,
} from "react-native-ui-lib";
import { usePathname } from "expo-router";
import { Link, usePathname } from "expo-router";
import { api } from "@/utils/api";
import { colors } from "@/utils/constant";
import rupiahFormatter from "@/utils/rupiahFormatter";
import { MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons";

export default function ProductDetailScreen() {
const pathname = usePathname();
const { data } = api.product.showProduct.useQuery({
const { data, isLoading, refetch } = api.product.showProduct.useQuery({
id: pathname.slice(1),
});

return (
<View bg-white br50 flex className="rounded-b-none">
<ParallaxScrollView
backgroundColor={colors.primary}
contentBackgroundColor={colors.primary}
parallaxHeaderHeight={300}
// contentContainerStyle={{ flex: 1, heigth: 20 }}
fadeOutForeground
// stickyHeaderHeight={80}
// renderStickyHeader={() => (
// <View row spread>
// <View
// bg-primary
// br60
// paddingL-s4
// centerV
// className="-ml-4 w-2/3 rounded-l-none"
// >
// <Text white text65>
// {data?.name}
// </Text>
// <Text text70 secondary>
// {data?.category}
// </Text>
// </View>
// <View padding-s4>
// <Text primary text60>
// {rupiahFormatter(data?.price)}
// </Text>
// <Text text70 className="text-right">
// Stok: {data?.stock}
// </Text>
// </View>
// </View>
// )}
renderBackground={() => (
<AnimatedImage
source={{ uri: data?.image }}
height={280}
style={{ borderRadius: BorderRadiuses.br60 }}
containerStyle={{
paddingHorizontal: Spacings.s4,
paddingBottom: Spacings.s7,
}}
loader={<ActivityIndicator color={colors.secondary} size="large" />}
/>
)}
>
<View bg-white br50 padding-s4 className="space-y-5 rounded-b-none">
<View row spread>
<View
bg-primary
br60
paddingL-s4
centerV
className="-ml-4 w-2/3 rounded-l-none"
>
<Text white text65>
{data?.name}
</Text>
<Text text70 secondary>
{data?.category}
</Text>
</View>
<View padding-s4>
<Text primary text60>
{rupiahFormatter(data?.price)}
</Text>
<Text text70 className="text-right">
Stok: {data?.stock}
</Text>
</View>
<ScrollView
contentContainerStyle={{ flex: 1 }}
refreshControl={
<RefreshControl refreshing={isLoading} onRefresh={() => refetch()} />
}
>
<AnimatedImage
source={{ uri: data?.image }}
height={280}
style={{ borderRadius: BorderRadiuses.br60 }}
containerStyle={{
paddingHorizontal: Spacings.s4,
paddingBottom: Spacings.s7,
backgroundColor: colors.primary,
}}
loader={<ActivityIndicator color={colors.secondary} size="large" />}
/>
<View bg-white br50 flex padding-s4 className="space-y-5 rounded-b-none">
<View row spread>
<View
bg-primary
br60
paddingL-s4
centerV
className="-ml-4 w-2/3 rounded-l-none"
>
<Text white text65>
{data?.name}
</Text>
<Text text70 secondary>
{data?.category.name}
</Text>
</View>
<View bg-black height={1} />
<View row spread>
<View row centerV>
<Avatar
source={{ uri: data?.user.imageUrl }}
animate
useAutoColors
size={42}
/>
<View padding-s2>
<Text text70>{data?.user.name}</Text>
<Text text90>{data?.user.major}</Text>
</View>
</View>
<View row centerV className="space-x-2">
<Button
bg-secondary
round
iconSource={() => (
<MaterialIcons name="chat" size={20} color={colors.primary} />
)}
/>
<Button
bg-secondary
round
iconSource={() => (
<MaterialCommunityIcons
name="offer"
size={20}
color={colors.primary}
/>
)}
/>
<View padding-s4>
<Text primary text60>
{rupiahFormatter(data?.price)}
</Text>
<Text text70 className="text-right">
Stok: {data?.stock}
</Text>
</View>
</View>
<View bg-black height={1} />
<View row spread>
<View row centerV>
<Avatar
source={{ uri: data?.user.imageUrl }}
animate
useAutoColors
size={42}
/>
<View padding-s2>
<Text text70>{data?.user.name}</Text>
<Text text90>{data?.user.major}</Text>
</View>
</View>
<Text text70 flex>
{data?.description}
</Text>
<View row centerV className="space-x-2">
<Button
bg-secondary
round
iconSource={() => (
<MaterialIcons name="chat" size={20} color={colors.primary} />
)}
/>
<Button
bg-secondary
round
iconSource={() => (
<MaterialCommunityIcons
name="offer"
size={20}
color={colors.primary}
/>
)}
/>
</View>
</View>
<Text text70>{data?.description}</Text>
</View>
<View bg-white>
<View
bg-primary
row
br50
padding-s4
spread
className="space-x-4 rounded-b-none"
>
{/* <Button bg-white primary label="Keranjang" br40 flex /> */}
<Link href="/(app)/checkout" asChild>
<Button bg-secondary primary label="Beli" br40 flex />
</Link>
</View>
</ParallaxScrollView>
</View>
</View>
</ScrollView>
);
}
55 changes: 52 additions & 3 deletions apps/expo/src/app/(app)/_layout.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,72 @@
import React from "react";
import { Stack } from "expo-router";
import { TouchableOpacity } from "react-native-gesture-handler";
import { Link, Stack } from "expo-router";
import Header from "@/components/Header";
import { colors } from "@/utils/constant";
import { Ionicons } from "@expo/vector-icons";

export default function AuthLayout() {
return (
<Stack
screenOptions={{
header: (props) => <Header {...props} />,
contentStyle: {
flex: 1,
backgroundColor: colors.primary,
},
}}
>
<Stack.Screen
name="(tabs)"
options={{
header: (props) => <Header {...props} />,
contentStyle: {
backgroundColor: colors.primary,
},
}}
/>
<Stack.Screen
name="search"
options={{
header: (props) => <Header {...props} />,
contentStyle: {
backgroundColor: colors.primary,
},
}}
/>
<Stack.Screen
name="[productId]"
options={{
header: (props) => <Header {...props} hideSearch />,
contentStyle: {
backgroundColor: colors.primary,
},
}}
/>
<Stack.Screen
name="checkout"
options={{
headerTitle: "Pengiriman",
headerTitleAlign: "center",
}}
/>
<Stack.Screen
name="address/index"
options={{
headerTitle: "Alamat",
headerTitleAlign: "center",
headerRight: () => (
<Link href="/address/create" asChild>
<TouchableOpacity padding-s4>
<Ionicons name="add" size={24} color={colors.primary} />
</TouchableOpacity>
</Link>
),
}}
/>
<Stack.Screen
name="address/create"
options={{
headerTitle: "Buat Alamat",
headerTitleAlign: "center",
}}
/>
</Stack>
Expand Down
Loading

0 comments on commit 6459db1

Please sign in to comment.