enh
This commit is contained in:
parent
a713e7a8c1
commit
09e1067b69
5 changed files with 125 additions and 13 deletions
|
|
@ -0,0 +1,33 @@
|
|||
import { Stack, useNavigation } from 'expo-router';
|
||||
import { useEffect } from 'react';
|
||||
import { useStoreHeaderStore } from '@/src/store/storeHeaderStore';
|
||||
|
||||
function DynamicHeaderTitle() {
|
||||
const navigation = useNavigation();
|
||||
const title = useStoreHeaderStore((state) => state.title);
|
||||
|
||||
useEffect(() => {
|
||||
if (title) {
|
||||
navigation.setOptions({ title });
|
||||
}
|
||||
}, [title, navigation]);
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
export default function ProductDetailLayout() {
|
||||
const title = useStoreHeaderStore((state) => state.title);
|
||||
|
||||
return (
|
||||
<>
|
||||
<DynamicHeaderTitle />
|
||||
<Stack
|
||||
screenOptions={{
|
||||
headerShown: true,
|
||||
}}
|
||||
>
|
||||
<Stack.Screen name="[id]" options={{ title: title || 'Product Details' }} />
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,17 +1,36 @@
|
|||
import FloatingCartBar from "@/components/floating-cart-bar";
|
||||
import { tw } from "common-ui";
|
||||
import { Stack } from "expo-router";
|
||||
import { Stack, useNavigation } from 'expo-router';
|
||||
import { View } from "react-native";
|
||||
import { useEffect } from 'react';
|
||||
import { useStoreHeaderStore } from '@/src/store/storeHeaderStore';
|
||||
|
||||
function DynamicHeaderTitle() {
|
||||
const navigation = useNavigation();
|
||||
const title = useStoreHeaderStore((state) => state.title);
|
||||
|
||||
useEffect(() => {
|
||||
if (title) {
|
||||
navigation.setOptions({ title });
|
||||
}
|
||||
}, [title, navigation]);
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
export default function ProductDetailLayout() {
|
||||
const title = useStoreHeaderStore((state) => state.title);
|
||||
|
||||
return (
|
||||
<>
|
||||
<DynamicHeaderTitle />
|
||||
<Stack
|
||||
screenOptions={{
|
||||
headerShown: true,
|
||||
title: "Product Details",
|
||||
}}
|
||||
/>
|
||||
>
|
||||
<Stack.Screen name="[id]" options={{ title: title || 'Product Details' }} />
|
||||
</Stack>
|
||||
<View style={tw`absolute bottom-2 left-4 right-4`}>
|
||||
<FloatingCartBar />
|
||||
</View>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,33 @@
|
|||
import { Stack, useNavigation } from 'expo-router';
|
||||
import { useEffect } from 'react';
|
||||
import { useStoreHeaderStore } from '@/src/store/storeHeaderStore';
|
||||
|
||||
function DynamicHeaderTitle() {
|
||||
const navigation = useNavigation();
|
||||
const title = useStoreHeaderStore((state) => state.title);
|
||||
|
||||
useEffect(() => {
|
||||
if (title) {
|
||||
navigation.setOptions({ title });
|
||||
}
|
||||
}, [title, navigation]);
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
export default function ProductDetailLayout() {
|
||||
const title = useStoreHeaderStore((state) => state.title);
|
||||
|
||||
return (
|
||||
<>
|
||||
<DynamicHeaderTitle />
|
||||
<Stack
|
||||
screenOptions={{
|
||||
headerShown: true,
|
||||
}}
|
||||
>
|
||||
<Stack.Screen name="[id]" options={{ title: title || 'Product Details' }} />
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,12 +1,33 @@
|
|||
import { Stack } from 'expo-router';
|
||||
import { Stack, useNavigation } from 'expo-router';
|
||||
import { useEffect } from 'react';
|
||||
import { useStoreHeaderStore } from '@/src/store/storeHeaderStore';
|
||||
|
||||
function DynamicHeaderTitle() {
|
||||
const navigation = useNavigation();
|
||||
const title = useStoreHeaderStore((state) => state.title);
|
||||
|
||||
useEffect(() => {
|
||||
if (title) {
|
||||
navigation.setOptions({ title });
|
||||
}
|
||||
}, [title, navigation]);
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
export default function ProductDetailLayout() {
|
||||
const title = useStoreHeaderStore((state) => state.title);
|
||||
|
||||
return (
|
||||
<>
|
||||
<DynamicHeaderTitle />
|
||||
<Stack
|
||||
screenOptions={{
|
||||
headerShown: true,
|
||||
title: "Product Details",
|
||||
}}
|
||||
/>
|
||||
>
|
||||
<Stack.Screen name="[id]" options={{ title: title || 'Product Details' }} />
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -13,6 +13,7 @@ import { useAddToCart, useGetCart, useUpdateCartItem, useRemoveFromCart } from '
|
|||
import { useProductSlotIdentifier } from '@/hooks/useProductSlotIdentifier';
|
||||
import { useFlashNavigationStore } from '@/components/stores/flashNavigationStore';
|
||||
import FloatingCartBar from './floating-cart-bar';
|
||||
import { useStoreHeaderStore } from '@/src/store/storeHeaderStore';
|
||||
|
||||
const { width: screenWidth } = Dimensions.get("window");
|
||||
const carouselWidth = screenWidth;
|
||||
|
|
@ -182,6 +183,12 @@ const ProductDetail: React.FC<ProductDetailProps> = ({ productId, isFlashDeliver
|
|||
}
|
||||
}, [productDetail?.id]);
|
||||
|
||||
// Set the store header title with product name
|
||||
const setStoreHeaderTitle = useStoreHeaderStore((state) => state.setTitle);
|
||||
if (productDetail?.name) {
|
||||
setStoreHeaderTitle(productDetail.name);
|
||||
}
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<View style={tw`flex-1 justify-center items-center bg-gray-50`}>
|
||||
|
|
@ -200,7 +207,6 @@ const ProductDetail: React.FC<ProductDetailProps> = ({ productId, isFlashDeliver
|
|||
);
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<View style={tw`flex-1 bg-gray-50`}>
|
||||
{/* <CustomHeader /> */}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue