Add responsive tab bar

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",
+          title: "Browse",
-          tabBarIcon: ({ color }) => <TabIcon name="compass-outline" color={color} />,
+          tabBarIcon: ({ color }) => <TabIcon name="storefront-outline" color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="orders"
+        options={{
+          title: "Orders",
+          tabBarIcon: ({ color }) => <TabIcon name="receipt-outline" color={color} />,
         }}
       />
     </Tabs>