chore(companion): update dependencies to latest expo canary version (calcom#25948)

* chore: update dependencies and update event types screen header

* refactor: simplify EventTypeListItem component by removing unused imports and code

- Removed unnecessary imports such as Tooltip and Svg.
- Cleaned up the component by eliminating commented-out code and unused props.
- Streamlined the button rendering in the context menu for better readability.

* feat: enhance EventTypes header with blur effect and clean up code

- Added blurEffect property to Stack.Header for improved visual aesthetics.
- Removed commented-out code to streamline the EventTypes component.
- Updated search bar properties for better user experience.

* refactor: update TabLayout and EventTypes for improved platform handling

- Simplified TabLayout by removing the liquid glass effect check and adding a WebTabs fallback for web support.
- Updated EventTypes header to conditionally apply blur effect based on liquid glass availability, enhancing visual consistency across platforms.

* feat: enhance TabLayout with MaterialCommunityIcons for improved UI

- Updated TabLayout to use MaterialCommunityIcons for tab icons, enhancing visual consistency.
- Added softwareKeyboardLayoutMode to app.json for better keyboard handling on mobile devices.

* feat: update TabLayout to prevent transparent background on iOS 18

- Added disableTransparentOnScrollEdge prop to NativeTabs to ensure a solid background on iOS 18 and older versions.

Author: betomoedano

companion/app.json

@@ -27,7 +27,8 @@
         "backgroundColor": "#ffffff"
       },
       "edgeToEdgeEnabled": true,
