Merge branch 'develop' into chore/migrate-bottom-sheet-to-expo-ui

Improve look of download button in the download sheet
2026-05-31 19:18:26 +01:00 · 2026-05-31 23:45:59 +10:00 · 2026-05-31 23:39:14 +10:00 · 2026-05-31 22:15:58 +10:00 · 2026-05-31 21:49:32 +10:00
33 changed files with 12147 additions and 4203 deletions
--- a/app/(auth)/(tabs)/(home)/downloads/index.tsx
+++ b/app/(auth)/(tabs)/(home)/downloads/index.tsx
@@ -1,9 +1,3 @@
-import {
-  BottomSheetBackdrop,
-  type BottomSheetBackdropProps,
-  BottomSheetModal,
-  BottomSheetView,
-} from "@gorhom/bottom-sheet";
 import { useNavigation } from "expo-router";
 import { useAtom } from "jotai";
 import { useEffect, useMemo, useRef, useState } from "react";
@@ -24,6 +18,11 @@ import { useDownload } from "@/providers/DownloadProvider";
 import { type DownloadedItem } from "@/providers/Downloads/types";
 import { OfflineModeProvider } from "@/providers/OfflineModeProvider";
 import { queueAtom } from "@/utils/atoms/queue";
+import {
+  type BottomSheetMethods,
+  BottomSheetModal,
+  BottomSheetView,
+} from "@/utils/expoUiBottomSheet";
 import { writeToLog } from "@/utils/log";

 export default function DownloadsPage() {
@@ -32,7 +31,7 @@ export default function DownloadsPage() {
  const [_queue, _setQueue] = useAtom(queueAtom);
  const { downloadedItems, deleteFileByType, deleteAllFiles } = useDownload();
  const router = useRouter();
-  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
+  const bottomSheetModalRef = useRef<BottomSheetMethods>(null);

  const [showMigration, setShowMigration] = useState(false);

@@ -268,19 +267,13 @@ export default function DownloadsPage() {
      <BottomSheetModal
        ref={bottomSheetModalRef}
        enableDynamicSizing
+        enablePanDownToClose
        handleIndicatorStyle={{
          backgroundColor: "white",
        }}
        backgroundStyle={{
          backgroundColor: "#171717",
        }}
-        backdropComponent={(props: BottomSheetBackdropProps) => (
-          <BottomSheetBackdrop
-            {...props}
-            disappearsOnIndex={-1}
-            appearsOnIndex={0}
-          />
-        )}
      >
        <BottomSheetView>
          <View className='p-4 space-y-4 mb-4'>
--- a/app/(auth)/(tabs)/(home,libraries,search,favorites,watchlists)/jellyseerr/page.tsx
+++ b/app/(auth)/(tabs)/(home,libraries,search,favorites,watchlists)/jellyseerr/page.tsx
@@ -1,11 +1,4 @@
 import { Ionicons } from "@expo/vector-icons";
-import {
-  BottomSheetBackdrop,
-  type BottomSheetBackdropProps,
-  BottomSheetModal,
-  BottomSheetTextInput,
-  BottomSheetView,
-} from "@gorhom/bottom-sheet";
 import { useQuery } from "@tanstack/react-query";
 import { Image } from "expo-image";
 import { useLocalSearchParams, useNavigation } from "expo-router";
@@ -31,6 +24,12 @@ import { ItemActions } from "@/components/series/SeriesActions";
 import useRouter from "@/hooks/useAppRouter";
 import { useJellyseerr } from "@/hooks/useJellyseerr";
 import { useJellyseerrCanRequest } from "@/utils/_jellyseerr/useJellyseerrCanRequest";
+import {
+  type BottomSheetMethods,
+  BottomSheetModal,
+  BottomSheetTextInput,
+  BottomSheetView,
+} from "@/utils/expoUiBottomSheet";
 import { ANIME_KEYWORD_ID } from "@/utils/jellyseerr/server/api/themoviedb/constants";
 import {
  type IssueType,
@@ -76,8 +75,8 @@ const MobilePage: React.FC = () => {
  const [issueMessage, setIssueMessage] = useState<string>();
  const [requestBody, _setRequestBody] = useState<MediaRequestBody>();
  const [issueTypeDropdownOpen, setIssueTypeDropdownOpen] = useState(false);
-  const advancedReqModalRef = useRef<BottomSheetModal>(null);
-  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
+  const advancedReqModalRef = useRef<BottomSheetMethods>(null);
+  const bottomSheetModalRef = useRef<BottomSheetMethods>(null);

  const {
    data: details,
@@ -143,17 +142,6 @@ const MobilePage: React.FC = () => {
    }
  }, [jellyseerrApi, pendingRequest, refetch, t]);

-  const renderBackdrop = useCallback(
-    (props: BottomSheetBackdropProps) => (
-      <BottomSheetBackdrop
-        {...props}
-        disappearsOnIndex={-1}
-        appearsOnIndex={0}
-      />
-    ),
-    [],
-  );
-
  const submitIssue = useCallback(() => {
    if (result.id && issueType && issueMessage && details) {
      jellyseerrApi
@@ -478,6 +466,7 @@ const MobilePage: React.FC = () => {
        // This is till it's fixed because the menu isn't selectable on TV
        <BottomSheetModal
          ref={bottomSheetModalRef}
+          enablePanDownToClose
          enableDynamicSizing
          handleIndicatorStyle={{
            backgroundColor: "white",
@@ -485,8 +474,6 @@ const MobilePage: React.FC = () => {
          backgroundStyle={{
            backgroundColor: "#171717",
          }}
-          backdropComponent={renderBackdrop}
-          stackBehavior='push'
          onDismiss={handleIssueModalDismiss}
        >
          <BottomSheetView>
--- a/app/(auth)/now-playing.tsx
+++ b/app/(auth)/now-playing.tsx
@@ -1,6 +1,5 @@
 import { ExpoAvRoutePickerView } from "@douglowder/expo-av-route-picker-view";
 import { Ionicons } from "@expo/vector-icons";
-import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
 import type {
  BaseItemDto,
  MediaSourceInfo,
@@ -222,133 +221,129 @@ export default function NowPlayingScreen() {

  if (!currentTrack) {
    return (
-      <BottomSheetModalProvider>
-        <View
-          className='flex-1 bg-[#121212] items-center justify-center'
-          style={{
-            paddingTop: Platform.OS === "android" ? insets.top : 0,
-            paddingBottom: Platform.OS === "android" ? insets.bottom : 0,
-          }}
-        >
-          <Text className='text-neutral-500'>No track playing</Text>
-        </View>
-      </BottomSheetModalProvider>
-    );
-  }
-
-  return (
-    <BottomSheetModalProvider>
      <View
-        className='flex-1 bg-[#121212]'
+        className='flex-1 bg-[#121212] items-center justify-center'
        style={{
          paddingTop: Platform.OS === "android" ? insets.top : 0,
          paddingBottom: Platform.OS === "android" ? insets.bottom : 0,
        }}
      >
-        {/* Header */}
-        <View className='flex-row items-center justify-between px-4 pt-3 pb-2'>
-          <TouchableOpacity
-            onPress={handleClose}
-            hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
-            className='p-2'
-          >
-            <Ionicons name='chevron-down' size={28} color='white' />
-          </TouchableOpacity>
-
-          <View className='flex-row'>
-            <TouchableOpacity
-              onPress={() => setViewMode("player")}
-              className='px-3 py-1'
-            >
-              <Text
-                className={
-                  viewMode === "player"
-                    ? "text-white font-semibold"
-                    : "text-neutral-500"
-                }
-              >
-                Now Playing
-              </Text>
-            </TouchableOpacity>
-            <TouchableOpacity
-              onPress={() => setViewMode("queue")}
-              className='px-3 py-1'
-            >
-              <Text
-                className={
-                  viewMode === "queue"
-                    ? "text-white font-semibold"
-                    : "text-neutral-500"
-                }
-              >
-                Queue ({queue.length})
-              </Text>
-            </TouchableOpacity>
-          </View>
-          {/* Empty placeholder to balance header layout */}
-          <View className='p-2' style={{ width: 44 }} />
-        </View>
-
-        {viewMode === "player" ? (
-          <PlayerView
-            api={api}
-            currentTrack={currentTrack}
-            imageUrl={imageUrl}
-            sliderProgress={sliderProgress}
-            sliderMin={sliderMin}
-            sliderMax={sliderMax}
-            progressText={progressText}
-            remainingText={remainingText}
-            isPlaying={isPlaying}
-            isLoading={isLoading}
-            repeatMode={repeatMode}
-            shuffleEnabled={shuffleEnabled}
-            canGoNext={canGoNext}
-            canGoPrevious={canGoPrevious}
-            onSliderComplete={handleSliderComplete}
-            onTogglePlayPause={togglePlayPause}
-            onNext={next}
-            onPrevious={previous}
-            onCycleRepeat={cycleRepeatMode}
-            onToggleShuffle={toggleShuffle}
-            getRepeatIcon={getRepeatIcon}
-            mediaSource={mediaSource}
-            isTranscoding={isTranscoding}
-            isFavorite={isFavorite}
-            onToggleFavorite={toggleFavorite}
-            onOptionsPress={handleOptionsPress}
-            isCastConnected={isCastConnected}
-          />
-        ) : (
-          <QueueView
-            api={api}
-            queue={queue}
-            queueIndex={queueIndex}
-            onJumpToIndex={jumpToIndex}
-            onRemoveFromQueue={removeFromQueue}
-            onReorderQueue={reorderQueue}
-          />
-        )}
-
-        <TrackOptionsSheet
-          open={trackOptionsOpen}
-          setOpen={setTrackOptionsOpen}
-          track={currentTrack}
-          onAddToPlaylist={handleAddToPlaylist}
-        />
-        <PlaylistPickerSheet
-          open={playlistPickerOpen}
-          setOpen={setPlaylistPickerOpen}
-          trackToAdd={currentTrack}
-          onCreateNew={handleCreateNewPlaylist}
-        />
-        <CreatePlaylistModal
-          open={createPlaylistOpen}
-          setOpen={setCreatePlaylistOpen}
-          initialTrackId={currentTrack?.Id}
-        />
+        <Text className='text-neutral-500'>No track playing</Text>
      </View>
-    </BottomSheetModalProvider>
+    );
+  }
+
+  return (
+    <View
+      className='flex-1 bg-[#121212]'
+      style={{
+        paddingTop: Platform.OS === "android" ? insets.top : 0,
+        paddingBottom: Platform.OS === "android" ? insets.bottom : 0,
+      }}
+    >
+      {/* Header */}
+      <View className='flex-row items-center justify-between px-4 pt-3 pb-2'>
+        <TouchableOpacity
+          onPress={handleClose}
+          hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+          className='p-2'
+        >
+          <Ionicons name='chevron-down' size={28} color='white' />
+        </TouchableOpacity>
+
+        <View className='flex-row'>
+          <TouchableOpacity
+            onPress={() => setViewMode("player")}
+            className='px-3 py-1'
+          >
+            <Text
+              className={
+                viewMode === "player"
+                  ? "text-white font-semibold"
+                  : "text-neutral-500"
+              }
+            >
+              Now Playing
+            </Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            onPress={() => setViewMode("queue")}
+            className='px-3 py-1'
+          >
+            <Text
+              className={
+                viewMode === "queue"
+                  ? "text-white font-semibold"
+                  : "text-neutral-500"
+              }
+            >
+              Queue ({queue.length})
+            </Text>
+          </TouchableOpacity>
+        </View>
+        {/* Empty placeholder to balance header layout */}
+        <View className='p-2' style={{ width: 44 }} />
+      </View>
+
+      {viewMode === "player" ? (
+        <PlayerView
+          api={api}
+          currentTrack={currentTrack}
+          imageUrl={imageUrl}
+          sliderProgress={sliderProgress}
+          sliderMin={sliderMin}
+          sliderMax={sliderMax}
+          progressText={progressText}
+          remainingText={remainingText}
+          isPlaying={isPlaying}
+          isLoading={isLoading}
+          repeatMode={repeatMode}
+          shuffleEnabled={shuffleEnabled}
+          canGoNext={canGoNext}
+          canGoPrevious={canGoPrevious}
+          onSliderComplete={handleSliderComplete}
+          onTogglePlayPause={togglePlayPause}
+          onNext={next}
+          onPrevious={previous}
+          onCycleRepeat={cycleRepeatMode}
+          onToggleShuffle={toggleShuffle}
+          getRepeatIcon={getRepeatIcon}
+          mediaSource={mediaSource}
+          isTranscoding={isTranscoding}
+          isFavorite={isFavorite}
+          onToggleFavorite={toggleFavorite}
+          onOptionsPress={handleOptionsPress}
+          isCastConnected={isCastConnected}
+        />
+      ) : (
+        <QueueView
+          api={api}
+          queue={queue}
+          queueIndex={queueIndex}
+          onJumpToIndex={jumpToIndex}
+          onRemoveFromQueue={removeFromQueue}
+          onReorderQueue={reorderQueue}
+        />
+      )}
+
+      <TrackOptionsSheet
+        open={trackOptionsOpen}
+        setOpen={setTrackOptionsOpen}
+        track={currentTrack}
+        onAddToPlaylist={handleAddToPlaylist}
+      />
+      <PlaylistPickerSheet
+        open={playlistPickerOpen}
+        setOpen={setPlaylistPickerOpen}
+        trackToAdd={currentTrack}
+        onCreateNew={handleCreateNewPlaylist}
+      />
+      <CreatePlaylistModal
+        open={createPlaylistOpen}
+        setOpen={setCreatePlaylistOpen}
+        initialTrackId={currentTrack?.Id}
+      />
+    </View>
  );
 }

--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -1,6 +1,5 @@
 import "@/augmentations";
 import { ActionSheetProvider } from "@expo/react-native-action-sheet";
-import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
 import NetInfo from "@react-native-community/netinfo";
 import { createSyncStoragePersister } from "@tanstack/query-sync-storage-persister";
 import { onlineManager, QueryClient } from "@tanstack/react-query";
@@ -412,127 +411,125 @@ function Layout() {
                    <DownloadProvider>
                      <MusicPlayerProvider>
                        <GlobalModalProvider>
-                          <BottomSheetModalProvider>
-                            <IntroSheetProvider>
-                              <ThemeProvider value={DarkTheme}>
-                                <SystemBars style='light' hidden={false} />
-                                <Stack initialRouteName='(auth)/(tabs)'>
-                                  <Stack.Screen
-                                    name='(auth)/(tabs)'
-                                    options={{
-                                      headerShown: false,
-                                      title: "",
-                                      header: () => null,
-                                    }}
-                                  />
-                                  <Stack.Screen
-                                    name='(auth)/player'
-                                    options={{
-                                      headerShown: false,
-                                      title: "",
-                                      header: () => null,
-                                    }}
-                                  />
-                                  <Stack.Screen
-                                    name='(auth)/now-playing'
-                                    options={{
-                                      headerShown: false,
-                                      presentation: "modal",
-                                      gestureEnabled: true,
-                                    }}
-                                  />
-                                  <Stack.Screen
-                                    name='login'
-                                    options={{
-                                      headerShown: true,
-                                      title: "",
-                                      headerTransparent: Platform.OS === "ios",
-                                    }}
-                                  />
-                                  <Stack.Screen name='+not-found' />
-                                  <Stack.Screen
-                                    name='(auth)/tv-option-modal'
-                                    options={{
-                                      headerShown: false,
-                                      presentation: "transparentModal",
-                                      animation: "fade",
-                                    }}
-                                  />
-                                  <Stack.Screen
-                                    name='(auth)/tv-subtitle-modal'
-                                    options={{
-                                      headerShown: false,
-                                      presentation: "transparentModal",
-                                      animation: "fade",
-                                    }}
-                                  />
-                                  <Stack.Screen
-                                    name='(auth)/tv-request-modal'
-                                    options={{
-                                      headerShown: false,
-                                      presentation: "transparentModal",
-                                      animation: "fade",
-                                    }}
-                                  />
-                                  <Stack.Screen
-                                    name='(auth)/tv-season-select-modal'
-                                    options={{
-                                      headerShown: false,
-                                      presentation: "transparentModal",
-                                      animation: "fade",
-                                    }}
-                                  />
-                                  <Stack.Screen
-                                    name='(auth)/tv-series-season-modal'
-                                    options={{
-                                      headerShown: false,
-                                      presentation: "transparentModal",
-                                      animation: "fade",
-                                    }}
-                                  />
-                                  <Stack.Screen
-                                    name='tv-account-action-modal'
-                                    options={{
-                                      headerShown: false,
-                                      presentation: "transparentModal",
-                                      animation: "fade",
-                                    }}
-                                  />
-                                  <Stack.Screen
-                                    name='tv-account-select-modal'
-                                    options={{
-                                      headerShown: false,
-                                      presentation: "transparentModal",
-                                      animation: "fade",
-                                    }}
-                                  />
-                                  <Stack.Screen
-                                    name='(auth)/tv-user-switch-modal'
-                                    options={{
-                                      headerShown: false,
-                                      presentation: "transparentModal",
-                                      animation: "fade",
-                                    }}
-                                  />
-                                </Stack>
-                                <Toaster
-                                  duration={4000}
-                                  toastOptions={{
-                                    style: {
-                                      backgroundColor: "#262626",
-                                      borderColor: "#363639",
-                                      borderWidth: 1,
-                                    },
-                                    titleStyle: {
-                                      color: "white",
-                                    },
+                          <IntroSheetProvider>
+                            <ThemeProvider value={DarkTheme}>
+                              <SystemBars style='light' hidden={false} />
+                              <Stack initialRouteName='(auth)/(tabs)'>
+                                <Stack.Screen
+                                  name='(auth)/(tabs)'
+                                  options={{
+                                    headerShown: false,
+                                    title: "",
+                                    header: () => null,
                                  }}
-                                  closeButton
                                />
-                                {!Platform.isTV && <GlobalModal />}
-                              </ThemeProvider>
-                            </IntroSheetProvider>
-                          </BottomSheetModalProvider>
+                                <Stack.Screen
+                                  name='(auth)/player'
+                                  options={{
+                                    headerShown: false,
+                                    title: "",
+                                    header: () => null,
+                                  }}
+                                />
+                                <Stack.Screen
+                                  name='(auth)/now-playing'
+                                  options={{
+                                    headerShown: false,
+                                    presentation: "modal",
+                                    gestureEnabled: true,
+                                  }}
+                                />
+                                <Stack.Screen
+                                  name='login'
+                                  options={{
+                                    headerShown: true,
+                                    title: "",
+                                    headerTransparent: Platform.OS === "ios",
+                                  }}
+                                />
+                                <Stack.Screen name='+not-found' />
+                                <Stack.Screen
+                                  name='(auth)/tv-option-modal'
+                                  options={{
+                                    headerShown: false,
+                                    presentation: "transparentModal",
+                                    animation: "fade",
+                                  }}
+                                />
+                                <Stack.Screen
+                                  name='(auth)/tv-subtitle-modal'
+                                  options={{
+                                    headerShown: false,
+                                    presentation: "transparentModal",
+                                    animation: "fade",
+                                  }}
+                                />
+                                <Stack.Screen
+                                  name='(auth)/tv-request-modal'
+                                  options={{
+                                    headerShown: false,
+                                    presentation: "transparentModal",
+                                    animation: "fade",
+                                  }}
+                                />
+                                <Stack.Screen
+                                  name='(auth)/tv-season-select-modal'
+                                  options={{
+                                    headerShown: false,
+                                    presentation: "transparentModal",
+                                    animation: "fade",
+                                  }}
+                                />
+                                <Stack.Screen
+                                  name='(auth)/tv-series-season-modal'
+                                  options={{
+                                    headerShown: false,
+                                    presentation: "transparentModal",
+                                    animation: "fade",
+                                  }}
+                                />
+                                <Stack.Screen
+                                  name='tv-account-action-modal'
+                                  options={{
+                                    headerShown: false,
+                                    presentation: "transparentModal",
+                                    animation: "fade",
+                                  }}
+                                />
+                                <Stack.Screen
+                                  name='tv-account-select-modal'
+                                  options={{
+                                    headerShown: false,
+                                    presentation: "transparentModal",
+                                    animation: "fade",
+                                  }}
+                                />
+                                <Stack.Screen
+                                  name='(auth)/tv-user-switch-modal'
+                                  options={{
+                                    headerShown: false,
+                                    presentation: "transparentModal",
+                                    animation: "fade",
+                                  }}
+                                />
+                              </Stack>
+                              <Toaster
+                                duration={4000}
+                                toastOptions={{
+                                  style: {
+                                    backgroundColor: "#262626",
+                                    borderColor: "#363639",
+                                    borderWidth: 1,
+                                  },
+                                  titleStyle: {
+                                    color: "white",
+                                  },
+                                }}
+                                closeButton
+                              />
+                              {!Platform.isTV && <GlobalModal />}
+                            </ThemeProvider>
+                          </IntroSheetProvider>
                        </GlobalModalProvider>
                      </MusicPlayerProvider>
                    </DownloadProvider>
--- a/bun.lock
+++ b/bun.lock
--- a/components/AccountsSheet.tsx
+++ b/components/AccountsSheet.tsx
@@ -1,10 +1,4 @@
 import { Ionicons } from "@expo/vector-icons";
-import {
-  BottomSheetBackdrop,
-  type BottomSheetBackdropProps,
-  BottomSheetModal,
-  BottomSheetView,
-} from "@gorhom/bottom-sheet";
 import type React from "react";
 import { useCallback, useEffect, useMemo, useRef } from "react";
 import { useTranslation } from "react-i18next";
@@ -12,6 +6,11 @@ import { Alert, Platform, TouchableOpacity, View } from "react-native";
 import { Swipeable } from "react-native-gesture-handler";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Colors } from "@/constants/Colors";
+import {
+  type BottomSheetMethods,
+  BottomSheetModal,
+  BottomSheetView,
+} from "@/utils/expoUiBottomSheet";
 import {
  deleteAccountCredential,
  type SavedServer,
@@ -39,7 +38,7 @@ export const AccountsSheet: React.FC<AccountsSheetProps> = ({
 }) => {
  const { t } = useTranslation();
  const insets = useSafeAreaInsets();
-  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
+  const bottomSheetModalRef = useRef<BottomSheetMethods>(null);

  const isAndroid = Platform.OS === "android";
  const snapPoints = useMemo(
@@ -64,17 +63,6 @@ export const AccountsSheet: React.FC<AccountsSheetProps> = ({
    [setOpen],
  );

-  const renderBackdrop = useCallback(
-    (props: BottomSheetBackdropProps) => (
-      <BottomSheetBackdrop
-        {...props}
-        disappearsOnIndex={-1}
-        appearsOnIndex={0}
-      />
-    ),
-    [],
-  );
-
  const handleDeleteAccount = async (account: SavedServerAccount) => {
    if (!server) return;

@@ -118,15 +106,16 @@ export const AccountsSheet: React.FC<AccountsSheetProps> = ({
  );

  if (!server) return null;
+  if (Platform.isTV) return null;

  return (
    <BottomSheetModal
      ref={bottomSheetModalRef}
+      enablePanDownToClose
      snapPoints={snapPoints}
      onChange={handleSheetChanges}
      handleIndicatorStyle={{ backgroundColor: "white" }}
      backgroundStyle={{ backgroundColor: "#171717" }}
-      backdropComponent={renderBackdrop}
    >
      <BottomSheetView
        style={{
--- a/components/DownloadItem.tsx
+++ b/components/DownloadItem.tsx
@@ -1,10 +1,4 @@
 import Ionicons from "@expo/vector-icons/Ionicons";
-import {
-  BottomSheetBackdrop,
-  type BottomSheetBackdropProps,
-  BottomSheetModal,
-  BottomSheetView,
-} from "@gorhom/bottom-sheet";
 import type {
  BaseItemDto,
  MediaSourceInfo,
@@ -23,6 +17,11 @@ import { useDownload } from "@/providers/DownloadProvider";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { queueAtom } from "@/utils/atoms/queue";
 import { useSettings } from "@/utils/atoms/settings";
+import {
+  type BottomSheetMethods,
+  BottomSheetModal,
+  BottomSheetView,
+} from "@/utils/expoUiBottomSheet";
 import { getDefaultPlaySettings } from "@/utils/jellyfin/getDefaultPlaySettings";
 import { getDownloadUrl } from "@/utils/jellyfin/media/getDownloadUrl";
 import { AudioTrackSelector } from "./AudioTrackSelector";
@@ -90,7 +89,7 @@ export const DownloadItems: React.FC<DownloadProps> = ({
    [user],
  );

-  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
+  const bottomSheetModalRef = useRef<BottomSheetMethods>(null);

  const handlePresentModalPress = useCallback(() => {
    bottomSheetModalRef.current?.present();
@@ -317,17 +316,6 @@ export const DownloadItems: React.FC<DownloadProps> = ({
    }
  }, [closeModal, initiateDownload, itemsToDownload, userCanDownload]);

-  const renderBackdrop = useCallback(
-    (props: BottomSheetBackdropProps) => (
-      <BottomSheetBackdrop
-        {...props}
-        disappearsOnIndex={-1}
-        appearsOnIndex={0}
-      />
-    ),
-    [],
-  );
-
  const renderButtonContent = () => {
    // For single item downloads, show progress if item is being processed
    // For multi-item downloads (season/series), show progress only if 2+ items are in progress or queued
@@ -375,6 +363,8 @@ export const DownloadItems: React.FC<DownloadProps> = ({
    }
  };

+  if (Platform.isTV) return null;
+
  return (
    <View {...props}>
      <RoundButton size={size} onPress={onButtonPress}>
@@ -390,10 +380,7 @@ export const DownloadItems: React.FC<DownloadProps> = ({
          backgroundColor: "#171717",
        }}
        onChange={handleSheetChanges}
-        backdropComponent={renderBackdrop}
        enablePanDownToClose
-        enableDismissOnClose
-        android_keyboardInputMode='adjustResize'
        keyboardBehavior='interactive'
        keyboardBlurBehavior='restore'
      >
--- a/components/GlobalModal.tsx
+++ b/components/GlobalModal.tsx
@@ -1,10 +1,7 @@
-import {
-  BottomSheetBackdrop,
-  type BottomSheetBackdropProps,
-  BottomSheetModal,
-} from "@gorhom/bottom-sheet";
 import { useCallback, useEffect } from "react";
+import { Platform } from "react-native";
 import { useGlobalModal } from "@/providers/GlobalModalProvider";
+import { BottomSheetModal } from "@/utils/expoUiBottomSheet";

 /**
 * GlobalModal Component
@@ -12,8 +9,7 @@ import { useGlobalModal } from "@/providers/GlobalModalProvider";
 * This component renders a global bottom sheet modal that can be controlled
 * from anywhere in the app using the useGlobalModal hook.
 *
- * Place this component at the root level of your app (in _layout.tsx)
- * after BottomSheetModalProvider.
+ * Place this component at the root level of your app (in _layout.tsx).
 */
 export const GlobalModal = () => {
  const { hideModal, modalState, modalRef, isVisible } = useGlobalModal();
@@ -33,17 +29,6 @@ export const GlobalModal = () => {
    [hideModal],
  );

-  const renderBackdrop = useCallback(
-    (props: BottomSheetBackdropProps) => (
-      <BottomSheetBackdrop
-        {...props}
-        disappearsOnIndex={-1}
-        appearsOnIndex={0}
-      />
-    ),
-    [],
-  );
-
  const defaultOptions = {
    enableDynamicSizing: true,
    enablePanDownToClose: true,
@@ -58,6 +43,8 @@ export const GlobalModal = () => {
  // Merge default options with provided options
  const modalOptions = { ...defaultOptions, ...modalState.options };

+  if (Platform.isTV) return null;
+
  return (
    <BottomSheetModal
      ref={modalRef}
@@ -65,12 +52,9 @@ export const GlobalModal = () => {
        ? { snapPoints: modalOptions.snapPoints }
        : { enableDynamicSizing: modalOptions.enableDynamicSizing })}
      onChange={handleSheetChanges}
-      backdropComponent={renderBackdrop}
      handleIndicatorStyle={modalOptions.handleIndicatorStyle}
      backgroundStyle={modalOptions.backgroundStyle}
      enablePanDownToClose={modalOptions.enablePanDownToClose}
-      enableDismissOnClose
-      stackBehavior='push'
      style={{ zIndex: 1000 }}
    >
      {modalState.content}
--- a/components/IntroSheet.tsx
+++ b/components/IntroSheet.tsx
@@ -1,10 +1,4 @@
 import { Feather, Ionicons } from "@expo/vector-icons";
-import {
-  BottomSheetBackdrop,
-  type BottomSheetBackdropProps,
-  BottomSheetModal,
-  BottomSheetScrollView,
-} from "@gorhom/bottom-sheet";
 import { Image } from "expo-image";
 import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
 import { useTranslation } from "react-i18next";
@@ -13,6 +7,11 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Button } from "@/components/Button";
 import { Text } from "@/components/common/Text";
 import useRouter from "@/hooks/useAppRouter";
+import {
+  type BottomSheetMethods,
+  BottomSheetModal,
+  BottomSheetScrollView,
+} from "@/utils/expoUiBottomSheet";
 import { storage } from "@/utils/mmkv";

 export interface IntroSheetRef {
@@ -21,7 +20,7 @@ export interface IntroSheetRef {
 }

 export const IntroSheet = forwardRef<IntroSheetRef>((_, ref) => {
-  const bottomSheetRef = useRef<BottomSheetModal>(null);
+  const bottomSheetRef = useRef<BottomSheetMethods>(null);
  const { t } = useTranslation();
  const insets = useSafeAreaInsets();
  const router = useRouter();
@@ -36,17 +35,6 @@ export const IntroSheet = forwardRef<IntroSheetRef>((_, ref) => {
    },
  }));

-  const renderBackdrop = useCallback(
-    (props: BottomSheetBackdropProps) => (
-      <BottomSheetBackdrop
-        {...props}
-        disappearsOnIndex={-1}
-        appearsOnIndex={0}
-      />
-    ),
-    [],
-  );
-
  const handleDismiss = useCallback(() => {
    bottomSheetRef.current?.dismiss();
  }, []);
@@ -56,11 +44,13 @@ export const IntroSheet = forwardRef<IntroSheetRef>((_, ref) => {
    router.push("/settings");
  }, []);

+  if (Platform.isTV) return null;
+
  return (
    <BottomSheetModal
      ref={bottomSheetRef}
+      enablePanDownToClose
      enableDynamicSizing
-      backdropComponent={renderBackdrop}
      backgroundStyle={{ backgroundColor: "#171717" }}
      handleIndicatorStyle={{ backgroundColor: "#737373" }}
    >
--- a/components/ItemTechnicalDetails.tsx
+++ b/components/ItemTechnicalDetails.tsx
@@ -1,10 +1,4 @@
 import { Ionicons } from "@expo/vector-icons";
-import {
-  BottomSheetBackdrop,
-  type BottomSheetBackdropProps,
-  BottomSheetModal,
-  BottomSheetScrollView,
-} from "@gorhom/bottom-sheet";
 import type {
  MediaSourceInfo,
  MediaStream,
@@ -12,8 +6,13 @@ import type {
 import type React from "react";
 import { useMemo, useRef } from "react";
 import { useTranslation } from "react-i18next";
-import { TouchableOpacity, View } from "react-native";
+import { Platform, TouchableOpacity, View } from "react-native";
 import { formatBitrate } from "@/utils/bitrate";
+import {
+  type BottomSheetMethods,
+  BottomSheetModal,
+  BottomSheetScrollView,
+} from "@/utils/expoUiBottomSheet";
 import { Badge } from "./Badge";
 import { Text } from "./common/Text";

@@ -22,9 +21,20 @@ interface Props {
 }

 export const ItemTechnicalDetails: React.FC<Props> = ({ source }) => {
-  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
+  const bottomSheetModalRef = useRef<BottomSheetMethods>(null);
  const { t } = useTranslation();

+  if (Platform.isTV) {
+    return (
+      <View className='px-4 mt-2 mb-4'>
+        <Text className='text-lg font-bold mb-4'>{t("item_card.video")}</Text>
+        <View className='flex flex-row space-x-2'>
+          <VideoStreamInfo source={source} />
+        </View>
+      </View>
+    );
+  }
+
  return (
    <View className='px-4 mt-2 mb-4'>
      <Text className='text-lg font-bold mb-4'>{t("item_card.video")}</Text>
@@ -36,27 +46,27 @@ export const ItemTechnicalDetails: React.FC<Props> = ({ source }) => {
      </TouchableOpacity>
      <BottomSheetModal
        ref={bottomSheetModalRef}
-        snapPoints={["80%"]}
+        enableDynamicSizing
+        enablePanDownToClose
        handleIndicatorStyle={{
          backgroundColor: "white",
        }}
        backgroundStyle={{
          backgroundColor: "#171717",
        }}
-        backdropComponent={(props: BottomSheetBackdropProps) => (
-          <BottomSheetBackdrop
-            {...props}
-            disappearsOnIndex={-1}
-            appearsOnIndex={0}
-          />
-        )}
      >
        <BottomSheetScrollView>
-          <View className='flex flex-col space-y-2 p-4 mb-4'>
+          <View className='flex flex-col space-y-2 p-4'>
+            <View className='flex-row items-center justify-between mb-2'>
+              <Text className='text-lg font-bold'>{t("item_card.video")}</Text>
+              <TouchableOpacity
+                onPress={() => bottomSheetModalRef.current?.dismiss()}
+                hitSlop={12}
+              >
+                <Ionicons name='close' size={24} color='white' />
+              </TouchableOpacity>
+            </View>
            <View>
-              <Text className='text-lg font-bold mb-4'>
-                {t("item_card.video")}
-              </Text>
              <View className='flex flex-row space-x-2'>
                <VideoStreamInfo source={source} />
              </View>
--- a/components/PINEntryModal.tsx
+++ b/components/PINEntryModal.tsx
@@ -1,9 +1,3 @@
-import {
-  BottomSheetBackdrop,
-  type BottomSheetBackdropProps,
-  BottomSheetModal,
-  BottomSheetView,
-} from "@gorhom/bottom-sheet";
 import type React from "react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -17,6 +11,11 @@ import {
 } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useHaptic } from "@/hooks/useHaptic";
+import {
+  type BottomSheetMethods,
+  BottomSheetModal,
+  BottomSheetView,
+} from "@/utils/expoUiBottomSheet";
 import { verifyAccountPIN } from "@/utils/secureCredentials";
 import { Button } from "./Button";
 import { Text } from "./common/Text";
@@ -43,7 +42,7 @@ export const PINEntryModal: React.FC<PINEntryModalProps> = ({
 }) => {
  const { t } = useTranslation();
  const insets = useSafeAreaInsets();
-  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
+  const bottomSheetModalRef = useRef<BottomSheetMethods>(null);
  const [pinCode, setPinCode] = useState("");
  const [error, setError] = useState<string | null>(null);
  const [isVerifying, setIsVerifying] = useState(false);
@@ -78,17 +77,6 @@ export const PINEntryModal: React.FC<PINEntryModalProps> = ({
    [onClose],
  );

-  const renderBackdrop = useCallback(
-    (props: BottomSheetBackdropProps) => (
-      <BottomSheetBackdrop
-        {...props}
-        disappearsOnIndex={-1}
-        appearsOnIndex={0}
-      />
-    ),
-    [],
-  );
-
  const shake = () => {
    Animated.sequence([
      Animated.timing(shakeAnimation, {
@@ -159,18 +147,18 @@ export const PINEntryModal: React.FC<PINEntryModalProps> = ({
    ]);
  };

+  if (Platform.isTV) return null;
+
  return (
    <BottomSheetModal
      ref={bottomSheetModalRef}
+      enablePanDownToClose
      snapPoints={snapPoints}
      onChange={handleSheetChanges}
      handleIndicatorStyle={{ backgroundColor: "white" }}
      backgroundStyle={{ backgroundColor: "#171717" }}
-      backdropComponent={renderBackdrop}
      keyboardBehavior={isAndroid ? "fillParent" : "interactive"}
      keyboardBlurBehavior='restore'
-      android_keyboardInputMode='adjustResize'
-      topInset={isAndroid ? 0 : undefined}
    >
      <BottomSheetView
        style={{
--- a/components/PasswordEntryModal.tsx
+++ b/components/PasswordEntryModal.tsx
@@ -1,16 +1,15 @@
-import {
-  BottomSheetBackdrop,
-  type BottomSheetBackdropProps,
-  BottomSheetModal,
-  BottomSheetTextInput,
-  BottomSheetView,
-} from "@gorhom/bottom-sheet";
 import type React from "react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { ActivityIndicator, Platform, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useHaptic } from "@/hooks/useHaptic";
+import {
+  type BottomSheetMethods,
+  BottomSheetModal,
+  BottomSheetTextInput,
+  BottomSheetView,
+} from "@/utils/expoUiBottomSheet";
 import { Button } from "./Button";
 import { Text } from "./common/Text";

@@ -29,7 +28,7 @@ export const PasswordEntryModal: React.FC<PasswordEntryModalProps> = ({
 }) => {
  const { t } = useTranslation();
  const insets = useSafeAreaInsets();
-  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
+  const bottomSheetModalRef = useRef<BottomSheetMethods>(null);
  const [password, setPassword] = useState("");
  const [error, setError] = useState<string | null>(null);
  const [isLoading, setIsLoading] = useState(false);
@@ -62,17 +61,6 @@ export const PasswordEntryModal: React.FC<PasswordEntryModalProps> = ({
    [onClose],
  );

-  const renderBackdrop = useCallback(
-    (props: BottomSheetBackdropProps) => (
-      <BottomSheetBackdrop
-        {...props}
-        disappearsOnIndex={-1}
-        appearsOnIndex={0}
-      />
-    ),
-    [],
-  );
-
  const handleSubmit = async () => {
    if (!password) {
      setError(t("password.enter_password"));
@@ -93,18 +81,18 @@ export const PasswordEntryModal: React.FC<PasswordEntryModalProps> = ({
    }
  };

+  if (Platform.isTV) return null;
+
  return (
    <BottomSheetModal
      ref={bottomSheetModalRef}
+      enablePanDownToClose
      snapPoints={snapPoints}
      onChange={handleSheetChanges}
      handleIndicatorStyle={{ backgroundColor: "white" }}
      backgroundStyle={{ backgroundColor: "#171717" }}
-      backdropComponent={renderBackdrop}
      keyboardBehavior={isAndroid ? "fillParent" : "interactive"}
      keyboardBlurBehavior='restore'
-      android_keyboardInputMode='adjustResize'
-      topInset={isAndroid ? 0 : undefined}
    >
      <BottomSheetView
        style={{
--- a/components/PlatformDropdown.tsx
+++ b/components/PlatformDropdown.tsx
@@ -1,21 +1,22 @@
 import { Ionicons } from "@expo/vector-icons";
-import { BottomSheetScrollView } from "@gorhom/bottom-sheet";
-import React, { useEffect } from "react";
-import { Platform, StyleSheet, TouchableOpacity, View } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
+import React, { useEffect, useState } from "react";
 import {
-  MeasuredTriggerHost,
-  OptionGroupCard,
-  ToggleSwitch,
-} from "@/components/common/dropdownShared";
+  type LayoutChangeEvent,
+  Platform,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Text } from "@/components/common/Text";
 import { useGlobalModal } from "@/providers/GlobalModalProvider";
+import { BottomSheetScrollView } from "@/utils/expoUiBottomSheet";

 // @expo/ui's SwiftUI native module (ExpoUI) does not exist in tvOS builds.
 // A static top-level import evaluates requireNativeModule('ExpoUI') at module
 // load and crashes the entire route tree on tvOS (expo-router requires every
 // route file). Load it lazily and only off-TV; TV never renders these.
-const { Button, Menu } = Platform.isTV
+const { Button, Host, Menu } = Platform.isTV
  ? ({} as typeof import("@expo/ui/swift-ui"))
  : require("@expo/ui/swift-ui");
 const { disabled } = Platform.isTV
@@ -71,6 +72,16 @@ interface PlatformDropdownProps {
  };
 }

+const ToggleSwitch: React.FC<{ value: boolean }> = ({ value }) => (
+  <View
+    className={`w-12 h-7 rounded-full ${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 ${value ? "translate-x-6" : "translate-x-1"}`}
+    />
+  </View>
+);
+
 const OptionItem: React.FC<{ option: Option; isLast?: boolean }> = ({
  option,
  isLast,
@@ -110,15 +121,28 @@ const OptionItem: React.FC<{ option: Option; isLast?: boolean }> = ({
 };

 const OptionGroupComponent: React.FC<{ group: OptionGroup }> = ({ group }) => (
-  <OptionGroupCard title={group.title}>
-    {group.options.map((option, index) => (
-      <OptionItem
-        key={index}
-        option={option}
-        isLast={index === group.options.length - 1}
-      />
-    ))}
-  </OptionGroupCard>
+  <View className='mb-6'>
+    {group.title && (
+      <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'
+    >
+      {group.options.map((option, index) => (
+        <OptionItem
+          key={index}
+          option={option}
+          isLast={index === group.options.length - 1}
+        />
+      ))}
+    </View>
+  </View>
 );

 const BottomSheetContent: React.FC<{
@@ -193,6 +217,24 @@ const PlatformDropdownComponent = ({
 }: PlatformDropdownProps) => {
  const { showModal, hideModal, isVisible } = useGlobalModal();

+  // @expo/ui's <Host> (SDK 55) fills its available space by default, and
+  // `matchContents` doesn't help here: it reports the native Menu's size via
+  // setStyleSize and overrides any explicit size. Instead we measure the
+  // trigger's intrinsic size in plain RN (off-layout) and pin it on the Host.
+  const [triggerSize, setTriggerSize] = useState<{
+    width: number;
+    height: number;
+  } | null>(null);
+
+  const handleMeasureTrigger = (e: LayoutChangeEvent) => {
+    const { width, height } = e.nativeEvent.layout;
+    setTriggerSize((prev) =>
+      prev && prev.width === width && prev.height === height
+        ? prev
+        : { width, height },
+    );
+  };
+
  // Handle controlled open state for Android
  useEffect(() => {
    if (Platform.OS === "android" && controlledOpen === true) {
@@ -223,42 +265,82 @@ const PlatformDropdownComponent = ({
  }, [isVisible, controlledOpen, controlledOnOpenChange]);

  if (Platform.OS === "ios" && !Platform.isTV) {
+    // Pin the wrapper to the measured trigger size. @expo/ui's <Host> (SDK 55)
+    // fills its parent and reports its own size via setStyleSize, so it can't
+    // size itself to content. If the wrapper has no size, the Host's `flex: 1`
+    // height depends on the parent while the parent depends on the Host — a
+    // circular dependency that collapses to 0 for any selector nested more than
+    // one level deep (so only the first, shallowest dropdown stays visible).
+    // Giving the wrapper the measured size breaks the cycle; the Host then
+    // fills a concrete box.
    return (
-      <MeasuredTriggerHost
-        trigger={trigger}
-        hostStyle={expoUIConfig?.hostStyle}
-      >
-        <Menu label={trigger}>
-          {groups.flatMap((group, groupIndex) => {
-            // Check if this group has radio options
-            const radioOptions = group.options.filter(
-              (opt) => opt.type === "radio",
-            ) as RadioOption[];
-            const toggleOptions = group.options.filter(
-              (opt) => opt.type === "toggle",
-            ) as ToggleOption[];
-            const actionOptions = group.options.filter(
-              (opt) => opt.type === "action",
-            ) as ActionOption[];
+      <View style={triggerSize ?? { opacity: 0 }}>
+        {/* Hidden measurer: lays the trigger out off-flow to capture its
+            intrinsic size. Absolutely positioned WITHOUT right/bottom so it
+            sizes to the trigger's content rather than to its parent. */}
+        <View
+          style={{ position: "absolute", top: 0, left: 0, opacity: 0 }}
+          pointerEvents='none'
+          aria-hidden
+          onLayout={handleMeasureTrigger}
+        >
+          {trigger}
+        </View>
+        <Host style={[StyleSheet.absoluteFill, expoUIConfig?.hostStyle as any]}>
+          <Menu label={trigger}>
+            {groups.flatMap((group, groupIndex) => {
+              // Check if this group has radio options
+              const radioOptions = group.options.filter(
+                (opt) => opt.type === "radio",
+              ) as RadioOption[];
+              const toggleOptions = group.options.filter(
+                (opt) => opt.type === "toggle",
+              ) as ToggleOption[];
+              const actionOptions = group.options.filter(
+                (opt) => opt.type === "action",
+              ) as ActionOption[];

-            const items = [];
+              const items = [];

-            // Group radio options under a submenu ONLY if there's a title
-            // Otherwise render as individual buttons
-            if (radioOptions.length > 0) {
-              if (group.title) {
-                // Use a nested Menu as a submenu for grouped options. This
-                // reads as "Title: Selected" and expands to the choices on
-                // tap, keeping the nested look while staying a dropdown.
-                // (Menu opens on a single tap and nests cleanly; ContextMenu
-                // would require a long-press and read as a context menu.)
-                const selectedOption = radioOptions.find((opt) => opt.selected);
-                const displayTitle = selectedOption
-                  ? `${group.title}: ${selectedOption.label}`
-                  : group.title;
-                items.push(
-                  <Menu key={`submenu-${groupIndex}`} label={displayTitle}>
-                    {radioOptions.map((option, optionIndex) => (
+              // Group radio options under a submenu ONLY if there's a title
+              // Otherwise render as individual buttons
+              if (radioOptions.length > 0) {
+                if (group.title) {
+                  // Use a nested Menu as a submenu for grouped options. This
+                  // reads as "Title: Selected" and expands to the choices on
+                  // tap, keeping the nested look while staying a dropdown.
+                  // (Menu opens on a single tap and nests cleanly; ContextMenu
+                  // would require a long-press and read as a context menu.)
+                  const selectedOption = radioOptions.find(
+                    (opt) => opt.selected,
+                  );
+                  const displayTitle = selectedOption
+                    ? `${group.title}: ${selectedOption.label}`
+                    : group.title;
+                  items.push(
+                    <Menu key={`submenu-${groupIndex}`} label={displayTitle}>
+                      {radioOptions.map((option, optionIndex) => (
+                        <Button
+                          key={`radio-${groupIndex}-${optionIndex}`}
+                          label={option.label}
+                          systemImage={
+                            option.selected ? "checkmark.circle.fill" : "circle"
+                          }
+                          modifiers={
+                            option.disabled ? [disabled(true)] : undefined
+                          }
+                          onPress={() => {
+                            option.onPress();
+                            onOptionSelect?.(option.value);
+                          }}
+                        />
+                      ))}
+                    </Menu>,
+                  );
+                } else {
+                  // Render radio options as direct buttons
+                  radioOptions.forEach((option, optionIndex) => {
+                    items.push(
                      <Button
                        key={`radio-${groupIndex}-${optionIndex}`}
                        label={option.label}
@@ -272,67 +354,49 @@ const PlatformDropdownComponent = ({
                          option.onPress();
                          onOptionSelect?.(option.value);
                        }}
-                      />
-                    ))}
-                  </Menu>,
-                );
-              } else {
-                // Render radio options as direct buttons
-                radioOptions.forEach((option, optionIndex) => {
-                  items.push(
-                    <Button
-                      key={`radio-${groupIndex}-${optionIndex}`}
-                      label={option.label}
-                      systemImage={
-                        option.selected ? "checkmark.circle.fill" : "circle"
-                      }
-                      modifiers={option.disabled ? [disabled(true)] : undefined}
-                      onPress={() => {
-                        option.onPress();
-                        onOptionSelect?.(option.value);
-                      }}
-                    />,
-                  );
-                });
+                      />,
+                    );
+                  });
+                }
              }
-            }

-            // Add Buttons for toggle options
-            toggleOptions.forEach((option, optionIndex) => {
-              items.push(
-                <Button
-                  key={`toggle-${groupIndex}-${optionIndex}`}
-                  label={option.label}
-                  systemImage={
-                    option.value ? "checkmark.circle.fill" : "circle"
-                  }
-                  modifiers={option.disabled ? [disabled(true)] : undefined}
-                  onPress={() => {
-                    option.onToggle();
-                    onOptionSelect?.(option.value);
-                  }}
-                />,
-              );
-            });
+              // Add Buttons for toggle options
+              toggleOptions.forEach((option, optionIndex) => {
+                items.push(
+                  <Button
+                    key={`toggle-${groupIndex}-${optionIndex}`}
+                    label={option.label}
+                    systemImage={
+                      option.value ? "checkmark.circle.fill" : "circle"
+                    }
+                    modifiers={option.disabled ? [disabled(true)] : undefined}
+                    onPress={() => {
+                      option.onToggle();
+                      onOptionSelect?.(option.value);
+                    }}
+                  />,
+                );
+              });

-            // Add Buttons for action options (no icon)
-            actionOptions.forEach((option, optionIndex) => {
-              items.push(
-                <Button
-                  key={`action-${groupIndex}-${optionIndex}`}
-                  label={option.label}
-                  modifiers={option.disabled ? [disabled(true)] : undefined}
-                  onPress={() => {
-                    option.onPress();
-                  }}
-                />,
-              );
-            });
+              // Add Buttons for action options (no icon)
+              actionOptions.forEach((option, optionIndex) => {
+                items.push(
+                  <Button
+                    key={`action-${groupIndex}-${optionIndex}`}
+                    label={option.label}
+                    modifiers={option.disabled ? [disabled(true)] : undefined}
+                    onPress={() => {
+                      option.onPress();
+                    }}
+                  />,
+                );
+              });

-            return items;
-          })}
-        </Menu>
-      </MeasuredTriggerHost>
+              return items;
+            })}
+          </Menu>
+        </Host>
+      </View>
    );
  }

--- a/components/PlayButton.tsx
+++ b/components/PlayButton.tsx
@@ -1,6 +1,5 @@
 import { useActionSheet } from "@expo/react-native-action-sheet";
 import { Feather, Ionicons } from "@expo/vector-icons";
-import { BottomSheetView } from "@gorhom/bottom-sheet";
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
 import { useAtom, useAtomValue } from "jotai";
 import { useCallback, useEffect } from "react";
@@ -32,6 +31,7 @@ import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useOfflineMode } from "@/providers/OfflineModeProvider";
 import { itemThemeColorAtom } from "@/utils/atoms/primaryColor";
 import { useSettings } from "@/utils/atoms/settings";
+import { BottomSheetView } from "@/utils/expoUiBottomSheet";
 import { getParentBackdropImageUrl } from "@/utils/jellyfin/image/getParentBackdropImageUrl";
 import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
 import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
--- a/components/RoundButton.tsx
+++ b/components/RoundButton.tsx
@@ -39,19 +39,21 @@ export const RoundButton: React.FC<PropsWithChildren<Props>> = ({

  if (Platform.OS === "ios") {
    return (
-      <Pressable
-        onPress={handlePress}
-        className={`rounded-full ${buttonSize} flex items-center justify-center ${fillColorClass}`}
-        {...(viewProps as any)}
-      >
-        {icon ? (
-          <Ionicons
-            name={icon}
-            size={size === "large" ? 22 : 18}
-            color={color === "white" ? "white" : "#9334E9"}
-          />
-        ) : null}
-        {children ? children : null}
+      <Pressable onPress={handlePress} {...(viewProps as any)}>
+        <BlurView
+          intensity={50}
+          tint='systemChromeMaterial'
+          className={`rounded-full overflow-hidden ${buttonSize} flex items-center justify-center ${fillColorClass}`}
+        >
+          {icon ? (
+            <Ionicons
+              name={icon}
+              size={size === "large" ? 22 : 18}
+              color={color === "white" ? "white" : "#9334E9"}
+            />
+          ) : null}
+          {children ? children : null}
+        </BlurView>
      </Pressable>
    );
  }
--- a/components/SaveAccountModal.tsx
+++ b/components/SaveAccountModal.tsx
@@ -1,15 +1,14 @@
 import { Ionicons } from "@expo/vector-icons";
-import {
-  BottomSheetBackdrop,
-  type BottomSheetBackdropProps,
-  BottomSheetModal,
-  BottomSheetView,
-} from "@gorhom/bottom-sheet";
 import type React from "react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Platform, TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import {
+  type BottomSheetMethods,
+  BottomSheetModal,
+  BottomSheetView,
+} from "@/utils/expoUiBottomSheet";
 import type { AccountSecurityType } from "@/utils/secureCredentials";
 import { Button } from "./Button";
 import { Text } from "./common/Text";
@@ -58,7 +57,7 @@ export const SaveAccountModal: React.FC<SaveAccountModalProps> = ({
 }) => {
  const { t } = useTranslation();
  const insets = useSafeAreaInsets();
-  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
+  const bottomSheetModalRef = useRef<BottomSheetMethods>(null);
  const [selectedType, setSelectedType] = useState<AccountSecurityType>("none");
  const [pinCode, setPinCode] = useState("");
  const [pinError, setPinError] = useState<string | null>(null);
@@ -93,17 +92,6 @@ export const SaveAccountModal: React.FC<SaveAccountModalProps> = ({
    setPinError(null);
  };

-  const renderBackdrop = useCallback(
-    (props: BottomSheetBackdropProps) => (
-      <BottomSheetBackdrop
-        {...props}
-        disappearsOnIndex={-1}
-        appearsOnIndex={0}
-      />
-    ),
-    [],
-  );
-
  const handleOptionSelect = (type: AccountSecurityType) => {
    setSelectedType(type);
    setPinCode("");
@@ -135,18 +123,18 @@ export const SaveAccountModal: React.FC<SaveAccountModalProps> = ({
    return true;
  };

+  if (Platform.isTV) return null;
+
  return (
    <BottomSheetModal
      ref={bottomSheetModalRef}
+      enablePanDownToClose
      snapPoints={snapPoints}
      onChange={handleSheetChanges}
      handleIndicatorStyle={{ backgroundColor: "white" }}
      backgroundStyle={{ backgroundColor: "#171717" }}
-      backdropComponent={renderBackdrop}
      keyboardBehavior={isAndroid ? "fillParent" : "interactive"}
      keyboardBlurBehavior='restore'
-      android_keyboardInputMode='adjustResize'
-      topInset={isAndroid ? 0 : undefined}
    >
      <BottomSheetView
        style={{
--- a/components/common/dropdownShared.tsx
+++ b/components/common/dropdownShared.tsx
@@ -1,142 +0,0 @@
-// Shared internals for PlatformDropdown and PlayerSettingsPopover.
-// Both components host SwiftUI content (Menu / Popover) inside @expo/ui's
-// <Host>, both render an Android bottom-sheet card for the same three core
-// option types (radio / toggle / action), and both wear the same wrapper
-// boilerplate. This module is the single source of truth for those pieces.
-//
-// What lives here:
-//   - useTriggerSize()  — measures the RN trigger's intrinsic size
-//   - MeasuredTriggerHost — pins <Host> to that measured size (workaround
-//     for @expo/ui SDK 55 sizing behaviour; see notes below)
-//   - ToggleSwitch — the small purple switch used in the Android sheet
-//   - OptionGroupCard — the rounded dark card with optional title that
-//     wraps a group's option rows on Android
-//
-// What deliberately doesn't live here:
-//   - The iOS rendering — PlatformDropdown uses a Menu, PlayerSettingsPopover
-//     uses a hand-styled Popover. Nothing meaningful to share.
-//   - The Android per-row renderers — PlatformDropdown handles 3 option types,
-//     PlayerSettingsPopover handles 6 (adds slider/stepper/subgroup). Forcing
-//     a shared abstraction would couple them. Each owns its own OptionItem.
-
-import React, { useCallback, useState } from "react";
-import {
-  type LayoutChangeEvent,
-  Platform,
-  StyleSheet,
-  View,
-} from "react-native";
-import { Text } from "@/components/common/Text";
-
-// @expo/ui's SwiftUI native module (ExpoUI) does not exist in tvOS builds.
-// A static top-level import evaluates requireNativeModule('ExpoUI') at module
-// load and crashes the entire route tree on tvOS. Load it lazily and only
-// off-TV; both consumers also gate rendering on Platform.OS === "ios".
-const { Host } = Platform.isTV
-  ? ({} as typeof import("@expo/ui/swift-ui"))
-  : require("@expo/ui/swift-ui");
-
-type TriggerSize = { width: number; height: number };
-
-/**
- * Measures and remembers the intrinsic size of a RN trigger view so the
- * surrounding <Host> can be pinned to a concrete box.
- *
- * Returns `[size, handleLayout]` — pass `handleLayout` to a hidden,
- * absolutely-positioned mirror of the trigger and use `size` as the
- * wrapper's `style` once measured.
- */
-export function useTriggerSize(): [
-  TriggerSize | null,
-  (e: LayoutChangeEvent) => void,
-] {
-  const [size, setSize] = useState<TriggerSize | null>(null);
-  const onLayout = useCallback((e: LayoutChangeEvent) => {
-    const { width, height } = e.nativeEvent.layout;
-    setSize((prev) =>
-      prev && prev.width === width && prev.height === height
-        ? prev
-        : { width, height },
-    );
-  }, []);
-  return [size, onLayout];
-}
-
-interface MeasuredTriggerHostProps {
-  trigger: React.ReactNode;
-  hostStyle?: any;
-  children: React.ReactNode;
-}
-
-/**
- * Pins @expo/ui's <Host> to the trigger's measured size.
- *
- * @expo/ui's <Host> (SDK 55) fills its parent and reports its own size via
- * `setStyleSize`, so it can't size itself to content. If the wrapper has no
- * size, the Host's `flex: 1` height depends on the parent while the parent
- * depends on the Host — a circular dependency that collapses to 0 for any
- * dropdown nested more than one level deep (so only the first, shallowest
- * dropdown on screen stays visible).
- *
- * Giving the wrapper the measured trigger size breaks the cycle; the Host
- * then fills a concrete box.
- */
-export const MeasuredTriggerHost: React.FC<MeasuredTriggerHostProps> = ({
-  trigger,
-  hostStyle,
-  children,
-}) => {
-  const [size, handleMeasure] = useTriggerSize();
-  return (
-    <View style={size ?? { opacity: 0 }}>
-      {/* Hidden measurer: lays the trigger out off-flow to capture its
-          intrinsic size. Absolutely positioned WITHOUT right/bottom so it
-          sizes to the trigger's content rather than to its parent. */}
-      <View
-        style={{ position: "absolute", top: 0, left: 0, opacity: 0 }}
-        pointerEvents='none'
-        aria-hidden
-        onLayout={handleMeasure}
-      >
-        {trigger}
-      </View>
-      <Host style={[StyleSheet.absoluteFill, hostStyle as any]}>
-        {children}
-      </Host>
-    </View>
-  );
-};
-
-/** Small pill switch used by Android sheet rows. */
-export const ToggleSwitch: React.FC<{ value: boolean }> = ({ value }) => (
-  <View
-    className={`w-12 h-7 rounded-full ${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 ${value ? "translate-x-6" : "translate-x-1"}`}
-    />
-  </View>
-);
-
-/**
- * Rounded dark card with an optional title above it. Wraps a group's option
- * rows in the Android bottom sheet.
- */
-export const OptionGroupCard: React.FC<{
-  title?: string;
-  children: React.ReactNode;
-}> = ({ title, children }) => (
-  <View className='mb-6'>
-    {title && (
-      <Text className='text-lg font-semibold mb-3 text-neutral-300'>
-        {title}
-      </Text>
-    )}
-    <View
-      style={{ borderRadius: 12, overflow: "hidden" }}
-      className='bg-neutral-800 rounded-xl overflow-hidden'
-    >
-      {children}
-    </View>
-  </View>
-);
--- a/components/filters/FilterSheet.tsx
+++ b/components/filters/FilterSheet.tsx
@@ -1,15 +1,10 @@
 import { Ionicons } from "@expo/vector-icons";
-import {
-  BottomSheetBackdrop,
-  type BottomSheetBackdropProps,
-  BottomSheetModal,
-  BottomSheetScrollView,
-} from "@gorhom/bottom-sheet";
 import { isEqual } from "lodash";
 import type React from "react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import {
+  Platform,
  StyleSheet,
  TouchableOpacity,
  View,
@@ -17,6 +12,11 @@ import {
 } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Text } from "@/components/common/Text";
+import {
+  type BottomSheetMethods,
+  BottomSheetModal,
+  BottomSheetScrollView,
+} from "@/utils/expoUiBottomSheet";
 import { Button } from "../Button";
 import { Input } from "../common/Input";

@@ -75,7 +75,7 @@ export const FilterSheet = <T,>({
  disableSearch = false,
  multiple = false,
 }: Props<T>) => {
-  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
+  const bottomSheetModalRef = useRef<BottomSheetMethods>(null);
  const snapPoints = useMemo(() => ["85%"], []);
  const { t } = useTranslation();
  const insets = useSafeAreaInsets();
@@ -143,24 +143,15 @@ export const FilterSheet = <T,>({
    return data;
  }, [search, filteredData, data]);

-  const renderBackdrop = useCallback(
-    (props: BottomSheetBackdropProps) => (
-      <BottomSheetBackdrop
-        {...props}
-        disappearsOnIndex={-1}
-        appearsOnIndex={0}
-      />
-    ),
-    [],
-  );
+  if (Platform.isTV) return null;

  return (
    <BottomSheetModal
      ref={bottomSheetModalRef}
+      enablePanDownToClose
      index={0}
      snapPoints={snapPoints}
      onChange={handleSheetChanges}
-      backdropComponent={renderBackdrop}
      handleIndicatorStyle={{
        backgroundColor: "white",
      }}
--- a/components/inputs/PinInput.tsx
+++ b/components/inputs/PinInput.tsx
@@ -1,4 +1,3 @@
-import { BottomSheetTextInput } from "@gorhom/bottom-sheet";
 import React, { useCallback, useImperativeHandle, useRef } from "react";
 import {
  type StyleProp,
@@ -8,6 +7,7 @@ import {
  View,
  type ViewStyle,
 } from "react-native";
+import { BottomSheetTextInput } from "@/utils/expoUiBottomSheet";

 interface PinInputProps
  extends Omit<TextInputProps, "value" | "onChangeText" | "style"> {
--- a/components/jellyseerr/RequestModal.tsx
+++ b/components/jellyseerr/RequestModal.tsx
@@ -1,23 +1,22 @@
-import {
-  BottomSheetBackdrop,
-  type BottomSheetBackdropProps,
-  BottomSheetModal,
-  BottomSheetView,
-} from "@gorhom/bottom-sheet";
-import type { BottomSheetModalMethods } from "@gorhom/bottom-sheet/lib/typescript/types";
 import { useQuery } from "@tanstack/react-query";
 import { forwardRef, useCallback, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { View, type ViewProps } from "react-native";
+import { Platform, View, type ViewProps } from "react-native";
 import { Button } from "@/components/Button";
 import { Text } from "@/components/common/Text";
 import { PlatformDropdown } from "@/components/PlatformDropdown";
 import { useJellyseerr } from "@/hooks/useJellyseerr";
+import {
+  type BottomSheetMethods,
+  BottomSheetModal,
+  BottomSheetView,
+} from "@/utils/expoUiBottomSheet";
 import type {
  QualityProfile,
  RootFolder,
  Tag,
 } from "@/utils/jellyseerr/server/api/servarr/base";
+
 import type { MediaType } from "@/utils/jellyseerr/server/constants/media";
 import type { MediaRequestBody } from "@/utils/jellyseerr/server/interfaces/api/requestInterfaces";
 import { writeDebugLog } from "@/utils/log";
@@ -34,7 +33,7 @@ interface Props {
 }

 const RequestModal = forwardRef<
-  BottomSheetModalMethods,
+  BottomSheetMethods,
  Props & Omit<ViewProps, "id">
 >(
  (
@@ -283,11 +282,13 @@ const RequestModal = forwardRef<
      defaultTags,
    ]);

+    if (Platform.isTV) return null;
+
    return (
      <BottomSheetModal
        ref={ref}
+        enablePanDownToClose
        enableDynamicSizing
-        enableDismissOnClose
        onDismiss={handleDismiss}
        handleIndicatorStyle={{
          backgroundColor: "white",
@@ -295,14 +296,6 @@ const RequestModal = forwardRef<
        backgroundStyle={{
          backgroundColor: "#171717",
        }}
-        backdropComponent={(sheetProps: BottomSheetBackdropProps) => (
-          <BottomSheetBackdrop
-            {...sheetProps}
-            disappearsOnIndex={-1}
-            appearsOnIndex={0}
-          />
-        )}
-        stackBehavior='push'
      >
        <BottomSheetView>
          <View className='flex flex-col space-y-4 px-4 pb-8 pt-2'>
--- a/components/music/CreatePlaylistModal.tsx
+++ b/components/music/CreatePlaylistModal.tsx
@@ -1,10 +1,3 @@
-import {
-  BottomSheetBackdrop,
-  type BottomSheetBackdropProps,
-  BottomSheetModal,
-  BottomSheetTextInput,
-  BottomSheetView,
-} from "@gorhom/bottom-sheet";
 import React, {
  useCallback,
  useEffect,
@@ -13,11 +6,17 @@ import React, {
  useState,
 } from "react";
 import { useTranslation } from "react-i18next";
-import { ActivityIndicator, Keyboard } from "react-native";
+import { ActivityIndicator, Keyboard, Platform } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Button } from "@/components/Button";
 import { Text } from "@/components/common/Text";
 import { useCreatePlaylist } from "@/hooks/usePlaylistMutations";
+import {
+  type BottomSheetMethods,
+  BottomSheetModal,
+  BottomSheetTextInput,
+  BottomSheetView,
+} from "@/utils/expoUiBottomSheet";

 interface Props {
  open: boolean;
@@ -32,7 +31,7 @@ export const CreatePlaylistModal: React.FC<Props> = ({
  onPlaylistCreated,
  initialTrackId,
 }) => {
-  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
+  const bottomSheetModalRef = useRef<BottomSheetMethods>(null);
  const insets = useSafeAreaInsets();
  const { t } = useTranslation();
  const createPlaylist = useCreatePlaylist();
@@ -59,17 +58,6 @@ export const CreatePlaylistModal: React.FC<Props> = ({
    [setOpen],
  );

-  const renderBackdrop = useCallback(
-    (props: BottomSheetBackdropProps) => (
-      <BottomSheetBackdrop
-        {...props}
-        disappearsOnIndex={-1}
-        appearsOnIndex={0}
-      />
-    ),
-    [],
-  );
-
  const handleCreate = useCallback(async () => {
    if (!name.trim()) return;

@@ -86,13 +74,15 @@ export const CreatePlaylistModal: React.FC<Props> = ({

  const isValid = name.trim().length > 0;

+  if (Platform.isTV) return null;
+
  return (
    <BottomSheetModal
      ref={bottomSheetModalRef}
+      enablePanDownToClose
      index={0}
      snapPoints={snapPoints}
      onChange={handleSheetChanges}
-      backdropComponent={renderBackdrop}
      handleIndicatorStyle={{
        backgroundColor: "white",
      }}
--- a/components/music/PlaylistOptionsSheet.tsx
+++ b/components/music/PlaylistOptionsSheet.tsx
@@ -1,18 +1,23 @@
 import { Ionicons } from "@expo/vector-icons";
-import {
-  BottomSheetBackdrop,
-  type BottomSheetBackdropProps,
-  BottomSheetModal,
-  BottomSheetView,
-} from "@gorhom/bottom-sheet";
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import { useTranslation } from "react-i18next";
-import { Alert, StyleSheet, TouchableOpacity, View } from "react-native";
+import {
+  Alert,
+  Platform,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+} from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Text } from "@/components/common/Text";
 import useRouter from "@/hooks/useAppRouter";
 import { useDeletePlaylist } from "@/hooks/usePlaylistMutations";
+import {
+  type BottomSheetMethods,
+  BottomSheetModal,
+  BottomSheetView,
+} from "@/utils/expoUiBottomSheet";

 interface Props {
  open: boolean;
@@ -25,7 +30,7 @@ export const PlaylistOptionsSheet: React.FC<Props> = ({
  setOpen,
  playlist,
 }) => {
-  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
+  const bottomSheetModalRef = useRef<BottomSheetMethods>(null);
  const router = useRouter();
  const insets = useSafeAreaInsets();
  const { t } = useTranslation();
@@ -47,17 +52,6 @@ export const PlaylistOptionsSheet: React.FC<Props> = ({
    [setOpen],
  );

-  const renderBackdrop = useCallback(
-    (props: BottomSheetBackdropProps) => (
-      <BottomSheetBackdrop
-        {...props}
-        disappearsOnIndex={-1}
-        appearsOnIndex={0}
-      />
-    ),
-    [],
-  );
-
  const handleDeletePlaylist = useCallback(() => {
    if (!playlist?.Id) return;

@@ -89,14 +83,15 @@ export const PlaylistOptionsSheet: React.FC<Props> = ({
  }, [playlist, deletePlaylist, setOpen, router, t]);

  if (!playlist) return null;
+  if (Platform.isTV) return null;

  return (
    <BottomSheetModal
      ref={bottomSheetModalRef}
+      enablePanDownToClose
      index={0}
      snapPoints={snapPoints}
      onChange={handleSheetChanges}
-      backdropComponent={renderBackdrop}
      handleIndicatorStyle={{
        backgroundColor: "white",
      }}
--- a/components/music/PlaylistPickerSheet.tsx
+++ b/components/music/PlaylistPickerSheet.tsx
@@ -1,10 +1,4 @@
 import { Ionicons } from "@expo/vector-icons";
-import {
-  BottomSheetBackdrop,
-  type BottomSheetBackdropProps,
-  BottomSheetModal,
-  BottomSheetScrollView,
-} from "@gorhom/bottom-sheet";
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
@@ -20,6 +14,7 @@ import React, {
 import { useTranslation } from "react-i18next";
 import {
  ActivityIndicator,
+  Platform,
  StyleSheet,
  TouchableOpacity,
  View,
@@ -29,6 +24,11 @@ import { Input } from "@/components/common/Input";
 import { Text } from "@/components/common/Text";
 import { useAddToPlaylist } from "@/hooks/usePlaylistMutations";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import {
+  type BottomSheetMethods,
+  BottomSheetModal,
+  BottomSheetScrollView,
+} from "@/utils/expoUiBottomSheet";

 interface Props {
  open: boolean;
@@ -43,7 +43,7 @@ export const PlaylistPickerSheet: React.FC<Props> = ({
  trackToAdd,
  onCreateNew,
 }) => {
-  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
+  const bottomSheetModalRef = useRef<BottomSheetMethods>(null);
  const [api] = useAtom(apiAtom);
  const [user] = useAtom(userAtom);
  const insets = useSafeAreaInsets();
@@ -101,17 +101,6 @@ export const PlaylistPickerSheet: React.FC<Props> = ({
    [setOpen],
  );

-  const renderBackdrop = useCallback(
-    (props: BottomSheetBackdropProps) => (
-      <BottomSheetBackdrop
-        {...props}
-        disappearsOnIndex={-1}
-        appearsOnIndex={0}
-      />
-    ),
-    [],
-  );
-
  const handleSelectPlaylist = useCallback(
    async (playlist: BaseItemDto) => {
      if (!trackToAdd?.Id || !playlist.Id) return;
@@ -142,13 +131,15 @@ export const PlaylistPickerSheet: React.FC<Props> = ({
    [api],
  );

+  if (Platform.isTV) return null;
+
  return (
    <BottomSheetModal
      ref={bottomSheetModalRef}
+      enablePanDownToClose
      index={0}
      snapPoints={snapPoints}
      onChange={handleSheetChanges}
-      backdropComponent={renderBackdrop}
      handleIndicatorStyle={{
        backgroundColor: "white",
      }}
--- a/components/music/PlaylistSortSheet.tsx
+++ b/components/music/PlaylistSortSheet.tsx
@@ -1,15 +1,14 @@
 import { Ionicons } from "@expo/vector-icons";
-import {
-  BottomSheetBackdrop,
-  type BottomSheetBackdropProps,
-  BottomSheetModal,
-  BottomSheetView,
-} from "@gorhom/bottom-sheet";
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import { useTranslation } from "react-i18next";
-import { StyleSheet, TouchableOpacity, View } from "react-native";
+import { Platform, StyleSheet, TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Text } from "@/components/common/Text";
+import {
+  type BottomSheetMethods,
+  BottomSheetModal,
+  BottomSheetView,
+} from "@/utils/expoUiBottomSheet";

 export type PlaylistSortOption = "SortName" | "DateCreated";

@@ -43,7 +42,7 @@ export const PlaylistSortSheet: React.FC<Props> = ({
  sortOrder,
  onSortChange,
 }) => {
-  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
+  const bottomSheetModalRef = useRef<BottomSheetMethods>(null);
  const insets = useSafeAreaInsets();
  const { t } = useTranslation();

@@ -63,17 +62,6 @@ export const PlaylistSortSheet: React.FC<Props> = ({
    [setOpen],
  );

-  const renderBackdrop = useCallback(
-    (props: BottomSheetBackdropProps) => (
-      <BottomSheetBackdrop
-        {...props}
-        disappearsOnIndex={-1}
-        appearsOnIndex={0}
-      />
-    ),
-    [],
-  );
-
  const handleSortSelect = useCallback(
    (option: PlaylistSortOption) => {
      // If selecting same option, toggle order; otherwise use sensible default
@@ -93,13 +81,15 @@ export const PlaylistSortSheet: React.FC<Props> = ({
    [sortBy, sortOrder, onSortChange, setOpen],
  );

+  if (Platform.isTV) return null;
+
  return (
    <BottomSheetModal
      ref={bottomSheetModalRef}
+      enablePanDownToClose
      index={0}
      snapPoints={snapPoints}
      onChange={handleSheetChanges}
-      backdropComponent={renderBackdrop}
      handleIndicatorStyle={{
        backgroundColor: "white",
      }}
--- a/components/music/TrackOptionsSheet.tsx
+++ b/components/music/TrackOptionsSheet.tsx
@@ -1,10 +1,4 @@
 import { Ionicons } from "@expo/vector-icons";
-import {
-  BottomSheetBackdrop,
-  type BottomSheetBackdropProps,
-  BottomSheetModal,
-  BottomSheetView,
-} from "@gorhom/bottom-sheet";
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { Image } from "expo-image";
 import { useAtom } from "jotai";
@@ -18,6 +12,7 @@ import React, {
 import { useTranslation } from "react-i18next";
 import {
  ActivityIndicator,
+  Platform,
  StyleSheet,
  TouchableOpacity,
  View,
@@ -36,6 +31,11 @@ import {
 } from "@/providers/AudioStorage";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useMusicPlayer } from "@/providers/MusicPlayerProvider";
+import {
+  type BottomSheetMethods,
+  BottomSheetModal,
+  BottomSheetView,
+} from "@/utils/expoUiBottomSheet";
 import { getAudioStreamUrl } from "@/utils/jellyfin/audio/getAudioStreamUrl";
 import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";

@@ -56,7 +56,7 @@ export const TrackOptionsSheet: React.FC<Props> = ({
  playlistId,
  onRemoveFromPlaylist,
 }) => {
-  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
+  const bottomSheetModalRef = useRef<BottomSheetMethods>(null);
  const [api] = useAtom(apiAtom);
  const [user] = useAtom(userAtom);
  const router = useRouter();
@@ -128,17 +128,6 @@ export const TrackOptionsSheet: React.FC<Props> = ({
    [setOpen],
  );

-  const renderBackdrop = useCallback(
-    (props: BottomSheetBackdropProps) => (
-      <BottomSheetBackdrop
-        {...props}
-        disappearsOnIndex={-1}
-        appearsOnIndex={0}
-      />
-    ),
-    [],
-  );
-
  const handlePlayNext = useCallback(() => {
    if (track) {
      playNext(track);
@@ -227,13 +216,14 @@ export const TrackOptionsSheet: React.FC<Props> = ({
  const hasAlbum = !!(track?.AlbumId || track?.ParentId);

  if (!track) return null;
+  if (Platform.isTV) return null;

  return (
    <BottomSheetModal
      ref={bottomSheetModalRef}
+      enablePanDownToClose
      enableDynamicSizing
      onChange={handleSheetChanges}
-      backdropComponent={renderBackdrop}
      handleIndicatorStyle={{
        backgroundColor: "white",
      }}
--- a/components/settings/LibraryOptionsSheet.tsx
+++ b/components/settings/LibraryOptionsSheet.tsx
@@ -1,14 +1,9 @@
 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 { useTranslation } from "react-i18next";
 import {
+  Platform,
  StyleSheet,
  TouchableOpacity,
  View,
@@ -16,6 +11,11 @@ import {
 } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Text } from "@/components/common/Text";
+import {
+  type BottomSheetMethods,
+  BottomSheetModal,
+  BottomSheetView,
+} from "@/utils/expoUiBottomSheet";

 interface LibraryOptions {
  display: "row" | "list";
@@ -132,7 +132,7 @@ export const LibraryOptionsSheet: React.FC<Props> = ({
  updateSettings,
  disabled = false,
 }) => {
-  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
+  const bottomSheetModalRef = useRef<BottomSheetMethods>(null);
  const { t } = useTranslation();
  const insets = useSafeAreaInsets();

@@ -161,25 +161,14 @@ export const LibraryOptionsSheet: React.FC<Props> = ({
    [setOpen],
  );

-  const renderBackdrop = useCallback(
-    (props: BottomSheetBackdropProps) => (
-      <BottomSheetBackdrop
-        {...props}
-        disappearsOnIndex={-1}
-        appearsOnIndex={0}
-      />
-    ),
-    [],
-  );
-
  if (disabled) return null;
+  if (Platform.isTV) return null;

  return (
    <BottomSheetModal
      ref={bottomSheetModalRef}
      enableDynamicSizing
      onChange={handleSheetChanges}
-      backdropComponent={renderBackdrop}
      handleIndicatorStyle={{
        backgroundColor: "white",
      }}
@@ -187,7 +176,6 @@ export const LibraryOptionsSheet: React.FC<Props> = ({
        backgroundColor: "#171717",
      }}
      enablePanDownToClose
-      enableDismissOnClose
    >
      <BottomSheetView>
        <View
--- a/components/settings/QuickConnect.tsx
+++ b/components/settings/QuickConnect.tsx
@@ -1,9 +1,3 @@
-import {
-  BottomSheetBackdrop,
-  type BottomSheetBackdropProps,
-  BottomSheetModal,
-  BottomSheetView,
-} from "@gorhom/bottom-sheet";
 import { getQuickConnectApi } from "@jellyfin/sdk/lib/utils/api";
 import { useAtom } from "jotai";
 import type React from "react";
@@ -12,6 +6,11 @@ import { useTranslation } from "react-i18next";
 import { Alert, Platform, View, type ViewProps } from "react-native";
 import { useHaptic } from "@/hooks/useHaptic";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
+import {
+  type BottomSheetMethods,
+  BottomSheetModal,
+  BottomSheetView,
+} from "@/utils/expoUiBottomSheet";
 import { Button } from "../Button";
 import { Text } from "../common/Text";
 import { PinInput } from "../inputs/PinInput";
@@ -25,7 +24,7 @@ export const QuickConnect: React.FC<Props> = ({ ...props }) => {
  const [api] = useAtom(apiAtom);
  const [user] = useAtom(userAtom);
  const [quickConnectCode, setQuickConnectCode] = useState<string>();
-  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
+  const bottomSheetModalRef = useRef<BottomSheetMethods>(null);
  const successHapticFeedback = useHaptic("success");
  const errorHapticFeedback = useHaptic("error");
  const snapPoints = useMemo(
@@ -36,17 +35,6 @@ export const QuickConnect: React.FC<Props> = ({ ...props }) => {

  const { t } = useTranslation();

-  const renderBackdrop = useCallback(
-    (props: BottomSheetBackdropProps) => (
-      <BottomSheetBackdrop
-        {...props}
-        disappearsOnIndex={-1}
-        appearsOnIndex={0}
-      />
-    ),
-    [],
-  );
-
  const authorizeQuickConnect = useCallback(async () => {
    if (quickConnectCode) {
      try {
@@ -97,6 +85,7 @@ export const QuickConnect: React.FC<Props> = ({ ...props }) => {

      <BottomSheetModal
        ref={bottomSheetModalRef}
+        enablePanDownToClose
        snapPoints={snapPoints}
        handleIndicatorStyle={{
          backgroundColor: "white",
@@ -104,11 +93,8 @@ export const QuickConnect: React.FC<Props> = ({ ...props }) => {
        backgroundStyle={{
          backgroundColor: "#171717",
        }}
-        backdropComponent={renderBackdrop}
        keyboardBehavior={isAndroid ? "fillParent" : "interactive"}
        keyboardBlurBehavior='restore'
-        android_keyboardInputMode='adjustResize'
-        topInset={isAndroid ? 0 : undefined}
      >
        <BottomSheetView>
          <View className='flex flex-col space-y-4 px-4 pb-8 pt-2'>
--- a/components/video-player/controls/dropdown/DropdownView.tsx
+++ b/components/video-player/controls/dropdown/DropdownView.tsx
@@ -3,6 +3,10 @@ import { useLocalSearchParams } from "expo-router";
 import { useCallback, useMemo, useRef } from "react";
 import { Platform, View } from "react-native";
 import { BITRATES } from "@/components/BitrateSelector";
+import {
+  type OptionGroup,
+  PlatformDropdown,
+} from "@/components/PlatformDropdown";
 import { PLAYBACK_SPEEDS } from "@/components/PlaybackSpeedSelector";
 import useRouter from "@/hooks/useAppRouter";
 import { useOfflineMode } from "@/providers/OfflineModeProvider";
@@ -10,10 +14,20 @@ import { useSettings } from "@/utils/atoms/settings";
 import { usePlayerContext } from "../contexts/PlayerContext";
 import { useVideoContext } from "../contexts/VideoContext";
 import { PlaybackSpeedScope } from "../utils/playback-speed-settings";
-import {
-  type OptionGroup,
-  PlayerSettingsPopover,
-} from "./PlayerSettingsPopover";
+
+// Subtitle scale presets (direct multiplier values)
+const SUBTITLE_SCALE_PRESETS = [
+  { label: "0.1x", value: 0.1 },
+  { label: "0.25x", value: 0.25 },
+  { label: "0.5x", value: 0.5 },
+  { label: "0.75x", value: 0.75 },
+  { label: "1.0x", value: 1.0 },
+  { label: "1.25x", value: 1.25 },
+  { label: "1.5x", value: 1.5 },
+  { label: "2.0x", value: 2.0 },
+  { label: "2.5x", value: 2.5 },
+  { label: "3.0x", value: 3.0 },
+] as const;

 interface DropdownViewProps {
  playbackSpeed?: number;
@@ -88,7 +102,6 @@ const DropdownView = ({
    if (!isOffline) {
      groups.push({
        title: "Quality",
-        icon: "gauge.with.dots.needle.50percent",
        options:
          BITRATES?.map((bitrate) => ({
            type: "radio" as const,
@@ -100,41 +113,29 @@ const DropdownView = ({
      });
    }

-    // Subtitles section. iOS: tap the `...` opens a SwiftUI Popover with the
-    // section header "SUBTITLES" + a Track row (Menu) + a Size row (native
-    // Slider). Android: same shape in a bottom-sheet — tap the "Track" row to
-    // expand the list inline, Size shows a Material 3 Slider.
+    // Subtitle Section
    if (subtitleTracks && subtitleTracks.length > 0) {
      groups.push({
        title: "Subtitles",
-        options: [
-          {
-            type: "subgroup" as const,
-            label: "Track",
-            icon: "captions.bubble",
-            options: subtitleTracks.map((sub) => ({
-              type: "radio" as const,
-              label: sub.name,
-              value: sub.index.toString(),
-              selected: subtitleIndex === sub.index.toString(),
-              onPress: () => sub.setTrack(),
-            })),
-          },
-          {
-            type: "slider" as const,
-            label: "Size",
-            icon: "textformat.size",
-            value: Math.round((settings.mpvSubtitleScale ?? 1.0) * 10) / 10,
-            step: 0.1,
-            min: 0.1,
-            max: 3.0,
-            format: (v: number) => `${v.toFixed(1)}x`,
-            onValueChange: (value: number) =>
-              updateSettings({
-                mpvSubtitleScale: Math.round(value * 10) / 10,
-              }),
-          },
-        ],
+        options: subtitleTracks.map((sub) => ({
+          type: "radio" as const,
+          label: sub.name,
+          value: sub.index.toString(),
+          selected: subtitleIndex === sub.index.toString(),
+          onPress: () => sub.setTrack(),
+        })),
+      });
+
+      // Subtitle Scale Section
+      groups.push({
+        title: "Subtitle Scale",
+        options: SUBTITLE_SCALE_PRESETS.map((preset) => ({
+          type: "radio" as const,
+          label: preset.label,
+          value: preset.value.toString(),
+          selected: (settings.mpvSubtitleScale ?? 1.0) === preset.value,
+          onPress: () => updateSettings({ mpvSubtitleScale: preset.value }),
+        })),
      });
    }

@@ -142,7 +143,6 @@ const DropdownView = ({
    if (audioTracks && audioTracks.length > 0) {
      groups.push({
        title: "Audio",
-        icon: "speaker.wave.2",
        options: audioTracks.map((track) => ({
          type: "radio" as const,
          label: track.name,
@@ -157,7 +157,6 @@ const DropdownView = ({
    if (setPlaybackSpeed) {
      groups.push({
        title: "Speed",
-        icon: "speedometer",
        options: PLAYBACK_SPEEDS.map((speed) => ({
          type: "radio" as const,
          label: speed.label,
@@ -177,7 +176,6 @@ const DropdownView = ({
            label: showTechnicalInfo
              ? "Hide Technical Info"
              : "Show Technical Info",
-            icon: "info.circle",
            onPress: onToggleTechnicalInfo,
          },
        ],
@@ -218,7 +216,7 @@ const DropdownView = ({
  if (Platform.isTV) return null;

  return (
-    <PlayerSettingsPopover
+    <PlatformDropdown
      title='Playback Options'
      groups={optionGroups}
      trigger={trigger}
--- a/components/video-player/controls/dropdown/PlayerSettingsPopover.tsx
+++ b/components/video-player/controls/dropdown/PlayerSettingsPopover.tsx
@@ -1,930 +0,0 @@
-import { Ionicons } from "@expo/vector-icons";
-import { BottomSheetScrollView } from "@gorhom/bottom-sheet";
-import React, { useEffect, useState } from "react";
-import { Platform, StyleSheet, TouchableOpacity, View } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import {
-  MeasuredTriggerHost,
-  OptionGroupCard,
-  ToggleSwitch,
-} from "@/components/common/dropdownShared";
-import { Text } from "@/components/common/Text";
-import type {
-  ActionOption as BaseActionOption,
-  RadioOption as BaseRadioOption,
-  ToggleOption as BaseToggleOption,
-} from "@/components/PlatformDropdown";
-import { useGlobalModal } from "@/providers/GlobalModalProvider";
-
-// Player-only popover/sheet. Shares no rendering with `PlatformDropdown`:
-// that component is used by ~20 callers (settings, season pickers,
-// bitrate/audio/subtitle selectors, …) and must keep its small native
-// Menu look. This one targets the in-player `...` button and is allowed to
-// (a) host a real slider, (b) wear the Swift-mock visual style, and
-// (c) carry SF Symbol icons per row.
-//
-// Common boilerplate (trigger measurement, ToggleSwitch, Android option-card
-// shell) lives in @/components/common/dropdownShared and is reused with
-// PlatformDropdown.
-//
-// @expo/ui's SwiftUI native module (ExpoUI) does not exist in tvOS builds.
-// A static top-level import evaluates requireNativeModule('ExpoUI') at module
-// load and crashes the entire route tree on tvOS (expo-router requires every
-// route file). Load it lazily and only off-TV; TV never renders these.
-const {
-  Button,
-  HStack,
-  Image: SwiftImage,
-  Menu,
-  Popover,
-  Rectangle: SwiftRectangle,
-  Slider: SwiftSlider,
-  Spacer,
-  Stepper,
-  Text: SwiftText,
-  Toggle: SwiftToggle,
-  VStack,
-} = Platform.isTV
-  ? ({} as typeof import("@expo/ui/swift-ui"))
-  : require("@expo/ui/swift-ui");
-const {
-  buttonStyle,
-  disabled,
-  font,
-  foregroundStyle,
-  frame,
-  opacity,
-  padding,
-  tint,
-} = Platform.isTV
-  ? ({} as typeof import("@expo/ui/swift-ui/modifiers"))
-  : require("@expo/ui/swift-ui/modifiers");
-// Android-side Material 3 slider. Lives in @expo/ui/community/slider and is a
-// drop-in for react-native-community/slider on Android (and SwiftUI Slider on
-// iOS, but we use the swift-ui Slider directly inside the popover instead).
-const { Slider: CommunitySlider } = Platform.isTV
-  ? ({} as typeof import("@expo/ui/community/slider"))
-  : require("@expo/ui/community/slider");
-
-// ---------------------------------------------------------------------------
-// Option model
-// ---------------------------------------------------------------------------
-// Reuses PlatformDropdown's three base option types (so the 20+ shared callers
-// and the player popover stay in sync on shape), then adds:
-//   - `icon?: string` on every variant — SF Symbol shown in the iOS popover
-//   - Slider / Stepper / Subgroup variants for the player's extra controls
-
-type WithIcon = { icon?: string };
-
-export type RadioOption<T = any> = BaseRadioOption<T> & WithIcon;
-export type ToggleOption = BaseToggleOption & WithIcon;
-export type ActionOption = BaseActionOption & WithIcon;
-
-export type StepperOption = {
-  type: "stepper";
-  label: string;
-  value: number;
-  step: number;
-  min: number;
-  max: number;
-  onValueChange: (value: number) => void;
-  /** Optional value formatter for the displayed number. */
-  format?: (value: number) => string;
-  disabled?: boolean;
-} & WithIcon;
-
-export type SliderOption = {
-  type: "slider";
-  label: string;
-  value: number;
-  step: number;
-  min: number;
-  max: number;
-  onValueChange: (value: number) => void;
-  /** Optional value formatter for the displayed number. */
-  format?: (value: number) => string;
-  disabled?: boolean;
-} & WithIcon;
-
-/**
- * A row that itself opens a nested dropdown. On iOS this renders as a
- * SwiftUI `Menu` inside the popover (label = subgroup name, value =
- * currently-selected child); on Android the row expands inline to show its
- * options when tapped (and collapses again on a second tap).
- */
-export type SubgroupOption = {
-  type: "subgroup";
-  label: string;
-  options: Option[];
-  disabled?: boolean;
-} & WithIcon;
-
-export type Option =
-  | RadioOption
-  | ToggleOption
-  | ActionOption
-  | StepperOption
-  | SliderOption
-  | SubgroupOption;
-
-export type OptionGroup = {
-  title?: string;
-  options: Option[];
-  /**
-   * Optional SF Symbol used for the group's row in the iOS popover when the
-   * entire group is compressed to a single Menu (e.g. radio-only groups).
-   */
-  icon?: string;
-};
-
-interface PlayerSettingsPopoverProps {
-  trigger?: React.ReactNode;
-  title?: string;
-  groups: OptionGroup[];
-  open?: boolean;
-  onOpenChange?: (open: boolean) => void;
-  onOptionSelect?: (value?: any) => void;
-  expoUIConfig?: {
-    hostStyle?: any;
-  };
-  bottomSheetConfig?: {
-    enableDynamicSizing?: boolean;
-    enablePanDownToClose?: boolean;
-  };
-}
-
-// ---------------------------------------------------------------------------
-// Android bottom-sheet renderers
-// ---------------------------------------------------------------------------
-
-const StepperControl: React.FC<{
-  option: StepperOption;
-}> = ({ option }) => {
-  const display = option.format
-    ? option.format(option.value)
-    : option.value.toString();
-  const canDecrement = option.value > option.min;
-  const canIncrement = option.value < option.max;
-
-  const decrement = () => {
-    if (option.disabled) return;
-    const next = Math.max(option.min, option.value - option.step);
-    if (next !== option.value) option.onValueChange(next);
-  };
-  const increment = () => {
-    if (option.disabled) return;
-    const next = Math.min(option.max, option.value + option.step);
-    if (next !== option.value) option.onValueChange(next);
-  };
-
-  return (
-    <View className='flex flex-row items-center'>
-      <TouchableOpacity
-        onPress={decrement}
-        disabled={!canDecrement || option.disabled}
-        className={`w-8 h-8 bg-neutral-700 rounded-l-lg flex items-center justify-center ${!canDecrement || option.disabled ? "opacity-40" : ""}`}
-      >
-        <Text className='text-white'>-</Text>
-      </TouchableOpacity>
-      <View className='h-8 px-3 bg-neutral-700 flex items-center justify-center'>
-        <Text className='text-white'>{display}</Text>
-      </View>
-      <TouchableOpacity
-        onPress={increment}
-        disabled={!canIncrement || option.disabled}
-        className={`w-8 h-8 bg-neutral-700 rounded-r-lg flex items-center justify-center ${!canIncrement || option.disabled ? "opacity-40" : ""}`}
-      >
-        <Text className='text-white'>+</Text>
-      </TouchableOpacity>
-    </View>
-  );
-};
-
-/**
- * Android: full-width Material 3 slider inside the bottom sheet, with a
- * label/value row above the track. The slider lives below the touch target so
- * dragging it doesn't accidentally collapse the sheet.
- */
-const SliderControl: React.FC<{
-  option: SliderOption;
-}> = ({ option }) => {
-  const display = option.format
-    ? option.format(option.value)
-    : option.value.toString();
-  return (
-    <View className='flex-1 px-4 py-3'>
-      <View className='flex flex-row items-center justify-between mb-2'>
-        <Text className='text-white'>{option.label}</Text>
-        <Text className='text-neutral-400'>{display}</Text>
-      </View>
-      <CommunitySlider
-        value={option.value}
-        minimumValue={option.min}
-        maximumValue={option.max}
-        step={option.step}
-        onValueChange={option.onValueChange}
-        disabled={option.disabled}
-        style={{ width: "100%", height: 40 }}
-      />
-    </View>
-  );
-};
-
-const OptionItem: React.FC<{ option: Option; isLast?: boolean }> = ({
-  option,
-  isLast,
-}) => {
-  const [expanded, setExpanded] = useState(false);
-
-  const isToggle = option.type === "toggle";
-  const isAction = option.type === "action";
-  const isStepper = option.type === "stepper";
-  const isSlider = option.type === "slider";
-  const isSubgroup = option.type === "subgroup";
-
-  if (isSlider) {
-    return (
-      <>
-        <SliderControl option={option} />
-        {!isLast && (
-          <View
-            style={{ height: StyleSheet.hairlineWidth }}
-            className='bg-neutral-700 mx-4'
-          />
-        )}
-      </>
-    );
-  }
-
-  const handlePress = isToggle
-    ? option.onToggle
-    : isSubgroup
-      ? () => setExpanded((v) => !v)
-      : isStepper
-        ? undefined
-        : (option as RadioOption | ActionOption).onPress;
-
-  const selectedChild = isSubgroup
-    ? (option.options.find(
-        (o): o is RadioOption => o.type === "radio" && o.selected,
-      ) ?? undefined)
-    : undefined;
-
-  return (
-    <>
-      <TouchableOpacity
-        onPress={handlePress}
-        disabled={option.disabled || isStepper}
-        activeOpacity={isStepper ? 1 : 0.2}
-        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>
-        {isToggle ? (
-          <ToggleSwitch value={option.value} />
-        ) : isStepper ? (
-          <StepperControl option={option} />
-        ) : isSubgroup ? (
-          <View className='flex flex-row items-center'>
-            {selectedChild && (
-              <Text className='text-neutral-400 mr-2'>
-                {selectedChild.label}
-              </Text>
-            )}
-            <Ionicons
-              name={expanded ? "chevron-up" : "chevron-down"}
-              size={20}
-              color='#9ca3af'
-            />
-          </View>
-        ) : isAction ? null : (option as RadioOption).selected ? (
-          <Ionicons name='checkmark-circle' size={24} color='#9333ea' />
-        ) : (
-          <Ionicons name='ellipse-outline' size={24} color='#6b7280' />
-        )}
-      </TouchableOpacity>
-
-      {isSubgroup && expanded && (
-        <View className='pl-4 bg-neutral-900'>
-          {option.options.map((child, childIndex) => (
-            <OptionItem
-              key={childIndex}
-              option={child}
-              isLast={childIndex === option.options.length - 1}
-            />
-          ))}
-        </View>
-      )}
-
-      {!isLast && (
-        <View
-          style={{ height: StyleSheet.hairlineWidth }}
-          className='bg-neutral-700 mx-4'
-        />
-      )}
-    </>
-  );
-};
-
-const OptionGroupComponent: React.FC<{ group: OptionGroup }> = ({ group }) => (
-  <OptionGroupCard title={group.title}>
-    {group.options.map((option, index) => (
-      <OptionItem
-        key={index}
-        option={option}
-        isLast={index === group.options.length - 1}
-      />
-    ))}
-  </OptionGroupCard>
-);
-
-const BottomSheetContent: React.FC<{
-  title?: string;
-  groups: OptionGroup[];
-  onOptionSelect?: (value?: any) => void;
-  onClose?: () => void;
-}> = ({ title, groups, onOptionSelect, onClose }) => {
-  const insets = useSafeAreaInsets();
-
-  // Recursively wrap options so radio/action presses also call
-  // onOptionSelect/onClose, including options nested inside subgroups.
-  const wrapOption = (option: Option): Option => {
-    if (option.type === "radio") {
-      return {
-        ...option,
-        onPress: () => {
-          option.onPress();
-          onOptionSelect?.(option.value);
-          onClose?.();
-        },
-      };
-    }
-    if (option.type === "toggle") {
-      return {
-        ...option,
-        onToggle: () => {
-          option.onToggle();
-          onOptionSelect?.(option.value);
-        },
-      };
-    }
-    if (option.type === "action") {
-      return {
-        ...option,
-        onPress: () => {
-          option.onPress();
-          onClose?.();
-        },
-      };
-    }
-    if (option.type === "subgroup") {
-      return { ...option, options: option.options.map(wrapOption) };
-    }
-    return option;
-  };
-
-  const wrappedGroups = groups.map((group) => ({
-    ...group,
-    options: group.options.map(wrapOption),
-  }));
-
-  return (
-    <BottomSheetScrollView
-      className='px-4 pb-8 pt-2'
-      style={{
-        paddingLeft: Math.max(16, insets.left),
-        paddingRight: Math.max(16, insets.right),
-      }}
-    >
-      {title && <Text className='font-bold text-2xl mb-6'>{title}</Text>}
-      {wrappedGroups.map((group, index) => (
-        <OptionGroupComponent key={index} group={group} />
-      ))}
-    </BottomSheetScrollView>
-  );
-};
-
-// ---------------------------------------------------------------------------
-// Component
-// ---------------------------------------------------------------------------
-
-const PlayerSettingsPopoverComponent = ({
-  trigger,
-  title,
-  groups,
-  open: controlledOpen,
-  onOpenChange: controlledOnOpenChange,
-  onOptionSelect,
-  expoUIConfig,
-  bottomSheetConfig,
-}: PlayerSettingsPopoverProps) => {
-  const { showModal, hideModal, isVisible } = useGlobalModal();
-
-  // Android: controlled open routes through the global bottom-sheet modal.
-  useEffect(() => {
-    if (Platform.OS === "android" && controlledOpen === true) {
-      showModal(
-        <BottomSheetContent
-          title={title}
-          groups={groups}
-          onOptionSelect={onOptionSelect}
-          onClose={() => {
-            hideModal();
-            controlledOnOpenChange?.(false);
-          }}
-        />,
-        {
-          snapPoints: ["90%"],
-          enablePanDownToClose: bottomSheetConfig?.enablePanDownToClose ?? true,
-        },
-      );
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [controlledOpen]);
-
-  useEffect(() => {
-    if (Platform.OS === "android" && controlledOpen === true && !isVisible) {
-      controlledOnOpenChange?.(false);
-    }
-  }, [isVisible, controlledOpen, controlledOnOpenChange]);
-
-  // Internal open state for the iOS popover. Synced both ways with
-  // `controlledOpen` when controlled.
-  const [iosOpen, setIosOpen] = useState(false);
-
-  useEffect(() => {
-    if (Platform.OS === "ios" && controlledOpen !== undefined) {
-      setIosOpen(controlledOpen);
-    }
-  }, [controlledOpen]);
-
-  const handleIosOpenChange = (value: boolean) => {
-    setIosOpen(value);
-    controlledOnOpenChange?.(value);
-  };
-
-  if (Platform.OS === "ios" && !Platform.isTV) {
-    const closePopover = () => handleIosOpenChange(false);
-
-    // ---- Swift-mock styled popover body ----
-    // Mirrors the reference Swift `PlayerSettingsViewController` design:
-    //   - small-caps section headers with a hairline rule to the trailing edge
-    //   - 44pt rows with leading SF Symbol, 15pt title, trailing value + glyph
-    //   - real native Slider rows for slider options
-    // Radio-only titled groups (Quality/Audio/Speed) are compressed to a
-    // single Menu row whose label is a styled HStack — tapping opens the
-    // selection menu without changing the panel's height.
-
-    type IconName = string | undefined;
-
-    const MENU_CHEVRON = "chevron.up.chevron.down" as const;
-    const TERTIARY = {
-      type: "hierarchical" as const,
-      style: "tertiary" as const,
-    };
-    const SECONDARY = {
-      type: "hierarchical" as const,
-      style: "secondary" as const,
-    };
-
-    /** 24pt-wide leading icon slot. Renders a transparent placeholder when
-     * no icon is set so titles stay aligned across rows. */
-    const renderIcon = (icon: IconName) => (
-      <SwiftImage
-        systemName={(icon ?? "circle") as any}
-        size={18}
-        modifiers={[
-          frame({ width: 24, alignment: "leading" }),
-          foregroundStyle(SECONDARY),
-          ...(icon ? [] : [opacity(0)]),
-        ]}
-      />
-    );
-
-    /** Small-caps section header + thin separator that fills the row width. */
-    const renderSectionHeader = (sectionTitle: string, key: string) => (
-      <HStack
-        key={key}
-        spacing={10}
-        alignment='center'
-        modifiers={[frame({ height: 28 })]}
-      >
-        <SwiftText
-          modifiers={[
-            font({ size: 11, weight: "semibold" }),
-            foregroundStyle(TERTIARY),
-          ]}
-        >
-          {sectionTitle.toUpperCase()}
-        </SwiftText>
-        <SwiftRectangle
-          modifiers={[frame({ height: 1 }), foregroundStyle(TERTIARY)]}
-        />
-      </HStack>
-    );
-
-    /** Bare hairline used to close out a multi-row titled section. */
-    const renderDivider = (key: string) => (
-      <SwiftRectangle
-        key={key}
-        modifiers={[
-          frame({ height: 1 }),
-          foregroundStyle(TERTIARY),
-          padding({ vertical: 2 }),
-        ]}
-      />
-    );
-
-    /** Render menu-safe children (radio/action) inside a SwiftUI Menu. */
-    const renderMenuChild = (option: Option, key: string): any => {
-      if (option.type === "radio") {
-        return (
-          <Button
-            key={key}
-            label={option.label}
-            systemImage={
-              (option.selected ? "checkmark.circle.fill" : "circle") as any
-            }
-            modifiers={option.disabled ? [disabled(true)] : undefined}
-            onPress={() => {
-              option.onPress();
-              onOptionSelect?.(option.value);
-              closePopover();
-            }}
-          />
-        );
-      }
-      if (option.type === "action") {
-        return (
-          <Button
-            key={key}
-            label={option.label}
-            modifiers={option.disabled ? [disabled(true)] : undefined}
-            onPress={() => {
-              option.onPress();
-              closePopover();
-            }}
-          />
-        );
-      }
-      return null;
-    };
-
-    /** Row that opens a SwiftUI Menu on tap. Used for compressed radio
-     * groups and for subgroup options inside a multi-row section. */
-    const renderMenuRow = ({
-      key,
-      icon,
-      title: rowTitle,
-      valueLabel,
-      children,
-    }: {
-      key: string;
-      icon: IconName;
-      title: string;
-      valueLabel?: string;
-      children: any;
-    }) => (
-      <Menu
-        key={key}
-        label={
-          <HStack
-            spacing={10}
-            alignment='center'
-            modifiers={[frame({ height: 44 })]}
-          >
-            {renderIcon(icon)}
-            <SwiftText modifiers={[font({ size: 15 })]}>{rowTitle}</SwiftText>
-            <Spacer />
-            {valueLabel ? (
-              <SwiftText
-                modifiers={[font({ size: 13 }), foregroundStyle(SECONDARY)]}
-              >
-                {valueLabel}
-              </SwiftText>
-            ) : null}
-            <SwiftImage
-              systemName={MENU_CHEVRON as any}
-              size={12}
-              modifiers={[foregroundStyle(TERTIARY)]}
-            />
-          </HStack>
-        }
-      >
-        {children}
-      </Menu>
-    );
-
-    const renderSliderRow = (option: SliderOption, key: string) => {
-      const display = option.format
-        ? option.format(option.value)
-        : option.value.toString();
-      return (
-        <HStack
-          key={key}
-          spacing={10}
-          alignment='center'
-          modifiers={[frame({ height: 44 })]}
-        >
-          {renderIcon(option.icon)}
-          <SwiftText
-            modifiers={[
-              font({ size: 15 }),
-              frame({ width: 64, alignment: "leading" }),
-            ]}
-          >
-            {option.label}
-          </SwiftText>
-          <SwiftSlider
-            value={option.value}
-            min={option.min}
-            max={option.max}
-            step={option.step}
-            modifiers={option.disabled ? [disabled(true)] : undefined}
-            onValueChange={option.onValueChange}
-          />
-          <SwiftText
-            modifiers={[
-              font({ size: 13, design: "monospaced" }),
-              foregroundStyle(SECONDARY),
-              frame({ width: 44, alignment: "trailing" }),
-            ]}
-          >
-            {display}
-          </SwiftText>
-        </HStack>
-      );
-    };
-
-    const renderStepperRow = (option: StepperOption, key: string) => {
-      const display = option.format
-        ? option.format(option.value)
-        : option.value.toString();
-      return (
-        <HStack
-          key={key}
-          spacing={10}
-          alignment='center'
-          modifiers={[frame({ height: 44 })]}
-        >
-          {renderIcon(option.icon)}
-          <SwiftText modifiers={[font({ size: 15 })]}>{option.label}</SwiftText>
-          <Spacer />
-          <Stepper
-            label={display}
-            value={option.value}
-            step={option.step}
-            min={option.min}
-            max={option.max}
-            modifiers={option.disabled ? [disabled(true)] : undefined}
-            onValueChange={option.onValueChange}
-          />
-        </HStack>
-      );
-    };
-
-    const renderToggleRow = (option: ToggleOption, key: string) => (
-      <HStack
-        key={key}
-        spacing={10}
-        alignment='center'
-        modifiers={[frame({ height: 44 })]}
-      >
-        {renderIcon(option.icon)}
-        <SwiftText modifiers={[font({ size: 15 })]}>{option.label}</SwiftText>
-        <Spacer />
-        <SwiftToggle
-          label=''
-          value={option.value}
-          modifiers={option.disabled ? [disabled(true)] : undefined}
-          onValueChange={() => {
-            option.onToggle();
-            onOptionSelect?.(option.value);
-          }}
-        />
-      </HStack>
-    );
-
-    const renderActionRow = (option: ActionOption, key: string) => (
-      <Button
-        key={key}
-        modifiers={[
-          buttonStyle("plain"),
-          ...(option.disabled ? [disabled(true)] : []),
-        ]}
-        onPress={() => {
-          option.onPress();
-          closePopover();
-        }}
-      >
-        <HStack
-          spacing={10}
-          alignment='center'
-          modifiers={[frame({ height: 44 })]}
-        >
-          {renderIcon(option.icon)}
-          <SwiftText modifiers={[font({ size: 15 })]}>{option.label}</SwiftText>
-          <Spacer />
-        </HStack>
-      </Button>
-    );
-
-    /** Render one Option as its own row inside a mixed (non-compressed)
-     * section. */
-    const renderOptionRow = (option: Option, key: string): any => {
-      if (option.type === "slider") return renderSliderRow(option, key);
-      if (option.type === "stepper") return renderStepperRow(option, key);
-      if (option.type === "toggle") return renderToggleRow(option, key);
-      if (option.type === "action") return renderActionRow(option, key);
-      if (option.type === "subgroup") {
-        const selectedChild = option.options.find(
-          (o): o is RadioOption => o.type === "radio" && o.selected,
-        );
-        return renderMenuRow({
-          key,
-          icon: option.icon,
-          title: option.label,
-          valueLabel: selectedChild?.label,
-          children: option.options.map((child, idx) =>
-            renderMenuChild(child, `${key}-c${idx}`),
-          ),
-        });
-      }
-      if (option.type === "radio") {
-        return (
-          <Button
-            key={key}
-            modifiers={[
-              buttonStyle("plain"),
-              ...(option.disabled ? [disabled(true)] : []),
-            ]}
-            onPress={() => {
-              option.onPress();
-              onOptionSelect?.(option.value);
-              closePopover();
-            }}
-          >
-            <HStack
-              spacing={10}
-              alignment='center'
-              modifiers={[frame({ height: 44 })]}
-            >
-              {renderIcon(option.icon)}
-              <SwiftText modifiers={[font({ size: 15 })]}>
-                {option.label}
-              </SwiftText>
-              <Spacer />
-              {option.selected ? (
-                <SwiftImage
-                  systemName={"checkmark" as any}
-                  size={14}
-                  modifiers={[foregroundStyle(SECONDARY)]}
-                />
-              ) : null}
-            </HStack>
-          </Button>
-        );
-      }
-      return null;
-    };
-
-    /**
-     * Render an entire OptionGroup.
-     *   - Titled group with only radio (or radio + action) options →
-     *     compressed to a single Menu row.
-     *   - Titled group containing slider/toggle/stepper/subgroup →
-     *     section header + individual rows.
-     *   - Untitled group → individual rows, no header.
-     */
-    const renderGroup = (group: OptionGroup, groupIndex: number): any[] => {
-      if (group.options.length === 0) return [];
-
-      const onlyMenuSafe = group.options.every(
-        (o) => o.type === "radio" || o.type === "action",
-      );
-
-      if (group.title && onlyMenuSafe) {
-        const selectedRadio = group.options.find(
-          (o): o is RadioOption => o.type === "radio" && o.selected,
-        );
-        return [
-          renderMenuRow({
-            key: `group-${groupIndex}`,
-            icon: group.icon,
-            title: group.title,
-            valueLabel: selectedRadio?.label,
-            children: group.options.map((opt, idx) =>
-              renderMenuChild(opt, `g${groupIndex}-c${idx}`),
-            ),
-          }),
-        ];
-      }
-
-      const rows: any[] = [];
-      if (group.title) {
-        rows.push(renderSectionHeader(group.title, `header-${groupIndex}`));
-      }
-      group.options.forEach((opt, idx) => {
-        rows.push(renderOptionRow(opt, `g${groupIndex}-o${idx}`));
-      });
-      return rows;
-    };
-
-    return (
-      <MeasuredTriggerHost
-        trigger={trigger}
-        hostStyle={expoUIConfig?.hostStyle}
-      >
-        <Popover
-          isPresented={iosOpen}
-          onIsPresentedChange={handleIosOpenChange}
-          arrowEdge='top'
-        >
-          <Popover.Trigger>
-            {/* Wrap the RN trigger view in a SwiftUI Button so tap handling
-                is captured at the SwiftUI layer (matches the codebase
-                pattern in SearchTabButtons.tsx). */}
-            <Button
-              modifiers={[buttonStyle("plain")]}
-              onPress={() => handleIosOpenChange(true)}
-            >
-              {trigger}
-            </Button>
-          </Popover.Trigger>
-          <Popover.Content>
-            {/* Bare VStack — no Form/List chrome — so the panel reads as
-                the Swift mock's floating glass card. The popover itself
-                supplies the material background; we just stack rows
-                inside. Width pinned to ~320pt; height >= 480pt. */}
-            <VStack
-              spacing={0}
-              alignment='leading'
-              modifiers={[
-                padding({ horizontal: 18, top: 12, bottom: 12 }),
-                frame({
-                  minWidth: 300,
-                  idealWidth: 320,
-                  maxWidth: 360,
-                  minHeight: 480,
-                  idealHeight: 520,
-                }),
-                // Tint cascades to all child controls — Slider track, Menu
-                // checkmark, Stepper ± buttons, Toggle — so one modifier
-                // paints the whole popover white instead of system blue.
-                tint("white"),
-              ]}
-            >
-              {groups.flatMap((group, groupIndex) => {
-                const rows = renderGroup(group, groupIndex);
-                if (rows.length === 0) return [];
-                // After a multi-row titled section (Subtitles), append a
-                // bare hairline divider so it's clearly separated from
-                // the next group below.
-                const isMultiRow =
-                  !!group.title &&
-                  !group.options.every(
-                    (o) => o.type === "radio" || o.type === "action",
-                  );
-                const hasNext = groupIndex < groups.length - 1;
-                return isMultiRow && hasNext
-                  ? [...rows, renderDivider(`footer-${groupIndex}`)]
-                  : rows;
-              })}
-            </VStack>
-          </Popover.Content>
-        </Popover>
-      </MeasuredTriggerHost>
-    );
-  }
-
-  // Android: open the bottom sheet directly on press (uncontrolled mode).
-  const handlePress = () => {
-    showModal(
-      <BottomSheetContent
-        title={title}
-        groups={groups}
-        onOptionSelect={onOptionSelect}
-        onClose={hideModal}
-      />,
-      {
-        snapPoints: ["90%"],
-        enablePanDownToClose: bottomSheetConfig?.enablePanDownToClose ?? true,
-      },
-    );
-  };
-
-  return (
-    <TouchableOpacity onPress={handlePress} activeOpacity={0.7}>
-      {trigger || <Text className='text-white'>Open Menu</Text>}
-    </TouchableOpacity>
-  );
-};
-
-// Memoize to prevent unnecessary re-renders when parent re-renders.
-export const PlayerSettingsPopover = React.memo(
-  PlayerSettingsPopoverComponent,
-  (prevProps, nextProps) =>
-    prevProps.title === nextProps.title &&
-    prevProps.open === nextProps.open &&
-    prevProps.groups === nextProps.groups &&
-    prevProps.trigger === nextProps.trigger,
-);
--- a/components/watchlists/WatchlistSheet.tsx
+++ b/components/watchlists/WatchlistSheet.tsx
@@ -1,10 +1,4 @@
 import { Ionicons } from "@expo/vector-icons";
-import {
-  BottomSheetBackdrop,
-  type BottomSheetBackdropProps,
-  BottomSheetModal,
-  BottomSheetView,
-} from "@gorhom/bottom-sheet";
 import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import React, {
  forwardRef,
@@ -16,6 +10,7 @@ import React, {
 import { useTranslation } from "react-i18next";
 import {
  ActivityIndicator,
+  Platform,
  StyleSheet,
  TouchableOpacity,
  View,
@@ -31,6 +26,11 @@ import {
  useItemInWatchlists,
  useMyWatchlistsQuery,
 } from "@/hooks/useWatchlists";
+import {
+  type BottomSheetMethods,
+  BottomSheetModal,
+  BottomSheetView,
+} from "@/utils/expoUiBottomSheet";
 import type { StreamystatsWatchlist } from "@/utils/streamystats/types";

 export interface WatchlistSheetRef {
@@ -263,7 +263,7 @@ const WatchlistSheetContent: React.FC<WatchlistSheetContentProps> = ({

 export const WatchlistSheet = forwardRef<WatchlistSheetRef, object>(
  (_props, ref) => {
-    const bottomSheetModalRef = useRef<BottomSheetModal>(null);
+    const bottomSheetModalRef = useRef<BottomSheetMethods>(null);
    const [currentItem, setCurrentItem] = React.useState<BaseItemDto | null>(
      null,
    );
@@ -283,23 +283,13 @@ export const WatchlistSheet = forwardRef<WatchlistSheetRef, object>(
      bottomSheetModalRef.current?.dismiss();
    }, []);

-    const renderBackdrop = useCallback(
-      (props: BottomSheetBackdropProps) => (
-        <BottomSheetBackdrop
-          {...props}
-          disappearsOnIndex={-1}
-          appearsOnIndex={0}
-        />
-      ),
-      [],
-    );
+    if (Platform.isTV) return null;

    return (
      <BottomSheetModal
        ref={bottomSheetModalRef}
+        enablePanDownToClose
        enableDynamicSizing
-        maxDynamicContentSize={600}
-        backdropComponent={renderBackdrop}
        handleIndicatorStyle={{
          backgroundColor: "white",
        }}
--- a/package.json
+++ b/package.json
@@ -32,7 +32,6 @@
    "@expo/react-native-action-sheet": "^4.1.1",
    "@expo/ui": "~56.0.14",
    "@expo/vector-icons": "^15.0.3",
-    "@gorhom/bottom-sheet": "5.2.14",
    "@jellyfin/sdk": "^0.13.0",
    "@react-native-community/netinfo": "^12.0.0",
    "@react-navigation/material-top-tabs": "7.4.28",
--- a/providers/GlobalModalProvider.tsx
+++ b/providers/GlobalModalProvider.tsx
@@ -1,4 +1,3 @@
-import type { BottomSheetModal } from "@gorhom/bottom-sheet";
 import type React from "react";
 import {
  createContext,
@@ -11,6 +10,7 @@ import {
 } from "react";

 import { BackHandler, Platform } from "react-native";
+import type { BottomSheetMethods } from "@/utils/expoUiBottomSheet";

 interface ModalOptions {
  enableDynamicSizing?: boolean;
@@ -30,7 +30,7 @@ interface GlobalModalContextType {
  hideModal: () => void;
  isVisible: boolean;
  modalState: GlobalModalState;
-  modalRef: React.RefObject<BottomSheetModal | null>;
+  modalRef: React.RefObject<BottomSheetMethods | null>;
 }

 const GlobalModalContext = createContext<GlobalModalContextType | undefined>(
@@ -57,7 +57,7 @@ export const GlobalModalProvider: React.FC<GlobalModalProviderProps> = ({
    options: undefined,
  });
  const [isVisible, setIsVisible] = useState(false);
-  const modalRef = useRef<BottomSheetModal>(null);
+  const modalRef = useRef<BottomSheetMethods>(null);

  const showModal = useCallback(
    (content: ReactNode, options?: ModalOptions) => {
--- a/utils/expoUiBottomSheet.ts
+++ b/utils/expoUiBottomSheet.ts
@@ -0,0 +1,40 @@
+import { Platform } from "react-native";
+
+/**
+ * TV-safe re-exports of `@expo/ui/community/bottom-sheet`.
+ *
+ * `@expo/ui` resolves its SwiftUI bridge at module load via
+ * `requireNativeModule('ExpoUI')`. That native module does not exist on tvOS,
+ * so a static top-level import from any route file crashes the whole route
+ * tree (expo-router eagerly loads every route).
+ *
+ * We `require()` the module lazily and only when *not* on tvOS. On TV the
+ * exported components are `undefined`, which is fine because every call site
+ * must early-return (`if (Platform.isTV) return null;`) before rendering a
+ * bottom sheet.
+ *
+ * Usage:
+ *
+ *   import {
+ *     BottomSheetModal,
+ *     BottomSheetView,
+ *     type BottomSheetMethods,
+ *   } from "@/utils/expoUiBottomSheet";
+ *
+ *   const ref = useRef<BottomSheetMethods>(null);
+ *
+ *   if (Platform.isTV) return null;
+ *   return <BottomSheetModal ref={ref}>...</BottomSheetModal>;
+ */
+type BottomSheetMod = typeof import("@expo/ui/community/bottom-sheet");
+
+const mod: BottomSheetMod = Platform.isTV
+  ? ({} as BottomSheetMod)
+  : (require("@expo/ui/community/bottom-sheet") as BottomSheetMod);
+
+export const BottomSheetModal = mod.BottomSheetModal;
+export const BottomSheetView = mod.BottomSheetView;
+export const BottomSheetScrollView = mod.BottomSheetScrollView;
+export const BottomSheetTextInput = mod.BottomSheetTextInput;
+
+export type { BottomSheetMethods } from "@expo/ui/community/bottom-sheet";
Author	SHA1	Message	Date
Alex Kim	c6055503a5	Merge branch 'develop' into chore/migrate-bottom-sheet-to-expo-ui	2026-05-31 23:45:59 +10:00
Alex Kim	ebc86473ff	Improve look of download button in the download sheet	2026-05-31 23:39:14 +10:00
Alex Kim	27f6f6b056	Merge branch 'develop' into chore/migrate-bottom-sheet-to-expo-ui	2026-05-31 22:15:58 +10:00
Alex Kim	8cf9a8d584	chore(bottom-sheet): Migrate to expo-ui bottom sheet	2026-05-31 21:49:32 +10:00