feat(client): connect header into navigation to present route name

brunocroh · Feb 9, 2025 · e64da7d · e64da7d
1 parent 4ebf826
commit e64da7d
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 9 deletions.
diff --git a/apps/client/app/(home)/_components/header.tsx b/apps/client/app/(home)/_components/header.tsx
@@ -1,23 +1,30 @@
 import React from 'react'
-import { Text, View } from 'react-native'
+import { View } from 'react-native'
 import { Bell } from 'lucide-react-native'
-import { Avatar } from '@/components/ui/avatar'
 import { Button } from '@/components/ui/button'
+import { Text } from '@/components/ui/text'
 import { useAuth } from '@clerk/clerk-expo'
+import { useRoute } from '@react-navigation/native'
+
+const ROUTE_TITLES = {
+  index: 'Home',
+  history: 'History',
+  schedule: 'Schedule',
+  settings: 'Settings',
+}
 
 export const Header = () => {
+  const route = useRoute()
+  const title = ROUTE_TITLES[route.name as keyof typeof ROUTE_TITLES]
   const { signOut } = useAuth()
-  const userName = 'Bruno Rodrigues'
 
   return (
     <View className="px-safe pt-safe w-full flex-row justify-between bg-background">
       <View className="w-full flex-row">
-        <View className="flex-1 flex-row gap-2">
-          <Avatar uri="https://avatars.githubusercontent.com/u/13812512?v=4" />
-          <View>
-            <Text className="text-slate-300">{userName}</Text>
-            <Text className="text-slate-500">Welcome back</Text>
-          </View>
+        <View className="flex-1 flex-row items-center gap-2">
+          <Text variant="title2" className="text-slate-300">
+            {title}
+          </Text>
         </View>
         <View>
           <Button variant="ghost" icon={Bell} onPress={() => signOut()} />

diff --git a/apps/client/app/(home)/_layout.tsx b/apps/client/app/(home)/_layout.tsx
@@ -32,27 +32,31 @@ export default function Layout() {
     >
       <Tabs.Screen
         name="index"
+        initialParams={{ title: 'Home' }}
         options={{
           title: '',
           tabBarIcon: ({ color }) => <Home size={24} color={color} />,
         }}
       />
       <Tabs.Screen
         name="schedule"
+        initialParams={{ title: 'Schedule' }}
         options={{
           title: '',
           tabBarIcon: ({ color }) => <Calendar1 size={24} color={color} />,
         }}
       />
       <Tabs.Screen
         name="history"
+        initialParams={{ title: 'History' }}
         options={{
           title: '',
           tabBarIcon: ({ color }) => <History size={24} color={color} />,
         }}
       />
       <Tabs.Screen
         name="settings"
+        initialParams={{ title: 'Settings' }}
         options={{
           title: '',
           tabBarIcon: ({ color }) => (