From a713e7a8c1d23909cdc9a3c76281219a1f404afc Mon Sep 17 00:00:00 2001
From: shafi54 <108669266+shafi-aviz@users.noreply.github.com>
Date: Fri, 6 Feb 2026 02:16:01 +0530
Subject: [PATCH] enh

---
 .../(tabs)/stores/store-detail/[id].tsx       |  8 +++-
 .../(tabs)/stores/store-detail/_layout.tsx    | 41 ++++++++++++++-----
 apps/user-ui/src/store/storeHeaderStore.ts    | 11 +++++
 3 files changed, 48 insertions(+), 12 deletions(-)
 create mode 100644 apps/user-ui/src/store/storeHeaderStore.ts

diff --git a/apps/user-ui/app/(drawer)/(tabs)/stores/store-detail/[id].tsx b/apps/user-ui/app/(drawer)/(tabs)/stores/store-detail/[id].tsx
index 931fa96..3804139 100644
--- a/apps/user-ui/app/(drawer)/(tabs)/stores/store-detail/[id].tsx
+++ b/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;
@@ -79,7 +80,12 @@ export default function StoreDetail() {
         return selectedTag?.productIds?.includes(product.id) ?? false;
       }) || []
     : storeData?.products || [];
-  
+
+  // Set the store header title
+  const setStoreHeaderTitle = useStoreHeaderStore((state) => state.setTitle);
+  if (storeData?.store?.name) {
+    setStoreHeaderTitle(storeData.store.name);
+  }
 
   useManualRefresh(() => {
     refetch();
diff --git a/apps/user-ui/app/(drawer)/(tabs)/stores/store-detail/_layout.tsx b/apps/user-ui/app/(drawer)/(tabs)/stores/store-detail/_layout.tsx
index 86a1d6c..768b0de 100644
--- a/apps/user-ui/app/(drawer)/(tabs)/stores/store-detail/_layout.tsx
+++ b/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>
+    </>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/user-ui/src/store/storeHeaderStore.ts b/apps/user-ui/src/store/storeHeaderStore.ts
new file mode 100644
index 0000000..70a4a46
--- /dev/null
+++ b/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 }),
+}));