thêm tab "Xem chi tiết chuyến đi", "Xem chi tiết thành viên chuyến đi", tái sử dụng lại components modal tripForm

app/(tabs)/_layout.tsx

@@ -2,15 +2,14 @@ import { Tabs, useSegments } from "expo-router";
 
 import { HapticTab } from "@/components/haptic-tab";
 import { IconSymbol } from "@/components/ui/icon-symbol";
-import { Colors } from "@/constants/theme";
 import { queryProfile } from "@/controller/AuthController";
 import { useI18n } from "@/hooks/use-i18n";
-import { useColorScheme } from "@/hooks/use-theme-context";
+import { useThemeContext } from "@/hooks/use-theme-context";
 import { addUserStorage } from "@/utils/storage";
 import { useEffect, useRef } from "react";
 
 export default function TabLayout() {
-  const colorScheme = useColorScheme();
+  const { colors, colorScheme } = useThemeContext();
   const segments = useSegments() as string[];
   const prev = useRef<string | null>(null);
   const currentSegment = segments[1] ?? segments[segments.length - 1] ?? null;
@@ -51,9 +50,18 @@ export default function TabLayout() {
   return (
     <Tabs
       screenOptions={{
-        tabBarActiveTintColor: Colors[colorScheme ?? "light"].tint,
+        tabBarActiveTintColor: colors.tint,
         headerShown: false,
         tabBarButton: HapticTab,
+        // Set tab bar styles based on theme - prevents white flash
+        tabBarStyle: {
+          backgroundColor: colors.background,
+          borderTopColor: colors.separator,
+        },
+        // Set screen content background
+        sceneStyle: {
+          backgroundColor: colors.background,
+        },
       }}
     >
       <Tabs.Screen