52 tsk10403 display building info

app/(tabs)/_layout.tsx

@@ -1,46 +1,104 @@
 import { Tabs } from "expo-router";
 import React from "react";
-
+import { View, Image, StyleSheet } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { HapticTab } from "@/components/haptic-tab";
 import { IconSymbol } from "@/components/ui/icon-symbol";
 import { Colors } from "@/constants/theme";
 import { useColorScheme } from "@/hooks/use-color-scheme";
 import Feather from "@expo/vector-icons/Feather";
+import lightIcon from "@/assets/logo/logo-light.png";
+import darkIcon from "@/assets/logo/logo-dark.png";
+
+interface TabHeaderProps {
+  readonly backgroundColor: string;
+  readonly logoSource: number;
+}
+
+function TabHeader({ backgroundColor, logoSource }: TabHeaderProps) {
+  const insets = useSafeAreaInsets();
+
+  return (
+    <View style={[styles.header, { backgroundColor, paddingTop: insets.top }]}>
+      <Image source={logoSource} style={styles.logo} resizeMode="contain" />
+    </View>
+  );
+}
+
+function MapTabIcon({ color }: { readonly color: string }) {
+  return <Feather name="map" size={24} color={color} />;
+}
+
+function HomeTabIcon({ color }: { readonly color: string }) {
+  return <IconSymbol size={28} name="house.fill" color={color} />;
+}
+
+function CalendarTabIcon({ color }: { readonly color: string }) {
+  return <Feather name="calendar" size={24} color={color} />;
+}
 
 export default function TabLayout() {
-  const colorScheme = useColorScheme();
+  const colorScheme = useColorScheme() ?? "light";
+  const logos = {
+    light: lightIcon,
+    dark: darkIcon,
+  };
+
+  const logoSource = logos[colorScheme];
 
   return (
     <Tabs
       screenOptions={{
-        tabBarActiveTintColor: Colors[colorScheme ?? "light"].tint,
-        headerShown: false,
+        header: () => (
+          <TabHeader
+            backgroundColor={Colors[colorScheme].background}
+            logoSource={logoSource}
+          />
+        ),
         tabBarButton: HapticTab,
+        tabBarActiveTintColor: Colors[colorScheme].tint,
+        tabBarInactiveTintColor: Colors[colorScheme].text,
+        tabBarStyle: {
+          backgroundColor: Colors[colorScheme].background,
+          borderTopWidth: 0,
+          elevation: 5,
+        },
       }}
     >
       <Tabs.Screen
         name="map-tab"
         options={{
           title: "Map",
-          tabBarIcon: ({ color }) => <Feather name="map" size={24} color={color} />,
+          tabBarIcon: MapTabIcon,
         }}
       />
       <Tabs.Screen
         name="index"
         options={{
           title: "Home",
-          tabBarIcon: ({ color }) => (
-            <IconSymbol size={28} name="house.fill" color={color} />
-          ),
+          tabBarIcon: HomeTabIcon,
         }}
       />
       <Tabs.Screen
         name="calendar"
         options={{
           title: "Calendar",
-          tabBarIcon: ({ color }) => <Feather name="calendar" size={24} color={color} />,
+          tabBarIcon: CalendarTabIcon,
         }}
       />
     </Tabs>
   );
 }
+
+const styles = StyleSheet.create({
+  header: {
+    paddingBottom: 15,
+    justifyContent: "center",
+    alignItems: "center",
+    borderBottomWidth: StyleSheet.hairlineWidth
+  },
+  logo: {
+    width: 120,
+    height: 40,
+  }
+});

app/(tabs)/calendar.tsx

@@ -8,6 +8,7 @@ import { ThemedText } from '@/components/themed-text';
 import { ThemedView } from '@/components/themed-view';
 import { IconSymbol } from '@/components/ui/icon-symbol';
 import { Fonts } from '@/constants/theme';
+import React from 'react';
 
 export default function TabTwoScreen() {
   return (

app/(tabs)/index.tsx

@@ -6,6 +6,7 @@ import ParallaxScrollView from '@/components/parallax-scroll-view';
 import { ThemedText } from '@/components/themed-text';
 import { ThemedView } from '@/components/themed-view';
 import { Link } from 'expo-router';
+import React from 'react';
 
 export default function HomeScreen() {
   return (

app/(tabs)/map-tab.tsx

@@ -1,4 +1,5 @@
 import MapViewer from "@/components/map/map-viewer";
+import React from "react";
 
 export default function MapTab() {
   return <MapViewer />;

app/_layout.tsx

@@ -4,6 +4,7 @@ import { StatusBar } from 'expo-status-bar';
 import 'react-native-reanimated';
 
 import { useColorScheme } from '@/hooks/use-color-scheme';
+import React from 'react';
 
 export const unstable_settings = {
   anchor: '(tabs)',

app/modal.tsx

@@ -3,6 +3,7 @@ import { StyleSheet } from 'react-native';
 
 import { ThemedText } from '@/components/themed-text';
 import { ThemedView } from '@/components/themed-view';
+import React from 'react';
 
 export default function ModalScreen() {
   return (