-      "package": "com.calcom.companion"
+      "package": "com.calcom.companion",
+      "softwareKeyboardLayoutMode": "pan"
     },
     "web": {
       "favicon": "./assets/favicon.png",

companion/app/(tabs)/(event-types)/index.tsx

@@ -35,6 +35,7 @@ import {
 } from "../../../hooks";
 import { getEventDuration } from "../../../utils/getEventDuration";
 import { normalizeMarkdown } from "../../../utils/normalizeMarkdown";
+import { isLiquidGlassAvailable } from "expo-glass-effect";
 
 export default function EventTypes() {
   const router = useRouter();
@@ -469,41 +470,23 @@ export default function EventTypes() {
 
   return (
     <>
-      <Stack.Screen
-        options={{
-          headerShown: Platform.OS !== "web",
-          title: "Event Types",
-          headerLargeTitleEnabled: true,
-          headerStyle: {
-            backgroundColor: "transparent",
-          },
-          headerSearchBarOptions: {
-            placeholder: "Search event types",
-            barTintColor: "#fff",
-            obscureBackground: false,
-            onChangeText: (e) => {
-              handleSearch(e.nativeEvent.text);
-            },
-          },
-          unstable_headerRightItems: () => [
-            {
-              type: "button",
-              label: "New",
-              labelStyle: {
-                // style if needed
-              },
-              variant: "prominent",
-              tintColor: "#000",
-              // icon: {
-              //   name: "plus",
-              //   type: "sfSymbol",
-              // },
-              onPress: handleCreateNew,
-            },
-          ],
-        }}
-      />
-
+      <Stack.Header
+        style={{ backgroundColor: "transparent", shadowColor: "transparent" }}
+        blurEffect={isLiquidGlassAvailable() ? undefined : "light"} // Only looks cool on iOS 18 and below
+      >
+        <Stack.Header.Title large>Event Types</Stack.Header.Title>
+        <Stack.Header.Right>
+          <Stack.Header.Button onPress={handleCreateNew} tintColor="#000" variant="prominent">
+            New
+          </Stack.Header.Button>
+        </Stack.Header.Right>
+        <Stack.Header.SearchBar
+          placeholder="Search event types"
+          onChangeText={(e) => handleSearch(e.nativeEvent.text)}
+          obscureBackground={false}
+          barTintColor="#fff"
+        />
+      </Stack.Header>
       <Activity mode={Platform.OS === "web" ? "visible" : "hidden"}>
         <Header />
         <View className="flex-row items-center gap-3 border-b border-gray-300 bg-gray-100 px-4 py-2">

companion/app/(tabs)/_layout.tsx

@@ -1,41 +1,54 @@
-import { Ionicons } from "@expo/vector-icons";
-import { isLiquidGlassAvailable } from "expo-glass-effect";
-import { Tabs } from "expo-router";
+import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
+import { Tabs, VectorIcon } from "expo-router";
 import { NativeTabs } from "expo-router/unstable-native-tabs";
 import { Platform } from "react-native";
 
 export default function TabLayout() {
-  // Check if liquid glass effect is available
-  const supportsLiquidGlass = isLiquidGlassAvailable();
+  if (Platform.OS === "web") {
+    return <WebTabs />;
+  }
 
-  // Use NativeTabs for iOS 15+ (liquid glass support), fallback to standard Tabs
-  if (supportsLiquidGlass) {
-    return (
-      <NativeTabs>
-        <NativeTabs.Trigger name="(event-types)">
-          <NativeTabs.Trigger.Icon sf="link" />
-          <NativeTabs.Trigger.Label>Event Types</NativeTabs.Trigger.Label>
-        </NativeTabs.Trigger>
+  return (
+    <NativeTabs
+      disableTransparentOnScrollEdge={true} // Used to prevent transparent background on iOS 18 and older
+    >
+      <NativeTabs.Trigger name="(event-types)">
+        <NativeTabs.Trigger.Icon
+          sf="link"
+          src={<VectorIcon family={MaterialCommunityIcons} name="link" />}
+        />
+        <NativeTabs.Trigger.Label>Event Types</NativeTabs.Trigger.Label>
+      </NativeTabs.Trigger>
 
-        <NativeTabs.Trigger name="bookings">
-          <NativeTabs.Trigger.Icon sf="calendar" />
-          <NativeTabs.Trigger.Label>Bookings</NativeTabs.Trigger.Label>
-        </NativeTabs.Trigger>
+      <NativeTabs.Trigger name="bookings">
+        <NativeTabs.Trigger.Icon
+          sf="calendar"
+          src={<VectorIcon family={MaterialCommunityIcons} name="calendar" />}
+        />
+        <NativeTabs.Trigger.Label>Bookings</NativeTabs.Trigger.Label>
+      </NativeTabs.Trigger>
 
-        <NativeTabs.Trigger name="availability">
-          <NativeTabs.Trigger.Icon sf="clock" />
-          <NativeTabs.Trigger.Label>Availability</NativeTabs.Trigger.Label>
-        </NativeTabs.Trigger>
+      <NativeTabs.Trigger name="availability">
+        <NativeTabs.Trigger.Icon
+          sf="clock"
+          src={<VectorIcon family={MaterialCommunityIcons} name="clock" />}
+        />
+        <NativeTabs.Trigger.Label>Availability</NativeTabs.Trigger.Label>
+      </NativeTabs.Trigger>
 
-        <NativeTabs.Trigger name="more">
-          <NativeTabs.Trigger.Icon sf="ellipsis" />
-          <NativeTabs.Trigger.Label>More</NativeTabs.Trigger.Label>
-        </NativeTabs.Trigger>
-      </NativeTabs>
-    );
-  }
+      <NativeTabs.Trigger name="more">
+        <NativeTabs.Trigger.Icon
+          sf="ellipsis"
+          src={<VectorIcon family={MaterialCommunityIcons} name="dots-horizontal" />}
+        />
+        <NativeTabs.Trigger.Label>More</NativeTabs.Trigger.Label>
+      </NativeTabs.Trigger>
+    </NativeTabs>
+  );
+}
 
-  // Fallback to standard Expo Router Tabs for older iOS and Android
+// TODO: Remove this once native tabs are supported on web
+function WebTabs() {
   return (
     <Tabs
       screenOptions={{