wip: remove zeego + expo ui

components/AudioTrackSelector.tsx

@@ -1,11 +1,9 @@
 import type { MediaSourceInfo } from "@jellyfin/sdk/lib/generated-client/models";
-import { useMemo } from "react";
-import { Platform, TouchableOpacity, View } from "react-native";
-
-const DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;
-
+import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { Platform, TouchableOpacity, View } from "react-native";
 import { Text } from "./common/Text";
+import { type OptionGroup, PlatformOptionsMenu } from "./PlatformOptionsMenu";
 
 interface Props extends React.ComponentProps<typeof View> {
   source?: MediaSourceInfo;
@@ -20,6 +18,8 @@ export const AudioTrackSelector: React.FC<Props> = ({
   ...props
 }) => {
   const isTv = Platform.isTV;
+  const [open, setOpen] = useState(false);
+  const { t } = useTranslation();
 
   const audioStreams = useMemo(
     () => source?.MediaStreams?.filter((x) => x.Type === "Audio"),
@@ -31,7 +31,49 @@ export const AudioTrackSelector: React.FC<Props> = ({
     [audioStreams, selected],
   );
 
-  const { t } = useTranslation();
+  const optionGroups: OptionGroup[] = useMemo(
+    () => [
+      {
+        id: "audio-streams",
+        title: "Audio streams",
+        options:
+          audioStreams?.map((audio, idx) => ({
+            id: `${audio.Index || idx}`,
+            type: "radio" as const,
+            groupId: "audio-streams",
+            label: audio.DisplayTitle || `Audio Stream ${idx + 1}`,
+            selected: audio.Index === selected,
+          })) || [],
+      },
+    ],
+    [audioStreams, selected],
+  );
+
+  const handleOptionSelect = (optionId: string) => {
+    const selectedStream = audioStreams?.find(
+      (audio, idx) => `${audio.Index || idx}` === optionId,
+    );
+    if (
+      selectedStream &&
+      selectedStream.Index !== null &&
+      selectedStream.Index !== undefined
+    ) {
+      onChange(selectedStream.Index);
+    }
+    setOpen(false);
+  };
+
+  const trigger = (
+    <View className='flex flex-col' {...props}>
+      <Text className='opacity-50 mb-1 text-xs'>{t("item_card.audio")}</Text>
+      <TouchableOpacity
+        className='bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between'
+        onPress={() => setOpen(true)}
+      >
+        <Text numberOfLines={1}>{selectedAudioSteam?.DisplayTitle}</Text>
+      </TouchableOpacity>
+    </View>
+  );
 
   if (isTv) return null;
 
@@ -42,44 +84,21 @@ export const AudioTrackSelector: React.FC<Props> = ({
         minWidth: 50,
       }}
     >
-      <DropdownMenu.Root>
-        <DropdownMenu.Trigger>
-          <View className='flex flex-col' {...props}>
-            <Text className='opacity-50 mb-1 text-xs'>
-              {t("item_card.audio")}
-            </Text>
-            <TouchableOpacity className='bg-neutral-900  h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between'>
-              <Text className='' numberOfLines={1}>
-                {selectedAudioSteam?.DisplayTitle}
-              </Text>
-            </TouchableOpacity>
-          </View>
-        </DropdownMenu.Trigger>
-        <DropdownMenu.Content
-          loop={true}
-          side='bottom'
-          align='start'
-          alignOffset={0}
-          avoidCollisions={true}
-          collisionPadding={8}
-          sideOffset={8}
-        >
-          <DropdownMenu.Label>Audio streams</DropdownMenu.Label>
-          {audioStreams?.map((audio, idx: number) => (
-            <DropdownMenu.Item
-              key={idx.toString()}
-              onSelect={() => {
-                if (audio.Index !== null && audio.Index !== undefined)
-                  onChange(audio.Index);
-              }}
-            >
-              <DropdownMenu.ItemTitle>
-                {audio.DisplayTitle}
-              </DropdownMenu.ItemTitle>
-            </DropdownMenu.Item>
-          ))}
-        </DropdownMenu.Content>
-      </DropdownMenu.Root>
+      <PlatformOptionsMenu
+        groups={optionGroups}
+        trigger={trigger}
+        title={t("item_card.audio")}
+        open={open}
+        onOpenChange={setOpen}
+        onOptionSelect={handleOptionSelect}
+        expoUIConfig={{
+          hostStyle: { flex: 1 },
+        }}
+        bottomSheetConfig={{
+          enableDynamicSizing: true,
+          enablePanDownToClose: true,
+        }}
+      />
     </View>
   );
 };

components/BitrateSelector.tsx

@@ -1,10 +1,8 @@
-import { Platform, TouchableOpacity, View } from "react-native";
-
-const DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;
-
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { Platform, TouchableOpacity, View } from "react-native";
 import { Text } from "./common/Text";
+import { type OptionGroup, PlatformOptionsMenu } from "./PlatformOptionsMenu";
 
 export type Bitrate = {
   key: string;
@@ -61,6 +59,8 @@ export const BitrateSelector: React.FC<Props> = ({
   ...props
 }) => {
   const isTv = Platform.isTV;
+  const [open, setOpen] = useState(false);
+  const { t } = useTranslation();
 
   const sorted = useMemo(() => {
     if (inverted)
@@ -76,7 +76,44 @@ export const BitrateSelector: React.FC<Props> = ({
     );
   }, [inverted]);
 
-  const { t } = useTranslation();
+  const optionGroups: OptionGroup[] = useMemo(
+    () => [
+      {
+        id: "bitrates",
+        title: "Bitrates",
+        options: sorted.map((bitrate) => ({
+          id: bitrate.key,
+          type: "radio" as const,
+          groupId: "bitrates",
+          label: bitrate.key,
+          selected: bitrate.value === selected?.value,
+        })),
+      },
+    ],
+    [sorted, selected],
+  );
+
+  const handleOptionSelect = (optionId: string) => {
+    const selectedBitrate = sorted.find((b) => b.key === optionId);
+    if (selectedBitrate) {
+      onChange(selectedBitrate);
+    }
+    setOpen(false);
+  };
+
+  const trigger = (
+    <View className='flex flex-col' {...props}>
+      <Text className='opacity-50 mb-1 text-xs'>{t("item_card.quality")}</Text>
+      <TouchableOpacity
+        className='bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between'
+        onPress={() => setOpen(true)}
+      >
+        <Text numberOfLines={1}>
+          {BITRATES.find((b) => b.value === selected?.value)?.key}
+        </Text>
+      </TouchableOpacity>
+    </View>
+  );
 
   if (isTv) return null;
 
@@ -88,41 +125,21 @@ export const BitrateSelector: React.FC<Props> = ({
         maxWidth: 200,
       }}
     >
-      <DropdownMenu.Root>
-        <DropdownMenu.Trigger>
-          <View className='flex flex-col' {...props}>
-            <Text className='opacity-50 mb-1 text-xs'>
-              {t("item_card.quality")}
-            </Text>
-            <TouchableOpacity className='bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between'>
-              <Text style={{}} className='' numberOfLines={1}>
-                {BITRATES.find((b) => b.value === selected?.value)?.key}
-              </Text>
-            </TouchableOpacity>
-          </View>
-        </DropdownMenu.Trigger>
-        <DropdownMenu.Content
-          loop={false}
-          side='bottom'
-          align='center'
-          alignOffset={0}
-          avoidCollisions={true}
-          collisionPadding={0}
-          sideOffset={0}
-        >
-          <DropdownMenu.Label>Bitrates</DropdownMenu.Label>
-          {sorted.map((b) => (
-            <DropdownMenu.Item
-              key={b.key}
-              onSelect={() => {
-                onChange(b);
-              }}
-            >
-              <DropdownMenu.ItemTitle>{b.key}</DropdownMenu.ItemTitle>
-            </DropdownMenu.Item>
-          ))}
-        </DropdownMenu.Content>
-      </DropdownMenu.Root>
+      <PlatformOptionsMenu
+        groups={optionGroups}
+        trigger={trigger}
+        title={t("item_card.quality")}
+        open={open}
+        onOpenChange={setOpen}
+        onOptionSelect={handleOptionSelect}
+        expoUIConfig={{
+          hostStyle: { flex: 1 },
+        }}
+        bottomSheetConfig={{
+          enableDynamicSizing: true,
+          enablePanDownToClose: true,
+        }}
+      />
     </View>
   );
 };

components/MediaSourceSelector.tsx

@@ -2,13 +2,11 @@ import type {
   BaseItemDto,
   MediaSourceInfo,
 } from "@jellyfin/sdk/lib/generated-client/models";
-import { useCallback, useMemo } from "react";
-import { Platform, TouchableOpacity, View } from "react-native";
-
-const DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;
-
+import { useCallback, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { Platform, TouchableOpacity, View } from "react-native";
 import { Text } from "./common/Text";
+import { type OptionGroup, PlatformOptionsMenu } from "./PlatformOptionsMenu";
 
 interface Props extends React.ComponentProps<typeof View> {
   item: BaseItemDto;
@@ -23,7 +21,7 @@ export const MediaSourceSelector: React.FC<Props> = ({
   ...props
 }) => {
   const isTv = Platform.isTV;
-
+  const [open, setOpen] = useState(false);
   const { t } = useTranslation();
 
   const getDisplayName = useCallback((source: MediaSourceInfo) => {
@@ -46,6 +44,46 @@ export const MediaSourceSelector: React.FC<Props> = ({
     return getDisplayName(selected);
   }, [selected, getDisplayName]);
 
+  const optionGroups: OptionGroup[] = useMemo(
+    () => [
+      {
+        id: "media-sources",
+        title: "Media sources",
+        options:
+          item.MediaSources?.map((source, idx) => ({
+            id: `${source.Id || idx}`,
+            type: "radio" as const,
+            groupId: "media-sources",
+            label: getDisplayName(source),
+            selected: source.Id === selected?.Id,
+          })) || [],
+      },
+    ],
+    [item.MediaSources, selected, getDisplayName],
+  );
+
+  const handleOptionSelect = (optionId: string) => {
+    const selectedSource = item.MediaSources?.find(
+      (source, idx) => `${source.Id || idx}` === optionId,
+    );
+    if (selectedSource) {
+      onChange(selectedSource);
+    }
+    setOpen(false);
+  };
+
+  const trigger = (
+    <View className='flex flex-col' {...props}>
+      <Text className='opacity-50 mb-1 text-xs'>{t("item_card.video")}</Text>
+      <TouchableOpacity
+        className='bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center'
+        onPress={() => setOpen(true)}
+      >
+        <Text numberOfLines={1}>{selectedName}</Text>
+      </TouchableOpacity>
+    </View>
+  );
+
   if (isTv) return null;
 
   return (
@@ -55,41 +93,21 @@ export const MediaSourceSelector: React.FC<Props> = ({
         minWidth: 50,
       }}
     >
-      <DropdownMenu.Root>
-        <DropdownMenu.Trigger>
-          <View className='flex flex-col' {...props}>
-            <Text className='opacity-50 mb-1 text-xs'>
-              {t("item_card.video")}
-            </Text>
-            <TouchableOpacity className='bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center'>
-              <Text numberOfLines={1}>{selectedName}</Text>
-            </TouchableOpacity>
-          </View>
-        </DropdownMenu.Trigger>
-        <DropdownMenu.Content
-          loop={true}
-          side='bottom'
-          align='start'
-          alignOffset={0}
-          avoidCollisions={true}
-          collisionPadding={8}
-          sideOffset={8}
-        >
-          <DropdownMenu.Label>Media sources</DropdownMenu.Label>
-          {item.MediaSources?.map((source, idx: number) => (
-            <DropdownMenu.Item
-              key={idx.toString()}
-              onSelect={() => {
-                onChange(source);
-              }}
-            >
-              <DropdownMenu.ItemTitle>
-                {getDisplayName(source)}
-              </DropdownMenu.ItemTitle>
-            </DropdownMenu.Item>
-          ))}
-        </DropdownMenu.Content>
-      </DropdownMenu.Root>
+      <PlatformOptionsMenu
+        groups={optionGroups}
+        trigger={trigger}
+        title={t("item_card.video")}
+        open={open}
+        onOpenChange={setOpen}
+        onOptionSelect={handleOptionSelect}
+        expoUIConfig={{
+          hostStyle: { flex: 1 },
+        }}
+        bottomSheetConfig={{
+          enableDynamicSizing: true,
+          enablePanDownToClose: true,
+        }}
+      />
     </View>
   );
 };

components/PlatformOptionsMenu.tsx

@@ -0,0 +1,477 @@
+import { Ionicons } from "@expo/vector-icons";
+import {
+  BottomSheetBackdrop,
+  type BottomSheetBackdropProps,
+  BottomSheetModal,
+  BottomSheetView,
+} from "@gorhom/bottom-sheet";
+import type React from "react";
+import { useCallback, useEffect, useRef } from "react";
+import {
+  Platform,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+  type ViewProps,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Text } from "@/components/common/Text";
+
+// Conditional import for Expo UI (iOS only)
+let ContextMenu: any = null;
+let Host: any = null;
+let Button: any = null;
+let Picker: any = null;
+
+if (!Platform.isTV && Platform.OS === "ios") {
+  try {
+    const ExpoUI = require("@expo/ui/swift-ui");
+    ContextMenu = ExpoUI.ContextMenu;
+    Host = ExpoUI.Host;
+    Button = ExpoUI.Button;
+    Picker = ExpoUI.Picker;
+  } catch {
+    console.warn(
+      "Expo UI not available, falling back to Android implementation",
+    );
+  }
+}
+
+// Core option types
+export type OptionType =
+  | "radio"
+  | "checkbox"
+  | "toggle"
+  | "action"
+  | "separator";
+
+// Base option interface
+export interface BaseOption {
+  id: string;
+  type: OptionType;
+  label: string;
+  disabled?: boolean;
+  hidden?: boolean;
+}
+
+// Specific option types
+export interface RadioOption extends BaseOption {
+  type: "radio";
+  groupId: string; // For grouping radio buttons
+  selected?: boolean;
+}
+
+export interface CheckboxOption extends BaseOption {
+  type: "checkbox";
+  checked: boolean;
+}
+
+export interface ToggleOption extends BaseOption {
+  type: "toggle";
+  value: boolean;
+}
+
+export interface ActionOption extends BaseOption {
+  type: "action";
+  icon?: string; // Ionicons name
+}
+
+export interface SeparatorOption extends BaseOption {
+  type: "separator";
+  label: ""; // Separator doesn't need a label
+}
+
+// Union type for all options
+export type Option =
+  | RadioOption
+  | CheckboxOption
+  | ToggleOption
+  | ActionOption
+  | SeparatorOption;
+
+// Option groups
+export interface OptionGroup {
+  id: string;
+  title: string;
+  options: Option[];
+}
+
+// Component props interface
+export interface PlatformOptionsMenuProps extends ViewProps {
+  // Data
+  groups: OptionGroup[];
+
+  // Presentation
+  trigger: React.ReactNode; // Custom trigger button
+  title: string;
+
+  // Behavior
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onOptionSelect: (optionId: string, value?: any) => void;
+
+  // Platform specific configurations
+  expoUIConfig?: {
+    hostStyle?: ViewProps["style"];
+  };
+
+  bottomSheetConfig?: {
+    snapPoints?: string[];
+    enableDynamicSizing?: boolean;
+    enablePanDownToClose?: boolean;
+  };
+}
+
+// Helper component for Android bottom sheet option rendering
+const AndroidOptionItem: React.FC<{
+  option: Option;
+  onSelect: (optionId: string, value?: any) => void;
+  isLast?: boolean;
+}> = ({ option, onSelect, isLast }) => {
+  if (option.hidden) return null;
+
+  if (option.type === "separator") {
+    return (
+      <View
+        style={{
+          height: StyleSheet.hairlineWidth,
+          marginVertical: 8,
+        }}
+        className='bg-neutral-700 mx-4'
+      />
+    );
+  }
+
+  const handlePress = () => {
+    if (option.disabled) return;
+
+    switch (option.type) {
+      case "radio":
+        onSelect(option.id, !option.selected);
+        break;
+      case "checkbox":
+        onSelect(option.id, !option.checked);
+        break;
+      case "toggle":
+        onSelect(option.id, !option.value);
+        break;
+      case "action":
+        onSelect(option.id);
+        break;
+    }
+  };
+
+  const renderIcon = () => {
+    switch (option.type) {
+      case "radio":
+        return (
+          <Ionicons
+            name={option.selected ? "radio-button-on" : "radio-button-off"}
+            size={24}
+            color={option.selected ? "#9333ea" : "#6b7280"}
+          />
+        );
+      case "checkbox":
+        return (
+          <Ionicons
+            name={option.checked ? "checkmark-circle" : "ellipse-outline"}
+            size={24}
+            color={option.checked ? "#9333ea" : "#6b7280"}
+          />
+        );
+      case "toggle":
+        return (
+          <View
+            className={`w-12 h-7 rounded-full ${
+              option.value ? "bg-purple-600" : "bg-neutral-600"
+            } flex-row items-center`}
+          >
+            <View
+              className={`w-5 h-5 rounded-full bg-white shadow-md transform transition-transform ${
+                option.value ? "translate-x-6" : "translate-x-1"
+              }`}
+            />
+          </View>
+        );
+      case "action":
+        return option.icon ? (
+          <Ionicons name={option.icon as any} size={24} color='white' />
+        ) : null;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <>
+      <TouchableOpacity
+        onPress={handlePress}
+        disabled={option.disabled}
+        className={`px-4 py-3 flex flex-row items-center justify-between ${
+          option.disabled ? "opacity-50" : ""
+        }`}
+      >
+        <Text className='flex-1 text-white'>{option.label}</Text>
+        {renderIcon()}
+      </TouchableOpacity>
+      {!isLast && (
+        <View
+          style={{
+            height: StyleSheet.hairlineWidth,
+          }}
+          className='bg-neutral-700 mx-4'
+        />
+      )}
+    </>
+  );
+};
+
+// Helper component for Android bottom sheet group rendering
+const AndroidOptionGroup: React.FC<{
+  group: OptionGroup;
+  onSelect: (optionId: string, value?: any) => void;
+  isLast?: boolean;
+}> = ({ group, onSelect, isLast }) => {
+  const visibleOptions = group.options.filter((option) => !option.hidden);
+
+  if (visibleOptions.length === 0) return null;
+
+  return (
+    <View className={isLast ? "mb-0" : "mb-6"}>
+      <Text className='text-lg font-semibold mb-3 text-neutral-300'>
+        {group.title}
+      </Text>
+      <View
+        style={{
+          borderRadius: 12,
+          overflow: "hidden",
+        }}
+        className='bg-neutral-800 rounded-xl overflow-hidden'
+      >
+        {visibleOptions.map((option, index) => (
+          <AndroidOptionItem
+            key={option.id}
+            option={option}
+            onSelect={onSelect}
+            isLast={index === visibleOptions.length - 1}
+          />
+        ))}
+      </View>
+    </View>
+  );
+};
+
+/**
+ * PlatformOptionsMenu Component
+ *
+ * A unified component that renders platform-appropriate option menus:
+ * - iOS: Expo UI ContextMenu with native SwiftUI integration
+ * - Android: Bottom sheet modal
+ *
+ * Supports radio buttons, checkboxes, toggles, actions, and separators.
+ */
+export const PlatformOptionsMenu: React.FC<PlatformOptionsMenuProps> = ({
+  groups,
+  trigger,
+  title,
+  open,
+  onOpenChange,
+  onOptionSelect,
+  expoUIConfig,
+  bottomSheetConfig,
+  ...viewProps
+}) => {
+  const isIOS = Platform.OS === "ios";
+  const isTv = Platform.isTV;
+  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
+  const insets = useSafeAreaInsets();
+
+  // Bottom sheet effects
+  useEffect(() => {
+    if (!isIOS) {
+      if (open) bottomSheetModalRef.current?.present();
+      else bottomSheetModalRef.current?.dismiss();
+    }
+  }, [open, isIOS]);
+
+  const handleSheetChanges = useCallback(
+    (index: number) => {
+      if (index === -1) {
+        onOpenChange(false);
+      }
+    },
+    [onOpenChange],
+  );
+
+  const renderBackdrop = useCallback(
+    (props: BottomSheetBackdropProps) => (
+      <BottomSheetBackdrop
+        {...props}
+        disappearsOnIndex={-1}
+        appearsOnIndex={0}
+      />
+    ),
+    [],
+  );
+
+  if (isTv) return null;
+
+  // iOS Implementation with Expo UI ContextMenu
+  if (isIOS && ContextMenu && Host && Button) {
+    const renderContextMenuItems = () => {
+      const items: React.ReactNode[] = [];
+
+      groups.forEach((group) => {
+        // Add group items
+        group.options.forEach((option) => {
+          if (option.hidden) return;
+
+          if (option.type === "separator") {
+            return;
+          }
+
+          if (option.type === "radio") {
+            // For radio options, create a picker if multiple options in the same group
+            const groupOptions = groups
+              .flatMap((g) => g.options)
+              .filter(
+                (opt) =>
+                  opt.type === "radio" &&
+                  (opt as RadioOption).groupId ===
+                    (option as RadioOption).groupId,
+              );
+
+            if (groupOptions.length > 1) {
+              // Create a picker for radio group
+              const selectedIndex = groupOptions.findIndex(
+                (opt) => (opt as RadioOption).selected,
+              );
+              const pickerOptions = groupOptions.map((opt) => opt.label);
+
+              items.push(
+                <Picker
+                  key={`${(option as RadioOption).groupId}-picker`}
+                  label={group.title}
+                  options={pickerOptions}
+                  variant='menu'
+                  selectedIndex={Math.max(0, selectedIndex)}
+                  onOptionSelected={({ nativeEvent: { index } }: any) => {
+                    const selectedOption = groupOptions[index];
+                    if (selectedOption) {
+                      onOptionSelect(selectedOption.id, true);
+                    }
+                  }}
+                />,
+              );
+              return; // Skip individual radio buttons when we have a picker
+            }
+          }
+
+          // For other option types, create buttons
+          const systemImage =
+            option.type === "action" && (option as ActionOption).icon
+              ? (option as ActionOption).icon
+              : undefined;
+
+          const variant = (() => {
+            if (option.type === "checkbox") {
+              return (option as CheckboxOption).checked ? "filled" : "bordered";
+            }
+            if (option.type === "toggle") {
+              return (option as ToggleOption).value ? "filled" : "bordered";
+            }
+            return "bordered";
+          })();
+
+          items.push(
+            <Button
+              key={option.id}
+              systemImage={systemImage}
+              variant={variant}
+              onPress={() => {
+                switch (option.type) {
+                  case "checkbox":
+                    onOptionSelect(
+                      option.id,
+                      !(option as CheckboxOption).checked,
+                    );
+                    break;
+                  case "toggle":
+                    onOptionSelect(option.id, !(option as ToggleOption).value);
+                    break;
+                  case "radio":
+                    onOptionSelect(
+                      option.id,
+                      !(option as RadioOption).selected,
+                    );
+                    break;
+                  case "action":
+                    onOptionSelect(option.id);
+                    break;
+                }
+              }}
+              disabled={option.disabled}
+            >
+              {option.label}
+            </Button>,
+          );
+        });
+      });
+
+      return items;
+    };
+
+    return (
+      <View {...viewProps}>
+        <Host style={expoUIConfig?.hostStyle || { flex: 1 }}>
+          <ContextMenu>
+            <ContextMenu.Items>{renderContextMenuItems()}</ContextMenu.Items>
+            <ContextMenu.Trigger>{trigger}</ContextMenu.Trigger>
+          </ContextMenu>
+        </Host>
+      </View>
+    );
+  }
+
+  // Android Implementation with Bottom Sheet
+  return (
+    <View {...viewProps}>
+      <BottomSheetModal
+        ref={bottomSheetModalRef}
+        enableDynamicSizing={bottomSheetConfig?.enableDynamicSizing ?? true}
+        onChange={handleSheetChanges}
+        backdropComponent={renderBackdrop}
+        handleIndicatorStyle={{
+          backgroundColor: "white",
+        }}
+        backgroundStyle={{
+          backgroundColor: "#171717",
+        }}
+        enablePanDownToClose={bottomSheetConfig?.enablePanDownToClose ?? true}
+        enableDismissOnClose
+        snapPoints={bottomSheetConfig?.snapPoints}
+      >
+        <BottomSheetView>
+          <View
+            className='px-4 pb-8 pt-2'
+            style={{
+              paddingLeft: Math.max(16, insets.left),
+              paddingRight: Math.max(16, insets.right),
+            }}
+          >
+            <Text className='font-bold text-2xl mb-6'>{title}</Text>
+
+            {groups.map((group, index) => (
+              <AndroidOptionGroup
+                key={group.id}
+                group={group}
+                onSelect={onOptionSelect}
+                isLast={index === groups.length - 1}
+              />
+            ))}
+          </View>
+        </BottomSheetView>
+      </BottomSheetModal>
+    </View>
+  );
+};

components/SubtitleTrackSelector.tsx

@@ -1,12 +1,10 @@
 import type { MediaSourceInfo } from "@jellyfin/sdk/lib/generated-client/models";
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { Platform, TouchableOpacity, View } from "react-native";
 import { tc } from "@/utils/textTools";
-
-const DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;
-
-import { useTranslation } from "react-i18next";
 import { Text } from "./common/Text";
+import { type OptionGroup, PlatformOptionsMenu } from "./PlatformOptionsMenu";
 
 interface Props extends React.ComponentProps<typeof View> {
   source?: MediaSourceInfo;
@@ -21,6 +19,8 @@ export const SubtitleTrackSelector: React.FC<Props> = ({
   ...props
 }) => {
   const { t } = useTranslation();
+  const [open, setOpen] = useState(false);
+
   const subtitleStreams = useMemo(() => {
     return source?.MediaStreams?.filter((x) => x.Type === "Subtitle");
   }, [source]);
@@ -30,6 +30,69 @@ export const SubtitleTrackSelector: React.FC<Props> = ({
     [subtitleStreams, selected],
   );
 
+  const optionGroups: OptionGroup[] = useMemo(() => {
+    const options = [
+      {
+        id: "none",
+        type: "radio" as const,
+        groupId: "subtitle-streams",
+        label: t("item_card.none"),
+        selected: selected === -1,
+      },
+      ...(subtitleStreams?.map((subtitle, idx) => ({
+        id: `${subtitle.Index || idx}`,
+        type: "radio" as const,
+        groupId: "subtitle-streams",
+        label: subtitle.DisplayTitle || `Subtitle Stream ${idx + 1}`,
+        selected: subtitle.Index === selected,
+      })) || []),
+    ];
+
+    return [
+      {
+        id: "subtitle-streams",
+        title: "Subtitle tracks",
+        options,
+      },
+    ];
+  }, [subtitleStreams, selected, t]);
+
+  const handleOptionSelect = (optionId: string) => {
+    if (optionId === "none") {
+      onChange(-1);
+    } else {
+      const selectedStream = subtitleStreams?.find(
+        (subtitle, idx) => `${subtitle.Index || idx}` === optionId,
+      );
+      if (
+        selectedStream &&
+        selectedStream.Index !== undefined &&
+        selectedStream.Index !== null
+      ) {
+        onChange(selectedStream.Index);
+      }
+    }
+    setOpen(false);
+  };
+
+  const trigger = (
+    <View className='flex flex-col' {...props}>
+      <Text numberOfLines={1} className='opacity-50 mb-1 text-xs'>
+        {t("item_card.subtitles")}
+      </Text>
+      <TouchableOpacity
+        className='bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between'
+        onPress={() => setOpen(true)}
+      >
+        <Text>
+          {selectedSubtitleSteam
+            ? tc(selectedSubtitleSteam?.DisplayTitle, 7)
+            : t("item_card.none")}
+        </Text>
+      </TouchableOpacity>
+    </View>
+  );
+
   if (Platform.isTV || subtitleStreams?.length === 0) return null;
 
   return (
@@ -40,54 +103,21 @@ export const SubtitleTrackSelector: React.FC<Props> = ({
         maxWidth: 200,
       }}
     >
-      <DropdownMenu.Root>
-        <DropdownMenu.Trigger>
-          <View className='flex flex-col ' {...props}>
-            <Text numberOfLines={1} className='opacity-50 mb-1 text-xs'>
-              {t("item_card.subtitles")}
-            </Text>
-            <TouchableOpacity className='bg-neutral-900  h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between'>
-              <Text className=' '>
-                {selectedSubtitleSteam
-                  ? tc(selectedSubtitleSteam?.DisplayTitle, 7)
-                  : t("item_card.none")}
-              </Text>
-            </TouchableOpacity>
-          </View>
-        </DropdownMenu.Trigger>
-        <DropdownMenu.Content
-          loop={true}
-          side='bottom'
-          align='start'
-          alignOffset={0}
-          avoidCollisions={true}
-          collisionPadding={8}
-          sideOffset={8}
-        >
-          <DropdownMenu.Label>Subtitle tracks</DropdownMenu.Label>
-          <DropdownMenu.Item
-            key={"-1"}
-            onSelect={() => {
-              onChange(-1);
-            }}
-          >
-            <DropdownMenu.ItemTitle>None</DropdownMenu.ItemTitle>
-          </DropdownMenu.Item>
-          {subtitleStreams?.map((subtitle, idx: number) => (
-            <DropdownMenu.Item
-              key={idx.toString()}
-              onSelect={() => {
-                if (subtitle.Index !== undefined && subtitle.Index !== null)
-                  onChange(subtitle.Index);
-              }}
-            >
-              <DropdownMenu.ItemTitle>
-                {subtitle.DisplayTitle}
-              </DropdownMenu.ItemTitle>
-            </DropdownMenu.Item>
-          ))}
-        </DropdownMenu.Content>
-      </DropdownMenu.Root>
+      <PlatformOptionsMenu
+        groups={optionGroups}
+        trigger={trigger}
+        title={t("item_card.subtitles")}
+        open={open}
+        onOpenChange={setOpen}
+        onOptionSelect={handleOptionSelect}
+        expoUIConfig={{
+          hostStyle: { flex: 1 },
+        }}
+        bottomSheetConfig={{
+          enableDynamicSizing: true,
+          enablePanDownToClose: true,
+        }}
+      />
     </View>
   );
 };

components/common/Dropdown.tsx

@@ -1,14 +1,14 @@
-const DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;
-
 import {
   type PropsWithChildren,
   type ReactNode,
   useEffect,
+  useMemo,
   useState,
 } from "react";
 import { Platform, TouchableOpacity, View, type ViewProps } from "react-native";
 import { Text } from "@/components/common/Text";
 import DisabledSetting from "@/components/settings/DisabledSetting";
+import { type OptionGroup, PlatformOptionsMenu } from "../PlatformOptionsMenu";
 
 interface Props<T> {
   data: T[];
@@ -35,7 +35,7 @@ const Dropdown = <T,>({
   ...props
 }: PropsWithChildren<Props<T> & ViewProps>) => {
   const isTv = Platform.isTV;
-
+  const [open, setOpen] = useState(false);
   const [selected, setSelected] = useState<T[]>();
 
   useEffect(() => {
@@ -44,80 +44,97 @@ const Dropdown = <T,>({
     }
   }, [selected, onSelected]);
 
+  const optionGroups: OptionGroup[] = useMemo(
+    () => [
+      {
+        id: "dropdown-items",
+        title: label,
+        options: data.map((item) => {
+          const key = keyExtractor(item);
+          const isSelected =
+            selected?.some((s) => keyExtractor(s) === key) || false;
+
+          return {
+            id: key,
+            type: multiple ? "checkbox" : ("radio" as const),
+            groupId: "dropdown-items",
+            label: titleExtractor(item) || key,
+            ...(multiple ? { checked: isSelected } : { selected: isSelected }),
+          };
+        }),
+      },
+    ],
+    [data, selected, multiple, keyExtractor, titleExtractor, label],
+  );
+
+  const handleOptionSelect = (optionId: string, value?: any) => {
+    const selectedItem = data.find((item) => keyExtractor(item) === optionId);
+    if (!selectedItem) return;
+
+    if (multiple) {
+      setSelected((prev) => {
+        const prevItems = prev || [];
+        if (value) {
+          // Add item if not already selected
+          if (!prevItems.some((s) => keyExtractor(s) === optionId)) {
+            return [...prevItems, selectedItem];
+          }
+          return prevItems;
+        } else {
+          // Remove item
+          return prevItems.filter((s) => keyExtractor(s) !== optionId);
+        }
+      });
+    } else {
+      setSelected([selectedItem]);
+      setOpen(false);
+    }
+  };
+
+  const getDisplayValue = () => {
+    if (selected?.length !== undefined && selected.length > 0) {
+      return selected.map(titleExtractor).join(",");
+    }
+    return placeholderText || "";
+  };
+
+  const trigger =
+    typeof title === "string" ? (
+      <View className='flex flex-col'>
+        <Text className='opacity-50 mb-1 text-xs'>{title}</Text>
+        <TouchableOpacity
+          className='bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between'
+          onPress={() => setOpen(true)}
+          disabled={disabled}
+        >
+          <Text numberOfLines={1}>{getDisplayValue()}</Text>
+        </TouchableOpacity>
+      </View>
+    ) : (
+      <TouchableOpacity onPress={() => setOpen(true)} disabled={disabled}>
+        {title}
+      </TouchableOpacity>
+    );
+
   if (isTv) return null;
 
   return (
     <DisabledSetting disabled={disabled === true} showText={false} {...props}>
-      <DropdownMenu.Root>
-        <DropdownMenu.Trigger>
-          {typeof title === "string" ? (
-            <View className='flex flex-col'>
-              <Text className='opacity-50 mb-1 text-xs'>{title}</Text>
-              <TouchableOpacity className='bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between'>
-                <Text style={{}} className='' numberOfLines={1}>
-                  {selected?.length !== undefined
-                    ? selected.map(titleExtractor).join(",")
-                    : placeholderText}
-                </Text>
-              </TouchableOpacity>
-            </View>
-          ) : (
-            title
-          )}
-        </DropdownMenu.Trigger>
-        <DropdownMenu.Content
-          loop={false}
-          side='bottom'
-          align='center'
-          alignOffset={0}
-          avoidCollisions={true}
-          collisionPadding={0}
-          sideOffset={0}
-        >
-          <DropdownMenu.Label>{label}</DropdownMenu.Label>
-          {data.map((item, _idx) =>
-            multiple ? (
-              <DropdownMenu.CheckboxItem
-                value={
-                  selected?.some((s) => keyExtractor(s) === keyExtractor(item))
-                    ? "on"
-                    : "off"
-                }
-                key={keyExtractor(item)}
-                onValueChange={(
-                  next: "on" | "off",
-                  _previous: "on" | "off",
-                ) => {
-                  setSelected((p) => {
-                    const prev = p || [];
-                    if (next === "on") {
-                      return [...prev, item];
-                    }
-                    return [
-                      ...prev.filter(
-                        (p) => keyExtractor(p) !== keyExtractor(item),
-                      ),
-                    ];
-                  });
-                }}
-              >
-                <DropdownMenu.ItemTitle>
-                  {titleExtractor(item)}
-                </DropdownMenu.ItemTitle>
-              </DropdownMenu.CheckboxItem>
-            ) : (
-              <DropdownMenu.Item
-                key={keyExtractor(item)}
-                onSelect={() => setSelected([item])}
-              >
-                <DropdownMenu.ItemTitle>
-                  {titleExtractor(item)}
-                </DropdownMenu.ItemTitle>
-              </DropdownMenu.Item>
-            ),
-          )}
-        </DropdownMenu.Content>
-      </DropdownMenu.Root>
+      <PlatformOptionsMenu
+        groups={optionGroups}
+        trigger={trigger}
+        title={label}
+        open={open}
+        onOpenChange={setOpen}
+        onOptionSelect={handleOptionSelect}
+        expoUIConfig={{
+          hostStyle: { flex: 1 },
+        }}
+        bottomSheetConfig={{
+          enableDynamicSizing: true,
+          enablePanDownToClose: true,
+        }}
+      />
     </DisabledSetting>
   );
 };

components/common/JellyseerrItemRouter.tsx

@@ -1,14 +1,8 @@
 import { useRouter, useSegments } from "expo-router";
 import type React from "react";
-import { type PropsWithChildren, useCallback, useMemo } from "react";
+import { type PropsWithChildren } from "react";
 import { TouchableOpacity, type TouchableOpacityProps } from "react-native";
-import * as ContextMenu from "zeego/context-menu";
-import { useJellyseerr } from "@/hooks/useJellyseerr";
 import { MediaType } from "@/utils/jellyseerr/server/constants/media";
-import {
-  hasPermission,
-  Permission,
-} from "@/utils/jellyseerr/server/lib/permissions";
 import type { MovieDetails } from "@/utils/jellyseerr/server/models/Movie";
 import { PersonCreditCast } from "@/utils/jellyseerr/server/models/Person";
 import type {
@@ -38,90 +32,33 @@ export const TouchableJellyseerrRouter: React.FC<PropsWithChildren<Props>> = ({
 }) => {
   const router = useRouter();
   const segments = useSegments();
-  const { jellyseerrApi, jellyseerrUser, requestMedia } = useJellyseerr();
 
   const from = (segments as string[])[2] || "(home)";
 
-  const autoApprove = useMemo(() => {
-    return (
-      jellyseerrUser &&
-      hasPermission(Permission.AUTO_APPROVE, jellyseerrUser.permissions, {
-        type: "or",
-      })
-    );
-  }, [jellyseerrApi, jellyseerrUser]);
-
-  const request = useCallback(() => {
-    if (!result) return;
-    requestMedia(mediaTitle, {
-      mediaId: result.id,
-      mediaType,
-    });
-  }, [jellyseerrApi, result]);
-
   if (from === "(home)" || from === "(search)" || from === "(libraries)")
     return (
-      <ContextMenu.Root>
-        <ContextMenu.Trigger>
-          <TouchableOpacity
-            onPress={() => {
-              if (!result) return;
+      <TouchableOpacity
+        onPress={() => {
+          if (!result) return;
 
-              router.push({
-                pathname: `/(auth)/(tabs)/${from}/jellyseerr/page`,
-                // @ts-expect-error
-                params: {
-                  ...result,
-                  mediaTitle,
-                  releaseYear,
-                  canRequest: canRequest.toString(),
-                  posterSrc,
-                  mediaType,
-                },
-              });
-            }}
-            {...props}
-          >
-            {children}
-          </TouchableOpacity>
-        </ContextMenu.Trigger>
-        <ContextMenu.Content
-          avoidCollisions
-          alignOffset={0}
-          collisionPadding={0}
-          loop={false}
-          key={"content"}
-        >
-          <ContextMenu.Label key='label-1'>Actions</ContextMenu.Label>
-          {canRequest && mediaType === MediaType.MOVIE && (
-            <ContextMenu.Item
-              key='item-1'
-              onSelect={() => {
-                if (autoApprove) {
-                  request();
-                }
-              }}
-              shouldDismissMenuOnSelect
-            >
-              <ContextMenu.ItemTitle key='item-1-title'>
-                Request
-              </ContextMenu.ItemTitle>
-              <ContextMenu.ItemIcon
-                ios={{
-                  name: "arrow.down.to.line",
-                  pointSize: 18,
-                  weight: "semibold",
-                  scale: "medium",
-                  hierarchicalColor: {
-                    dark: "purple",
-                    light: "purple",
-                  },
-                }}
-                androidIconName='download'
-              />
-            </ContextMenu.Item>
-          )}
-        </ContextMenu.Content>
-      </ContextMenu.Root>
+          router.push({
+            pathname: `/(auth)/(tabs)/${from}/jellyseerr/page`,
+            // @ts-expect-error
+            params: {
+              ...result,
+              mediaTitle,
+              releaseYear,
+              canRequest: canRequest.toString(),
+              posterSrc,
+              mediaType,
+            },
+          });
+        }}
+        {...props}
+      >
+        {children}
+      </TouchableOpacity>
     );
+
+  return null;
 };

components/series/SeasonDropdown.tsx

@@ -1,11 +1,9 @@
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
-import { useEffect, useMemo } from "react";
-import { Platform, TouchableOpacity, View } from "react-native";
-
-const DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;
-
 import { t } from "i18next";
+import { useEffect, useMemo, useState } from "react";
+import { Platform, TouchableOpacity, View } from "react-native";
 import { Text } from "../common/Text";
+import { type OptionGroup, PlatformOptionsMenu } from "../PlatformOptionsMenu";
 
 type Props = {
   item: BaseItemDto;
@@ -33,6 +31,7 @@ export const SeasonDropdown: React.FC<Props> = ({
   onSelect,
 }) => {
   const isTv = Platform.isTV;
+  const [open, setOpen] = useState(false);
 
   const keys = useMemo<SeasonKeys>(
     () =>
@@ -55,6 +54,43 @@ export const SeasonDropdown: React.FC<Props> = ({
     [state, item, keys],
   );
 
+  const sortByIndex = (a: BaseItemDto, b: BaseItemDto) =>
+    Number(a[keys.index]) - Number(b[keys.index]);
+
+  const optionGroups: OptionGroup[] = useMemo(
+    () => [
+      {
+        id: "seasons",
+        title: t("item_card.seasons"),
+        options:
+          seasons?.sort(sortByIndex).map((season: any) => {
+            const title =
+              season[keys.title] ||
+              season.Name ||
+              `Season ${season.IndexNumber}`;
+            return {
+              id: `${season.Id || season.IndexNumber}`,
+              type: "radio" as const,
+              groupId: "seasons",
+              label: title,
+              selected: Number(season[keys.index]) === Number(seasonIndex),
+            };
+          }) || [],
+      },
+    ],
+    [seasons, keys, seasonIndex],
+  );
+
+  const handleSeasonSelect = (optionId: string) => {
+    const selectedSeason = seasons?.find(
+      (season: any) => `${season.Id || season.IndexNumber}` === optionId,
+    );
+    if (selectedSeason) {
+      onSelect(selectedSeason);
+    }
+    setOpen(false);
+  };
+
   useEffect(() => {
     if (isTv) return;
     if (seasons && seasons.length > 0 && seasonIndex === undefined) {
@@ -96,45 +132,36 @@ export const SeasonDropdown: React.FC<Props> = ({
     keys,
   ]);
 
-  const sortByIndex = (a: BaseItemDto, b: BaseItemDto) =>
-    Number(a[keys.index]) - Number(b[keys.index]);
+  const trigger = (
+    <View className='flex flex-row'>
+      <TouchableOpacity
+        className='bg-neutral-900 rounded-2xl border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between'
+        onPress={() => setOpen(true)}
+      >
+        <Text>
+          {t("item_card.season")} {seasonIndex}
+        </Text>
+      </TouchableOpacity>
+    </View>
+  );
 
   if (isTv) return null;
 
   return (
-    <DropdownMenu.Root>
-      <DropdownMenu.Trigger>
-        <View className='flex flex-row'>
-          <TouchableOpacity className='bg-neutral-900 rounded-2xl border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between'>
-            <Text>
-              {t("item_card.season")} {seasonIndex}
-            </Text>
-          </TouchableOpacity>
-        </View>
-      </DropdownMenu.Trigger>
-      <DropdownMenu.Content
-        loop={true}
-        side='bottom'
-        align='start'
-        alignOffset={0}
-        avoidCollisions={true}
-        collisionPadding={8}
-        sideOffset={8}
-      >
-        <DropdownMenu.Label>{t("item_card.seasons")}</DropdownMenu.Label>
-        {seasons?.sort(sortByIndex).map((season: any) => {
-          const title =
-            season[keys.title] || season.Name || `Season ${season.IndexNumber}`;
-          return (
-            <DropdownMenu.Item
-              key={season.Id || season.IndexNumber}
-              onSelect={() => onSelect(season)}
-            >
-              <DropdownMenu.ItemTitle>{title}</DropdownMenu.ItemTitle>
-            </DropdownMenu.Item>
-          );
-        })}
-      </DropdownMenu.Content>
-    </DropdownMenu.Root>
+    <PlatformOptionsMenu
+      groups={optionGroups}
+      trigger={trigger}
+      title={t("item_card.seasons")}
+      open={open}
+      onOpenChange={setOpen}
+      onOptionSelect={handleSeasonSelect}
+      expoUIConfig={{
+        hostStyle: { flex: 1 },
+      }}
+      bottomSheetConfig={{
+        enableDynamicSizing: true,
+        enablePanDownToClose: true,
+      }}
+    />
   );
 };

components/settings/AppLanguageSelector.tsx

@@ -1,5 +1,4 @@
-const DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;
-
+import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Platform, TouchableOpacity, View, type ViewProps } from "react-native";
 import { APP_LANGUAGES } from "@/i18n";
@@ -7,6 +6,7 @@ import { useSettings } from "@/utils/atoms/settings";
 import { Text } from "../common/Text";
 import { ListGroup } from "../list/ListGroup";
 import { ListItem } from "../list/ListItem";
+import { type OptionGroup, PlatformOptionsMenu } from "../PlatformOptionsMenu";
 
 interface Props extends ViewProps {}
 
@@ -14,6 +14,55 @@ export const AppLanguageSelector: React.FC<Props> = () => {
   const isTv = Platform.isTV;
   const { settings, updateSettings } = useSettings();
   const { t } = useTranslation();
+  const [open, setOpen] = useState(false);
+
+  const optionGroups: OptionGroup[] = useMemo(() => {
+    const options = [
+      {
+        id: "system",
+        type: "radio" as const,
+        groupId: "languages",
+        label: t("home.settings.languages.system"),
+        selected: !settings?.preferedLanguage,
+      },
+      ...APP_LANGUAGES.map((lang) => ({
+        id: lang.value,
+        type: "radio" as const,
+        groupId: "languages",
+        label: lang.label,
+        selected: lang.value === settings?.preferedLanguage,
+      })),
+    ];
+
+    return [
+      {
+        id: "languages",
+        title: t("home.settings.languages.title"),
+        options,
+      },
+    ];
+  }, [settings?.preferedLanguage, t]);
+
+  const handleOptionSelect = (optionId: string) => {
+    if (optionId === "system") {
+      updateSettings({ preferedLanguage: undefined });
+    } else {
+      updateSettings({ preferedLanguage: optionId });
+    }
+    setOpen(false);
+  };
+
+  const trigger = (
+    <TouchableOpacity
+      className='bg-neutral-800 rounded-lg border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between'
+      onPress={() => setOpen(true)}
+    >
+      <Text>
+        {APP_LANGUAGES.find((l) => l.value === settings?.preferedLanguage)
+          ?.label || t("home.settings.languages.system")}
+      </Text>
+    </TouchableOpacity>
+  );
 
   if (isTv) return null;
   if (!settings) return null;
@@ -22,54 +71,21 @@ export const AppLanguageSelector: React.FC<Props> = () => {
     <View>
       <ListGroup title={t("home.settings.languages.title")}>
         <ListItem title={t("home.settings.languages.app_language")}>
-          <DropdownMenu.Root>
-            <DropdownMenu.Trigger>
-              <TouchableOpacity className='bg-neutral-800 rounded-lg border-neutral-900 border px-3 py-2 flex flex-row items-center justify-between'>
-                <Text>
-                  {APP_LANGUAGES.find(
-                    (l) => l.value === settings?.preferedLanguage,
-                  )?.label || t("home.settings.languages.system")}
-                </Text>
-              </TouchableOpacity>
-            </DropdownMenu.Trigger>
-            <DropdownMenu.Content
-              loop={true}
-              side='bottom'
-              align='start'
-              alignOffset={0}
-              avoidCollisions={true}
-              collisionPadding={8}
-              sideOffset={8}
-            >
-              <DropdownMenu.Label>
-                {t("home.settings.languages.title")}
-              </DropdownMenu.Label>
-              <DropdownMenu.Item
-                key={"unknown"}
-                onSelect={() => {
-                  updateSettings({
-                    preferedLanguage: undefined,
-                  });
-                }}
-              >
-                <DropdownMenu.ItemTitle>
-                  {t("home.settings.languages.system")}
-                </DropdownMenu.ItemTitle>
-              </DropdownMenu.Item>
-              {APP_LANGUAGES?.map((l) => (
-                <DropdownMenu.Item
-                  key={l?.value ?? "unknown"}
-                  onSelect={() => {
-                    updateSettings({
-                      preferedLanguage: l.value,
-                    });
-                  }}
-                >
-                  <DropdownMenu.ItemTitle>{l.label}</DropdownMenu.ItemTitle>
-                </DropdownMenu.Item>
-              ))}
-            </DropdownMenu.Content>
-          </DropdownMenu.Root>
+          <PlatformOptionsMenu
+            groups={optionGroups}
+            trigger={trigger}
+            title={t("home.settings.languages.title")}
+            open={open}
+            onOpenChange={setOpen}
+            onOptionSelect={handleOptionSelect}
+            expoUIConfig={{
+              hostStyle: { flex: 1 },
+            }}
+            bottomSheetConfig={{
+              enableDynamicSizing: true,
+              enablePanDownToClose: true,
+            }}
+          />
         </ListItem>
       </ListGroup>
     </View>

components/settings/AudioToggles.tsx

@@ -1,20 +1,20 @@
-import { Platform, TouchableOpacity, View, type ViewProps } from "react-native";
-
-const DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;
-
 import { Ionicons } from "@expo/vector-icons";
+import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { Platform, TouchableOpacity, View, type ViewProps } from "react-native";
 import { Switch } from "react-native-gesture-handler";
 import { useSettings } from "@/utils/atoms/settings";
 import { Text } from "../common/Text";
 import { ListGroup } from "../list/ListGroup";
 import { ListItem } from "../list/ListItem";
+import { type OptionGroup, PlatformOptionsMenu } from "../PlatformOptionsMenu";
 import { useMedia } from "./MediaContext";
 
 interface Props extends ViewProps {}
 
 export const AudioToggles: React.FC<Props> = ({ ...props }) => {
   const isTv = Platform.isTV;
+  const [open, setOpen] = useState(false);
 
   const media = useMedia();
   const { pluginSettings } = useSettings();
@@ -22,6 +22,70 @@ export const AudioToggles: React.FC<Props> = ({ ...props }) => {
   const cultures = media.cultures;
   const { t } = useTranslation();
 
+  const optionGroups: OptionGroup[] = useMemo(() => {
+    const options = [
+      {
+        id: "none",
+        type: "radio" as const,
+        groupId: "audio-languages",
+        label: t("home.settings.audio.none"),
+        selected: !settings?.defaultAudioLanguage,
+      },
+      ...(cultures?.map((culture) => ({
+        id:
+          culture.ThreeLetterISOLanguageName ||
+          culture.DisplayName ||
+          "unknown",
+        type: "radio" as const,
+        groupId: "audio-languages",
+        label:
+          culture.DisplayName ||
+          culture.ThreeLetterISOLanguageName ||
+          "Unknown",
+        selected:
+          culture.ThreeLetterISOLanguageName ===
+          settings?.defaultAudioLanguage?.ThreeLetterISOLanguageName,
+      })) || []),
+    ];
+
+    return [
+      {
+        id: "audio-languages",
+        title: t("home.settings.audio.language"),
+        options,
+      },
+    ];
+  }, [cultures, settings?.defaultAudioLanguage, t]);
+
+  const handleOptionSelect = (optionId: string) => {
+    if (optionId === "none") {
+      updateSettings({ defaultAudioLanguage: null });
+    } else {
+      const selectedCulture = cultures?.find(
+        (culture) =>
+          (culture.ThreeLetterISOLanguageName || culture.DisplayName) ===
+          optionId,
+      );
+      if (selectedCulture) {
+        updateSettings({ defaultAudioLanguage: selectedCulture });
+      }
+    }
+    setOpen(false);
+  };
+
+  const trigger = (
+    <TouchableOpacity
+      className='flex flex-row items-center justify-between py-3 pl-3'
+      onPress={() => setOpen(true)}
+    >
+      <Text className='mr-1 text-[#8E8D91]'>
+        {settings?.defaultAudioLanguage?.DisplayName ||
+          t("home.settings.audio.none")}
+      </Text>
+      <Ionicons name='chevron-expand-sharp' size={18} color='#5A5960' />
+    </TouchableOpacity>
+  );
+
   if (isTv) return null;
   if (!settings) return null;
 
@@ -48,60 +112,21 @@ export const AudioToggles: React.FC<Props> = ({ ...props }) => {
           />
         </ListItem>
         <ListItem title={t("home.settings.audio.audio_language")}>
-          <DropdownMenu.Root>
-            <DropdownMenu.Trigger>
-              <TouchableOpacity className='flex flex-row items-center justify-between py-3 pl-3 '>
-                <Text className='mr-1 text-[#8E8D91]'>
-                  {settings?.defaultAudioLanguage?.DisplayName ||
-                    t("home.settings.audio.none")}
-                </Text>
-                <Ionicons
-                  name='chevron-expand-sharp'
-                  size={18}
-                  color='#5A5960'
-                />
-              </TouchableOpacity>
-            </DropdownMenu.Trigger>
-            <DropdownMenu.Content
-              loop={true}
-              side='bottom'
-              align='start'
-              alignOffset={0}
-              avoidCollisions={true}
-              collisionPadding={8}
-              sideOffset={8}
-            >
-              <DropdownMenu.Label>
-                {t("home.settings.audio.language")}
-              </DropdownMenu.Label>
-              <DropdownMenu.Item
-                key={"none-audio"}
-                onSelect={() => {
-                  updateSettings({
-                    defaultAudioLanguage: null,
-                  });
-                }}
-              >
-                <DropdownMenu.ItemTitle>
-                  {t("home.settings.audio.none")}
-                </DropdownMenu.ItemTitle>
-              </DropdownMenu.Item>
-              {cultures?.map((l) => (
-                <DropdownMenu.Item
-                  key={l?.ThreeLetterISOLanguageName ?? "unknown"}
-                  onSelect={() => {
-                    updateSettings({
-                      defaultAudioLanguage: l,
-                    });
-                  }}
-                >
-                  <DropdownMenu.ItemTitle>
-                    {l.DisplayName}
-                  </DropdownMenu.ItemTitle>
-                </DropdownMenu.Item>
-              ))}
-            </DropdownMenu.Content>
-          </DropdownMenu.Root>
+          <PlatformOptionsMenu
+            groups={optionGroups}
+            trigger={trigger}
+            title={t("home.settings.audio.language")}
+            open={open}
+            onOpenChange={setOpen}
+            onOptionSelect={handleOptionSelect}
+            expoUIConfig={{
+              hostStyle: { flex: 1 },
+            }}
+            bottomSheetConfig={{
+              enableDynamicSizing: true,
+              enablePanDownToClose: true,
+            }}
+          />
         </ListItem>
       </ListGroup>
     </View>

components/settings/SubtitleToggles.tsx

@@ -1,10 +1,7 @@
-import { Platform, TouchableOpacity, View, type ViewProps } from "react-native";
-
-const _DropdownMenu = !Platform.isTV ? require("zeego/dropdown-menu") : null;
-
 import { Ionicons } from "@expo/vector-icons";
 import { SubtitlePlaybackMode } from "@jellyfin/sdk/lib/generated-client";
 import { useTranslation } from "react-i18next";
+import { Platform, TouchableOpacity, View, type ViewProps } from "react-native";
 import { Switch } from "react-native-gesture-handler";
 import Dropdown from "@/components/common/Dropdown";
 import { Stepper } from "@/components/inputs/Stepper";