enh

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