From 92a260b6f5312fa5d82c13552bf67ea3fc5d42c5 Mon Sep 17 00:00:00 2001
From: Fredrik Burmester <fredrik.burmester@gmail.com>
Date: Thu, 15 Aug 2024 16:46:36 +0200
Subject: [PATCH] fix: header and tab background

---
 app/(auth)/(tabs)/_layout.tsx        | 23 +++++++++++++++++++++++
 app/(auth)/(tabs)/home/_layout.tsx   |  4 +++-
 app/(auth)/(tabs)/search/_layout.tsx |  5 ++++-
 3 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/app/(auth)/(tabs)/_layout.tsx b/app/(auth)/(tabs)/_layout.tsx
index 155158d9..85846a7b 100644
--- a/app/(auth)/(tabs)/_layout.tsx
+++ b/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" />
diff --git a/app/(auth)/(tabs)/home/_layout.tsx b/app/(auth)/(tabs)/home/_layout.tsx
index dbe6fe21..94a68602 100644
--- a/app/(auth)/(tabs)/home/_layout.tsx
+++ b/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={{
diff --git a/app/(auth)/(tabs)/search/_layout.tsx b/app/(auth)/(tabs)/search/_layout.tsx
index 7aee1250..8ba7b396 100644
--- a/app/(auth)/(tabs)/search/_layout.tsx
+++ b/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>