add blurry tab

EvanBacon · Sep 10, 2024 · d472754 · d472754
1 parent 407ff97
commit d472754
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 7 deletions.
diff --git a/app/_layout.tsx b/app/_layout.tsx
@@ -1,6 +1,8 @@
 import { Slot, Tabs } from "expo-router";
 import { House, ShoppingCart, Package, LineChart } from "lucide-react-native";
 import * as Haptics from "expo-haptics";
+import { BlurView } from "expo-blur";
+import { StyleSheet } from "react-native";
 
 export default function RootLayout() {
   // TODO: Add tab bar
@@ -10,6 +12,16 @@ export default function RootLayout() {
       screenOptions={{
         headerShown: false,
         tabBarActiveTintColor: "rgb(15, 23, 42)",
+        tabBarStyle: {
+          position: "absolute",
+        },
+        tabBarBackground: () => (
+          <BlurView
+            tint="light"
+            intensity={100}
+            style={StyleSheet.absoluteFill}
+          />
+        ),
       }}
       screenListeners={{
         tabPress: () => {

diff --git a/components/shad/settings.tsx b/components/shad/settings.tsx
@@ -2,17 +2,17 @@
 
 import ShadLayout from "./shad-layout";
 import StoryWrapper from "../mdx/mdx-route";
-import { useEffect } from "react";
+// import { useEffect } from "react";
 
 export default function SettingsRoute({
   navigate,
 }: {
   navigate: typeof import("expo-router").router["navigate"];
   dom?: import("expo/dom").DOMProps;
 }) {
-  useEffect(() => {
-    import("eruda").then((eruda) => eruda.default.init());
-  }, []);
+  // useEffect(() => {
+  //   import("eruda").then((eruda) => eruda.default.init());
+  // }, []);
 
   return (
     <ShadLayout navigate={navigate} select>

diff --git a/components/shad/shad-layout.tsx b/components/shad/shad-layout.tsx
@@ -22,7 +22,7 @@ export function ShadLayoutFull({
       {!select && <StyleNoSelect />}
       <DOMRouterProvider value={{ navigate }}>
         <TooltipProvider>
-          <div className="flex min-h-screen w-full flex-col bg-[#F2F2F7]">
+          <div className="flex min-h-screen w-full flex-col bg-[#F2F2F7] pb-10">
             <SideNavigationBar />
             {/* {!IS_DOM && <SideNavigationBar />} */}
             <div className="flex flex-col sm:gap-4 sm:py-4 sm:pl-14">

diff --git a/package.json b/package.json
@@ -65,6 +65,7 @@
     "expo": "file:./vendor/expo-1.0.0-pack1725829371222.tgz",
     "expo-application": "file:./vendor/expo-application-1.0.0-pack1725829719336.tgz",
     "expo-asset": "11.0.0-canary-20240904-69100c1",
+    "expo-blur": "file:./vendor/expo-blur-1.0.0-pack1725969518862.tgz",
     "expo-constants": "17.0.0-canary-20240904-69100c1",
     "expo-file-system": "file:./vendor/expo-file-system-1.0.0-pack1725829716481.tgz",
     "expo-font": "13.0.0-canary-20240904-69100c1",
@@ -125,6 +126,7 @@
     "expo-application": "file:./vendor/expo-application-1.0.0-pack1725829719336.tgz",
     "babel-preset-expo": "file:./vendor/babel-preset-expo-1.0.0-pack1725829720804.tgz",
     "@expo/prebuild-config": "file:./vendor/expo-prebuild-config-1.0.0-pack1725829722496.tgz",
-    "@expo/cli": "file:./vendor/expo-cli-1.0.0-pack1725830029576.tgz"
+    "@expo/cli": "file:./vendor/expo-cli-1.0.0-pack1725830029576.tgz",
+    "expo-blur": "file:./vendor/expo-blur-1.0.0-pack1725969518862.tgz"
   }
-}
+}
diff --git a/vendor/expo-blur-1.0.0-pack1725969518862.tgz b/vendor/expo-blur-1.0.0-pack1725969518862.tgz
diff --git a/yarn.lock b/yarn.lock
@@ -4785,6 +4785,10 @@ expo-atlas@0.3.21:
     serve-static "^1.15.0"
     stream-json "^1.8.0"
 
+"expo-blur@file:./vendor/expo-blur-1.0.0-pack1725969518862.tgz":
+  version "1.0.0-pack1725969518862"
+  resolved "file:./vendor/expo-blur-1.0.0-pack1725969518862.tgz#12d26dedc0c81c834bc1c630441f54ac3218b857"
+
 expo-constants@17.0.0-canary-20240904-69100c1:
   version "17.0.0-canary-20240904-69100c1"
   resolved "https://registry.yarnpkg.com/expo-constants/-/expo-constants-17.0.0-canary-20240904-69100c1.tgz#f7fbf1e92c49b8f7f47cdf0204d81dab45dbcfa2"