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/[id].tsx

@@ -15,6 +15,7 @@ import FontAwesome5 from "@expo/vector-icons/FontAwesome5";
 import { trpc } from "@/src/trpc-client";
 import ProductCard from "@/components/ProductCard";
 import FloatingCartBar from "@/components/floating-cart-bar";
+import { useStoreHeaderStore } from "@/src/store/storeHeaderStore";
 
 const { width: screenWidth } = Dimensions.get("window");
 const itemWidth = (screenWidth - 48) / 2;
@@ -80,6 +81,11 @@ export default function StoreDetail() {
       }) || []
     : storeData?.products || [];
 
+  // Set the store header title
+  const setStoreHeaderTitle = useStoreHeaderStore((state) => state.setTitle);
+  if (storeData?.store?.name) {
+    setStoreHeaderTitle(storeData.store.name);
+  }
 
   useManualRefresh(() => {
     refetch();

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

@@ -1,15 +1,34 @@
-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 StoreDetailLayout() {
+  const title = useStoreHeaderStore((state) => state.title);
+
   return (
-    <Stack
-      screenOptions={{
-        headerShown: true,
-        title: "Store Details",
-      }}
-    >
-      <Stack.Screen name="[id]" />
-      <Stack.Screen options={{headerShown: false}} name="product-detail" />
-    </Stack>
+    <>
+      <DynamicHeaderTitle />
+      <Stack
+        screenOptions={{
+          headerShown: true,
+        }}
+      >
+        <Stack.Screen name="[id]" options={{ title: title || 'Store Details' }} />
+        <Stack.Screen options={{headerShown: false}} name="product-detail" />
+      </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={{
-        headerShown: true,
-        title: "Product Details",
-      }}
-    />
+    <>
+      <DynamicHeaderTitle />
+      <Stack
+        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 /> */}

apps/user-ui/src/store/storeHeaderStore.ts

@@ -0,0 +1,11 @@
+import { create } from 'zustand';
+
+interface StoreHeaderState {
+  title: string;
+  setTitle: (title: string) => void;
+}
+
+export const useStoreHeaderStore = create<StoreHeaderState>((set) => ({
+  title: '',
+  setTitle: (title) => set({ title }),
+}));