fix: header and tab background

app/(auth)/(tabs)/_layout.tsx

@@ -6,6 +6,8 @@ import { Colors } from "@/constants/Colors";
 import { Platform, TouchableOpacity, View } from "react-native";
 import { Feather } from "@expo/vector-icons";
 import { Chromecast } from "@/components/Chromecast";
+import { BlurView } from "expo-blur";
+import { StyleSheet } from "react-native";
 
 export default function TabLayout() {
   useEffect(() => {
@@ -21,6 +23,27 @@ export default function TabLayout() {
       screenOptions={{
         tabBarActiveTintColor: Colors.tabIconSelected,
         headerShown: false,
+        tabBarStyle: {
+          position: "absolute",
+          borderTopLeftRadius: 0,
+          borderTopRightRadius: 0,
+          borderTopWidth: 0,
+          paddingTop: 8,
+        },
+        tabBarBackground: () =>
+          Platform.OS === "ios" ? (
+            <BlurView
+              experimentalBlurMethod="dimezisBlurView"
+              intensity={95}
+              style={{
+                ...StyleSheet.absoluteFillObject,
+                overflow: "hidden",
+                borderTopLeftRadius: 0,
+                borderTopRightRadius: 0,
+                backgroundColor: "black",
+              }}
+            />
+          ) : undefined,
       }}
     >
       <Tabs.Screen redirect name="index" />

app/(auth)/(tabs)/home/_layout.tsx

@@ -14,7 +14,9 @@ export default function IndexLayout() {
           headerShown: true,
           headerLargeTitle: true,
           headerTitle: "Home",
-          headerStyle: { backgroundColor: "black" },
+          headerBlurEffect: "prominent",
+          headerTransparent: Platform.OS === "ios" ? true : false,
+          headerShadowVisible: false,
           headerLeft: () => (
             <TouchableOpacity
               style={{

app/(auth)/(tabs)/search/_layout.tsx

@@ -1,4 +1,5 @@
 import { Stack } from "expo-router";
+import { Platform } from "react-native";
 
 export default function SearchLayout() {
   return (
@@ -9,7 +10,9 @@ export default function SearchLayout() {
           headerShown: true,
           headerLargeTitle: true,
           headerTitle: "Search",
-          headerStyle: { backgroundColor: "black" },
+          headerBlurEffect: "prominent",
+          headerTransparent: Platform.OS === "ios" ? true : false,
+          headerShadowVisible: false,
         }}
       />
     </Stack>