From b36aa5140e6afcaf97dd0a3bda4afef1d3f08ba3 Mon Sep 17 00:00:00 2001
From: thesn10 <38666407+thesn10@users.noreply.github.com>
Date: Thu, 2 Jul 2026 22:57:34 +0200
Subject: [PATCH] Add responsive tab bar

---
 app/src/app/(tabs)/_layout.tsx | 26 ++++++++++++++++++++++----
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/app/src/app/(tabs)/_layout.tsx b/app/src/app/(tabs)/_layout.tsx
index 6786edd..7996bc3 100644
--- a/app/src/app/(tabs)/_layout.tsx
+++ b/app/src/app/(tabs)/_layout.tsx
@@ -2,6 +2,7 @@ import { Ionicons } from "@expo/vector-icons";
 import { Tabs } from "expo-router";
 import type { ComponentProps, JSX } from "react";
 import type { ColorValue } from "react-native";
+import { useWindowDimensions } from "react-native";
 
 type IoniconName = ComponentProps<typeof Ionicons>["name"];
 
@@ -9,9 +10,19 @@ function TabIcon({ name, color }: { name: IoniconName; color: ColorValue }): JSX
   return <Ionicons name={name} size={24} color={color} />;
 }
 
+const WIDE_BREAKPOINT = 768;
+
 export default function TabsLayout(): JSX.Element {
+  const { width } = useWindowDimensions();
+  const isWide = width >= WIDE_BREAKPOINT;
+
   return (
-    <Tabs screenOptions={{ headerShown: false }}>
+    <Tabs
+      screenOptions={{
+        headerShown: false,
+        tabBarStyle: isWide ? { display: "none" } : undefined,
+      }}
+    >
       <Tabs.Screen
         name="index"
         options={{
@@ -20,10 +31,17 @@ export default function TabsLayout(): JSX.Element {
         }}
       />
       <Tabs.Screen
-        name="explore"
+        name="browse"
         options={{
-          title: "Explore",
-          tabBarIcon: ({ color }) => <TabIcon name="compass-outline" color={color} />,
+          title: "Browse",
+          tabBarIcon: ({ color }) => <TabIcon name="storefront-outline" color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="orders"
+        options={{
+          title: "Orders",
+          tabBarIcon: ({ color }) => <TabIcon name="receipt-outline" color={color} />,
         }}
       />
     </Tabs>