chore: expo 55 upgrade

Upgraded expo from 54 to 55

Signed-off-by: Lance Chant <13349722+lancechant@users.noreply.github.com>

components/PlatformDropdown.tsx

@@ -1,4 +1,11 @@
-import { Button, ContextMenu, Host, Picker } from "@expo/ui/swift-ui";
+import {
+  Button,
+  ContextMenu,
+  Host,
+  Picker,
+  Text as SwiftUIText,
+} from "@expo/ui/swift-ui";
+import { disabled, tag } from "@expo/ui/swift-ui/modifiers";
 import { Ionicons } from "@expo/vector-icons";
 import { BottomSheetScrollView } from "@gorhom/bottom-sheet";
 import React, { useEffect } from "react";
@@ -255,22 +262,31 @@ const PlatformDropdownComponent = ({
               if (radioOptions.length > 0) {
                 if (group.title) {
                   // Use Picker for grouped options
+                  const selectedRadio = radioOptions.find(
+                    (opt) => opt.selected,
+                  );
                   items.push(
                     <Picker
                       key={`picker-${groupIndex}`}
                       label={group.title}
-                      options={radioOptions.map((opt) => opt.label)}
-                      variant='menu'
-                      selectedIndex={radioOptions.findIndex(
-                        (opt) => opt.selected,
-                      )}
-                      onOptionSelected={(event: any) => {
-                        const index = event.nativeEvent.index;
-                        const selectedOption = radioOptions[index];
+                      selection={selectedRadio?.value}
+                      onSelectionChange={(value) => {
+                        const selectedOption = radioOptions.find(
+                          (opt) => opt.value === value,
+                        );
                         selectedOption?.onPress();
                         onOptionSelect?.(selectedOption?.value);
                       }}
-                    />,
+                    >
+                      {radioOptions.map((opt) => (
+                        <SwiftUIText
+                          key={String(opt.value)}
+                          modifiers={[tag(opt.value)]}
+                        >
+                          {opt.label}
+                        </SwiftUIText>
+                      ))}
+                    </Picker>,
                   );
                 } else {
                   // Render radio options as direct buttons
@@ -281,13 +297,15 @@ const PlatformDropdownComponent = ({
                         systemImage={
                           option.selected ? "checkmark.circle.fill" : "circle"
                         }
+                        modifiers={
+                          option.disabled ? [disabled(true)] : undefined
+                        }
                         onPress={() => {
                           option.onPress();
                           onOptionSelect?.(option.value);
                         }}
-                        disabled={option.disabled}
                       >
-                        {option.label}
+                        <Text>{option.label}</Text>
                       </Button>,
                     );
                   });
@@ -302,13 +320,13 @@ const PlatformDropdownComponent = ({
                     systemImage={
                       option.value ? "checkmark.circle.fill" : "circle"
                     }
+                    modifiers={option.disabled ? [disabled(true)] : undefined}
                     onPress={() => {
                       option.onToggle();
                       onOptionSelect?.(option.value);
                     }}
-                    disabled={option.disabled}
                   >
-                    {option.label}
+                    <Text>{option.label}</Text>
                   </Button>,
                 );
               });
@@ -318,12 +336,12 @@ const PlatformDropdownComponent = ({
                 items.push(
                   <Button
                     key={`action-${groupIndex}-${optionIndex}`}
+                    modifiers={option.disabled ? [disabled(true)] : undefined}
                     onPress={() => {
                       option.onPress();
                     }}
-                    disabled={option.disabled}
                   >
-                    {option.label}
+                    <Text>{option.label}</Text>
                   </Button>,
                 );
               });

components/search/DiscoverFilters.tsx

@@ -1,4 +1,11 @@
-import { Button, ContextMenu, Host, Picker } from "@expo/ui/swift-ui";
+import {
+  Button,
+  ContextMenu,
+  Host,
+  Picker,
+  Text as SwiftUIText,
+} from "@expo/ui/swift-ui";
+import { buttonStyle, tag } from "@expo/ui/swift-ui/modifiers";
 import { Platform, View } from "react-native";
 import { FilterButton } from "@/components/filters/FilterButton";
 import { JellyseerrSearchSort } from "@/components/jellyseerr/JellyseerrIndexPage";
@@ -43,38 +50,37 @@ export const DiscoverFilters: React.FC<DiscoverFiltersProps> = ({
         <ContextMenu>
           <ContextMenu.Trigger>
             <Button
-              variant='glass'
-              modifiers={[]}
+              modifiers={[buttonStyle("glass")]}
               systemImage='line.3.horizontal.decrease.circle'
             ></Button>
           </ContextMenu.Trigger>
           <ContextMenu.Items>
             <Picker
               label={t("library.filters.sort_by")}
-              options={sortOptions.map((item) =>
-                t(`home.settings.plugins.jellyseerr.order_by.${item}`),
-              )}
-              variant='menu'
-              selectedIndex={sortOptions.indexOf(
-                jellyseerrOrderBy as unknown as string,
-              )}
-              onOptionSelected={(event: any) => {
-                const index = event.nativeEvent.index;
-                setJellyseerrOrderBy(
-                  sortOptions[index] as unknown as JellyseerrSearchSort,
-                );
+              selection={jellyseerrOrderBy as unknown as string}
+              onSelectionChange={(value) => {
+                setJellyseerrOrderBy(value as unknown as JellyseerrSearchSort);
               }}
-            />
+            >
+              {sortOptions.map((item) => (
+                <SwiftUIText key={item} modifiers={[tag(item)]}>
+                  {t(`home.settings.plugins.jellyseerr.order_by.${item}`)}
+                </SwiftUIText>
+              ))}
+            </Picker>
             <Picker
               label={t("library.filters.sort_order")}
-              options={orderOptions.map((item) => t(`library.filters.${item}`))}
-              variant='menu'
-              selectedIndex={orderOptions.indexOf(jellyseerrSortOrder)}
-              onOptionSelected={(event: any) => {
-                const index = event.nativeEvent.index;
-                setJellyseerrSortOrder(orderOptions[index]);
+              selection={jellyseerrSortOrder}
+              onSelectionChange={(value) => {
+                setJellyseerrSortOrder(value as "asc" | "desc");
               }}
-            />
+            >
+              {orderOptions.map((item) => (
+                <SwiftUIText key={item} modifiers={[tag(item)]}>
+                  {t(`library.filters.${item}`)}
+                </SwiftUIText>
+              ))}
+            </Picker>
           </ContextMenu.Items>
         </ContextMenu>
       </Host>

components/search/SearchTabButtons.tsx

@@ -1,5 +1,7 @@
 import { Button, Host } from "@expo/ui/swift-ui";
+import { buttonStyle } from "@expo/ui/swift-ui/modifiers";
 import { Platform, TouchableOpacity, View } from "react-native";
+import { Text } from "@/components/common/Text";
 import { Tag } from "@/components/GenreTags";
 
 type SearchType = "Library" | "Discover";
@@ -28,10 +30,14 @@ export const SearchTabButtons: React.FC<SearchTabButtonsProps> = ({
           }}
         >
           <Button
-            variant={searchType === "Library" ? "glassProminent" : "glass"}
+            modifiers={[
+              buttonStyle(
+                searchType === "Library" ? "glassProminent" : "glass",
+              ),
+            ]}
             onPress={() => setSearchType("Library")}
           >
-            {t("search.library")}
+            <Text>{t("search.library")}</Text>
           </Button>
         </Host>
         <Host
@@ -44,10 +50,14 @@ export const SearchTabButtons: React.FC<SearchTabButtonsProps> = ({
           }}
         >
           <Button
-            variant={searchType === "Discover" ? "glassProminent" : "glass"}
+            modifiers={[
+              buttonStyle(
+                searchType === "Discover" ? "glassProminent" : "glass",
+              ),
+            ]}
             onPress={() => setSearchType("Discover")}
           >
-            {t("search.discover")}
+            <Text>{t("search.discover")}</Text>
           </Button>
         </Host>
       </>