enh

apps/user-ui/app/(drawer)/(tabs)/flash-delivery/product-detail/_layout.tsx

@@ -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>
+    </>
+  );
+}

apps/user-ui/app/(drawer)/(tabs)/home/product-detail/_layout.tsx

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

apps/user-ui/app/(drawer)/(tabs)/order-again/product-detail/_layout.tsx

@@ -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>
+    </>
+  );
+}

apps/user-ui/app/(drawer)/(tabs)/stores/store-detail/product-detail/_layout.tsx

@@ -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 (
-    <Stack
+    <>
-      screenOptions={{
+      <DynamicHeaderTitle />
-        headerShown: true,
+      <Stack
-        title: "Product Details",
+        screenOptions={{
-      }}
+          headerShown: true,
-    />
+        }}
+      >
+        <Stack.Screen name="[id]" options={{ title: title || 'Product Details' }} />
+      </Stack>
+    </>
   );
 }

apps/user-ui/components/ProductDetail.tsx

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