From 9e831e108eba753c7d694cc54296621aff5513a7 Mon Sep 17 00:00:00 2001
From: ameer2468 <33054370+ameer2468@users.noreply.github.com>
Date: Sat, 27 Apr 2024 11:01:33 +0300
Subject: [PATCH] improvements to headers

---
 .../{ParamsHeader.tsx => DynamicHeader.tsx}     | 17 ++++++++++-------
 .../src/components/header/SearchHeader.tsx      |  1 -
 apps/mobile/src/navigation/tabs/BrowseStack.tsx | 10 +++++-----
 3 files changed, 15 insertions(+), 13 deletions(-)
 rename apps/mobile/src/components/header/{ParamsHeader.tsx => DynamicHeader.tsx} (83%)

diff --git a/apps/mobile/src/components/header/ParamsHeader.tsx b/apps/mobile/src/components/header/DynamicHeader.tsx
similarity index 83%
rename from apps/mobile/src/components/header/ParamsHeader.tsx
rename to apps/mobile/src/components/header/DynamicHeader.tsx
index 78feda098e29..5973280f3e37 100644
--- a/apps/mobile/src/components/header/ParamsHeader.tsx
+++ b/apps/mobile/src/components/header/DynamicHeader.tsx
@@ -1,5 +1,6 @@
 import { DrawerNavigationHelpers } from '@react-navigation/drawer/lib/typescript/src/types';
 import { RouteProp, useNavigation } from '@react-navigation/native';
+import { NativeStackHeaderProps } from '@react-navigation/native-stack';
 import { ArrowLeft, DotsThreeOutline, MagnifyingGlass } from 'phosphor-react-native';
 import { Platform, Pressable, Text, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -9,13 +10,15 @@ import { Icon } from '../icons/Icon';
 
 
 type Props = {
-	route: RouteProp<any, any>;
-	kind: 'tag' | 'location';
-	explorerMenu?: boolean;
+	headerRoute?: NativeStackHeaderProps; //supporting title from the options object of navigation
+	optionsRoute?: RouteProp<any, any>; //supporting params passed
+	kind: 'tag' | 'location'; //the kind of icon to display
+	explorerMenu?: boolean; //whether to show the explorer menu
 };
 
-export default function ParamsHeader({
-	route,
+export default function DynamicHeader({
+	headerRoute,
+	optionsRoute,
 	kind,
 	explorerMenu = true
 }: Props) {
@@ -40,12 +43,12 @@ export default function ParamsHeader({
 								<ArrowLeft size={23} color={tw.color('ink')} />
 							</Pressable>
 						<View style={tw`flex-row items-center gap-1.5`}>
-						<HeaderIconKind routeParams={route.params} kind={kind} />
+						<HeaderIconKind routeParams={optionsRoute?.params} kind={kind} />
 						<Text
 								numberOfLines={1}
 								style={tw`max-w-[200px] text-xl font-bold text-white`}
 							>
-								{route.params?.name}
+								{headerRoute?.options.title}
 							</Text>
 						</View>
 					</View>
diff --git a/apps/mobile/src/components/header/SearchHeader.tsx b/apps/mobile/src/components/header/SearchHeader.tsx
index ae49ca8dab5f..3eb684181eef 100644
--- a/apps/mobile/src/components/header/SearchHeader.tsx
+++ b/apps/mobile/src/components/header/SearchHeader.tsx
@@ -19,7 +19,6 @@ type Props = {
 	title?: string; // in some cases - we want to override the route title
 };
 
-// Default header with search bar and button to open drawer
 export default function SearchHeader({
 	route,
 	kind,
diff --git a/apps/mobile/src/navigation/tabs/BrowseStack.tsx b/apps/mobile/src/navigation/tabs/BrowseStack.tsx
index 339c330a2f42..86621b823b9f 100644
--- a/apps/mobile/src/navigation/tabs/BrowseStack.tsx
+++ b/apps/mobile/src/navigation/tabs/BrowseStack.tsx
@@ -8,7 +8,7 @@ import LocationsScreen from '~/screens/browse/Locations';
 import TagScreen from '~/screens/browse/Tag';
 import TagsScreen from '~/screens/browse/Tags';
 
-import ParamsHeader from '~/components/header/ParamsHeader';
+import DynamicHeader from '~/components/header/DynamicHeader';
 import SearchHeader from '~/components/header/SearchHeader';
 import { TabScreenProps } from '../TabNavigator';
 
@@ -27,8 +27,8 @@ export default function BrowseStack() {
 			<Stack.Screen
 				name="Location"
 				component={LocationScreen}
-				options={({route}) => ({
-					header: () => <ParamsHeader route={route} kind="location" />
+				options={({route: optionsRoute}) => ({
+					header: (route) => <DynamicHeader optionsRoute={optionsRoute} headerRoute={route} kind="location" />
 				})}
 			/>
 			<Stack.Screen
@@ -48,8 +48,8 @@ export default function BrowseStack() {
 			<Stack.Screen
 				name="Tag"
 				component={TagScreen}
-				options={({route}) => ({
-					header: () => <ParamsHeader route={route} kind="tag" />
+				options={({route: optionsRoute}) => ({
+					header: (route) => <DynamicHeader optionsRoute={optionsRoute} headerRoute={route} kind="tag" />
 				})}
 			/>
 			<Stack.Screen