add en/vi language

app/(tabs)/_layout.tsx

@@ -4,14 +4,16 @@ 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 { useI18n } from "@/hooks/use-i18n";
 import { startEvents, stopEvents } from "@/services/device_events";
 import { useEffect, useRef } from "react";
 
 export default function TabLayout() {
   const colorScheme = useColorScheme();
-  const segments = useSegments();
+  const segments = useSegments() as string[];
   const prev = useRef<string | null>(null);
-  const currentSegment = segments[1] ?? segments[segments.length - 1] ?? null; // tuỳ cấu trúc của bạn
+  const currentSegment = segments[1] ?? segments[segments.length - 1] ?? null;
+  const { t, locale } = useI18n();
   useEffect(() => {
     if (prev.current !== currentSegment) {
       // console.log("Tab changed ->", { from: prev.current, to: currentSegment });
@@ -39,7 +41,7 @@ export default function TabLayout() {
       <Tabs.Screen
         name="index"
         options={{
-          title: "Giám sát",
+          title: t("navigation.home"),
           tabBarIcon: ({ color }) => (
             <IconSymbol size={28} name="map.fill" color={color} />
           ),
@@ -49,7 +51,7 @@ export default function TabLayout() {
       <Tabs.Screen
         name="tripInfo"
         options={{
-          title: "Chuyến Đi",
+          title: t("navigation.trip"),
           tabBarIcon: ({ color }) => (
             <IconSymbol size={28} name="ferry.fill" color={color} />
           ),
@@ -58,7 +60,7 @@ export default function TabLayout() {
       <Tabs.Screen
         name="diary"
         options={{
-          title: "Nhật Ký",
+          title: t("navigation.diary"),
           tabBarIcon: ({ color }) => (
             <IconSymbol size={28} name="book.closed.fill" color={color} />
           ),
@@ -67,7 +69,7 @@ export default function TabLayout() {
       <Tabs.Screen
         name="sensor"
         options={{
-          title: "Cảm biến",
+          title: t("navigation.sensor"),
           tabBarIcon: ({ color }) => (
             <IconSymbol
               size={28}
@@ -80,7 +82,7 @@ export default function TabLayout() {
       <Tabs.Screen
         name="setting"
         options={{
-          title: "Cài đặt",
+          title: t("navigation.setting"),
           tabBarIcon: ({ color }) => (
             <IconSymbol size={28} name="gear" color={color} />
           ),