modified: files to ios26 ui/ux

app/(tabs)/_layout.tsx

@@ -1,40 +1,45 @@
 import Feather from "@expo/vector-icons/Feather";
-import { Tabs } from "expo-router";
-import React from "react";
+import * as Haptics from "expo-haptics";
+import { useNavigation } from "expo-router";
+import {
+  Icon,
+  Label,
+  NativeTabs,
+  VectorIcon,
+} from "expo-router/unstable-native-tabs";
+import React, { useEffect, useRef } from "react";
 
 export default function TabLayout() {
+  const navigation = useNavigation();
+  const isInitial = useRef(true);
+
+  useEffect(() => {
+    const unsubscribe = navigation.addListener("state", () => {
+      if (isInitial.current) {
+        isInitial.current = false;
+        return;
+      }
+      Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+    });
+    return unsubscribe;
+  }, [navigation]);
+
   return (
-    <Tabs
-      screenOptions={{
-        headerShown: false,
-        tabBarActiveTintColor: "#dc2626",
-        tabBarStyle: {
-          backgroundColor: "hsl(221, 39%, 12%)",
-          borderTopColor: "#dc2626",
-          borderTopWidth: 1.5,
-          paddingTop: 10,
-        },
-        tabBarInactiveTintColor: "hsl(0, 0%, 100%)",
-      }}
-    >
-      <Tabs.Screen
-        name="index"
-        options={{
-          title: "Home",
-          tabBarIcon: ({ color, size }) => (
-            <Feather name="home" size={size} color={color} />
-          ),
-        }}
-      />
-      <Tabs.Screen
-        name="explore"
-        options={{
-          title: "Durchsuchen",
-          tabBarIcon: ({ color, size }) => (
-            <Feather name="search" size={size} color={color} />
-          ),
-        }}
-      />
-    </Tabs>
+    <NativeTabs>
+      <NativeTabs.Trigger name="home">
+        <Label>Home</Label>
+        <Icon
+          sf={{ default: "house", selected: "house.fill" }}
+          androidSrc={<VectorIcon family={Feather} name="home" />}
+        />
+      </NativeTabs.Trigger>
+      <NativeTabs.Trigger name="explore">
+        <Label>Durchsuchen</Label>
+        <Icon
+          sf="magnifyingglass"
+          androidSrc={<VectorIcon family={Feather} name="search" />}
+        />
+      </NativeTabs.Trigger>
+    </NativeTabs>
   );
 }