improvements to headers

spacedriveapp · Apr 27, 2024 · 9e831e1 · 9e831e1
1 parent 6f5f537
commit 9e831e1
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 13 deletions.
diff --git a/...le/src/components/header/ParamsHeader.tsx → ...e/src/components/header/DynamicHeader.tsx b/...le/src/components/header/ParamsHeader.tsx → ...e/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
@@ -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
@@ -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