fix(settings): tidy spacing, uniform Android row heights & toggle layout

- spacing: top padding + inter-group gaps so section titles, descriptions and buttons no longer touch (playback buffer, audio/subtitles, music, marlin, kefin, streamystats, storage, hide-libraries) - ListGroup: skip empty section titles - SettingSwitch: cap the native Android switch in a fixed centered box so toggle rows match the other rows and stay put when toggled; iOS unchanged - Appearance: move "Hide libraries" to the end of the list
2026-06-25 15:20:34 +01:00 · 2026-06-24 22:21:06 +02:00
parent 91ea791663
commit 2ac664de5a
21 changed files with 128 additions and 68 deletions
--- a/app/(auth)/(tabs)/(home)/settings/appearance/hide-libraries/page.tsx
+++ b/app/(auth)/(tabs)/(home)/settings/appearance/hide-libraries/page.tsx
@@ -2,8 +2,9 @@ import { getUserViewsApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
 import { useAtomValue } from "jotai";
 import { useTranslation } from "react-i18next";
-import { ScrollView, Switch, View } from "react-native";
+import { ScrollView, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { SettingSwitch } from "@/components/common/SettingSwitch";
 import { Text } from "@/components/common/Text";
 import { Loader } from "@/components/Loader";
 import { ListGroup } from "@/components/list/ListGroup";
@@ -50,12 +51,12 @@ export default function AppearanceHideLibrariesPage() {
    >
      <DisabledSetting
        disabled={pluginSettings?.hiddenLibraries?.locked === true}
-        className='px-4'
+        className='px-4 pt-4'
      >
        <ListGroup title={t("home.settings.other.hide_libraries")}>
          {data?.map((view) => (
            <ListItem key={view.Id} title={view.Name} onPress={() => {}}>
-              <Switch
+              <SettingSwitch
                value={settings.hiddenLibraries?.includes(view.Id!) || false}
                onValueChange={(value) => {
                  updateSettings({
--- a/app/(auth)/(tabs)/(home)/settings/hide-libraries/page.tsx
+++ b/app/(auth)/(tabs)/(home)/settings/hide-libraries/page.tsx
@@ -2,7 +2,8 @@ import { getUserViewsApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
 import { useAtomValue } from "jotai";
 import { useTranslation } from "react-i18next";
-import { Switch, View } from "react-native";
+import { View } from "react-native";
+import { SettingSwitch } from "@/components/common/SettingSwitch";
 import { Text } from "@/components/common/Text";
 import { Loader } from "@/components/Loader";
 import { ListGroup } from "@/components/list/ListGroup";
@@ -46,7 +47,7 @@ export default function HideLibrariesPage() {
      <ListGroup>
        {data?.map((view) => (
          <ListItem key={view.Id} title={view.Name} onPress={() => {}}>
-            <Switch
+            <SettingSwitch
              value={settings.hiddenLibraries?.includes(view.Id!) || false}
              onValueChange={(value) => {
                updateSettings({
--- a/app/(auth)/(tabs)/(home)/settings/music/page.tsx
+++ b/app/(auth)/(tabs)/(home)/settings/music/page.tsx
@@ -3,9 +3,9 @@ import { useQuery } from "@tanstack/react-query";
 import { useCallback, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { Platform, ScrollView, View } from "react-native";
-import { Switch } from "react-native-gesture-handler";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { toast } from "sonner-native";
+import { SettingSwitch } from "@/components/common/SettingSwitch";
 import { Text } from "@/components/common/Text";
 import { ListGroup } from "@/components/list/ListGroup";
 import { ListItem } from "@/components/list/ListItem";
@@ -136,7 +136,7 @@ export default function MusicSettingsPage() {
            title={t("home.settings.music.prefer_downloaded")}
            disabled={pluginSettings?.preferLocalAudio?.locked}
          >
-            <Switch
+            <SettingSwitch
              value={settings.preferLocalAudio}
              disabled={pluginSettings?.preferLocalAudio?.locked}
              onValueChange={(value) =>
@@ -159,7 +159,7 @@ export default function MusicSettingsPage() {
              title={t("home.settings.music.lookahead_enabled")}
              disabled={pluginSettings?.audioLookaheadEnabled?.locked}
            >
-              <Switch
+              <SettingSwitch
                value={settings.audioLookaheadEnabled}
                disabled={pluginSettings?.audioLookaheadEnabled?.locked}
                onValueChange={(value) =>
@@ -233,7 +233,7 @@ export default function MusicSettingsPage() {
                })}
              />
            </ListGroup>
-            <ListGroup>
+            <ListGroup className='mt-4'>
              <ListItem
                textColor='red'
                onPress={onDeleteDownloadedSongsClicked}
--- a/app/(auth)/(tabs)/(home)/settings/playback-controls/page.tsx
+++ b/app/(auth)/(tabs)/(home)/settings/playback-controls/page.tsx
@@ -17,13 +17,14 @@ export default function PlaybackControlsPage() {
      contentContainerStyle={{
        paddingLeft: insets.left,
        paddingRight: insets.right,
+        paddingBottom: insets.bottom,
      }}
    >
      <View
        className='p-4 flex flex-col'
        style={{ paddingTop: Platform.OS === "android" ? 10 : 0 }}
      >
-        <View className='mb-4'>
+        <View>
          <MediaProvider>
            <MediaToggles className='mb-4' />
            <GestureControls className='mb-4' />
--- a/app/(auth)/(tabs)/(home)/settings/plugins/kefinTweaks/page.tsx
+++ b/app/(auth)/(tabs)/(home)/settings/plugins/kefinTweaks/page.tsx
@@ -13,7 +13,7 @@ export default function KefinTweaksPage() {
        paddingRight: insets.right,
      }}
    >
-      <View className='px-4'>
+      <View className='px-4 pt-4'>
        <KefinTweaksSettings />
      </View>
    </ScrollView>
--- a/app/(auth)/(tabs)/(home)/settings/plugins/marlin-search/page.tsx
+++ b/app/(auth)/(tabs)/(home)/settings/plugins/marlin-search/page.tsx
@@ -4,13 +4,13 @@ import { useTranslation } from "react-i18next";
 import {
  Linking,
  ScrollView,
-  Switch,
  TextInput,
  TouchableOpacity,
  View,
 } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { toast } from "sonner-native";
+import { SettingSwitch } from "@/components/common/SettingSwitch";
 import { Text } from "@/components/common/Text";
 import { ListGroup } from "@/components/list/ListGroup";
 import { ListItem } from "@/components/list/ListItem";
@@ -65,7 +65,7 @@ export default function MarlinSearchPage() {
        paddingRight: insets.right,
      }}
    >
-      <View className='px-4'>
+      <View className='px-4 pt-4'>
        <ListGroup>
          {/* disabledByAdmin renders the "Disabled by admin" notice as the row's
              subtitle (same pattern as the Streamystats settings) — no clipping. */}
@@ -79,7 +79,7 @@ export default function MarlinSearchPage() {
              queryClient.invalidateQueries({ queryKey: ["search"] });
            }}
          >
-            <Switch
+            <SettingSwitch
              value={settings.searchEngine === "Marlin"}
              disabled={searchEngineLocked || hasStreamystats}
              onValueChange={(val) => {
--- a/app/(auth)/(tabs)/(home)/settings/plugins/streamystats/page.tsx
+++ b/app/(auth)/(tabs)/(home)/settings/plugins/streamystats/page.tsx
@@ -4,13 +4,13 @@ import { useTranslation } from "react-i18next";
 import {
  Linking,
  ScrollView,
-  Switch,
  TextInput,
  TouchableOpacity,
  View,
 } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { toast } from "sonner-native";
+import { SettingSwitch } from "@/components/common/SettingSwitch";
 import { Text } from "@/components/common/Text";
 import { ListGroup } from "@/components/list/ListGroup";
 import { ListItem } from "@/components/list/ListItem";
@@ -132,7 +132,7 @@ export default function StreamystatsPage() {
        paddingRight: insets.right,
      }}
    >
-      <View className='px-4'>
+      <View className='px-4 pt-4'>
        <ListGroup className='flex-1'>
          <ListItem
            title={t("home.settings.plugins.streamystats.url")}
@@ -174,7 +174,7 @@ export default function StreamystatsPage() {
            {/* Locked controls show the live admin value and can't be toggled —
                local form state would let the switch flip while the write guard
                drops the change. */}
-            <Switch
+            <SettingSwitch
              value={
                searchLocked
                  ? settings?.searchEngine === "Streamystats"
@@ -190,7 +190,7 @@ export default function StreamystatsPage() {
            )}
            disabledByAdmin={movieRecsLocked}
          >
-            <Switch
+            <SettingSwitch
              value={
                movieRecsLocked
                  ? (settings?.streamyStatsMovieRecommendations ?? false)
@@ -206,7 +206,7 @@ export default function StreamystatsPage() {
            )}
            disabledByAdmin={seriesRecsLocked}
          >
-            <Switch
+            <SettingSwitch
              value={
                seriesRecsLocked
                  ? (settings?.streamyStatsSeriesRecommendations ?? false)
@@ -222,7 +222,7 @@ export default function StreamystatsPage() {
            )}
            disabledByAdmin={promotedWatchlistsLocked}
          >
-            <Switch
+            <SettingSwitch
              value={
                promotedWatchlistsLocked
                  ? (settings?.streamyStatsPromotedWatchlists ?? false)
@@ -236,7 +236,7 @@ export default function StreamystatsPage() {
            title={t("home.settings.plugins.streamystats.hide_watchlists_tab")}
            disabledByAdmin={hideWatchlistsTabLocked}
          >
-            <Switch
+            <SettingSwitch
              value={
                hideWatchlistsTabLocked
                  ? (settings?.hideWatchlistsTab ?? false)
--- a/components/common/SettingSwitch.tsx
+++ b/components/common/SettingSwitch.tsx
@@ -0,0 +1,40 @@
+import type React from "react";
+import { Platform, Switch, type SwitchProps, View } from "react-native";
+
+/**
+ * Settings toggle. Android's native Switch lays out ~40px tall / ~56px wide and
+ * inflates list rows (iOS renders it ~31px). A plain `transform: scale` is
+ * visual-only and does NOT shrink the layout box, so we pin the Switch inside a
+ * FIXED-SIZE box (overflow hidden) and center it:
+ *  - the fixed height caps the row height (compact, uniform rows),
+ *  - the fixed width + centering keep the switch in the exact same spot in the
+ *    on/off states (a non-fixed wrapper let its width fluctuate between states,
+ *    which shifted the switch sideways on toggle).
+ * iOS renders the switch untouched.
+ *
+ * Tunables: BOX_H drives the row height; SCALE shrinks the visual to fit the
+ * box; keep BOX_W >= scaled visual width to avoid clipping the switch sideways.
+ */
+const BOX_W = 40;
+const BOX_H = 30;
+const SCALE = 0.9;
+
+export const SettingSwitch: React.FC<SwitchProps> = (props) => {
+  if (Platform.OS !== "android") return <Switch {...props} />;
+  return (
+    <View
+      style={{
+        width: BOX_W,
+        height: BOX_H,
+        alignItems: "center",
+        justifyContent: "center",
+        overflow: "hidden",
+      }}
+    >
+      <Switch
+        {...props}
+        style={[props.style, { transform: [{ scale: SCALE }] }]}
+      />
+    </View>
+  );
+};
--- a/components/list/ListGroup.tsx
+++ b/components/list/ListGroup.tsx
@@ -23,9 +23,11 @@ export const ListGroup: React.FC<PropsWithChildren<Props>> = ({

  return (
    <View {...props}>
-      <Text className='ml-4 mb-1 uppercase text-[#8E8D91] text-xs'>
-        {title}
-      </Text>
+      {title ? (
+        <Text className='ml-4 mb-1 uppercase text-[#8E8D91] text-xs'>
+          {title}
+        </Text>
+      ) : null}
      <View
        style={[]}
        className='flex flex-col rounded-xl overflow-hidden pl-0 bg-neutral-900'
--- a/components/list/ListItem.tsx
+++ b/components/list/ListItem.tsx
@@ -1,6 +1,6 @@
 import { Ionicons } from "@expo/vector-icons";
 import type { PropsWithChildren, ReactNode } from "react";
-import { TouchableOpacity, View, type ViewProps } from "react-native";
+import { Platform, TouchableOpacity, View, type ViewProps } from "react-native";
 import { Text } from "../common/Text";

 interface Props extends ViewProps {
@@ -34,12 +34,17 @@ export const ListItem: React.FC<PropsWithChildren<Props>> = ({
 }) => {
  const effectiveSubtitle = disabledByAdmin ? "Disabled by admin" : subtitle;
  const isDisabled = disabled || disabledByAdmin;
+  // Keep the row floor uniform; Android trims padding slightly (its native
+  // controls sit taller). Switch height is capped via SettingSwitch so toggle
+  // rows match non-toggle rows.
+  const rowSizing =
+    Platform.OS === "android" ? "min-h-[42px] py-1.5" : "min-h-[42px] py-2";
  if (onPress)
    return (
      <TouchableOpacity
        disabled={isDisabled}
        onPress={onPress}
-        className={`flex flex-row items-center justify-between bg-neutral-900 min-h-[42px] py-2 pr-4 pl-4 ${isDisabled ? "opacity-50" : ""}`}
+        className={`flex flex-row items-center justify-between bg-neutral-900 ${rowSizing} pr-4 pl-4 ${isDisabled ? "opacity-50" : ""}`}
        {...(viewProps as any)}
      >
        <ListItemContent
@@ -58,7 +63,7 @@ export const ListItem: React.FC<PropsWithChildren<Props>> = ({
    );
  return (
    <View
-      className={`flex flex-row items-center justify-between bg-neutral-900 min-h-[42px] py-2 pr-4 pl-4 ${isDisabled ? "opacity-50" : ""}`}
+      className={`flex flex-row items-center justify-between bg-neutral-900 ${rowSizing} pr-4 pl-4 ${isDisabled ? "opacity-50" : ""}`}
      {...viewProps}
    >
      <ListItemContent
--- a/components/settings/AppearanceSettings.tsx
+++ b/components/settings/AppearanceSettings.tsx
@@ -1,7 +1,8 @@
 import type React from "react";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { Linking, Switch } from "react-native";
+import { Linking } from "react-native";
+import { SettingSwitch } from "@/components/common/SettingSwitch";
 import DisabledSetting from "@/components/settings/DisabledSetting";
 import useRouter from "@/hooks/useAppRouter";
 import { useSettings } from "@/utils/atoms/settings";
@@ -34,7 +35,7 @@ export const AppearanceSettings: React.FC = () => {
            )
          }
        >
-          <Switch
+          <SettingSwitch
            value={settings.showCustomMenuLinks}
            disabled={pluginSettings?.showCustomMenuLinks?.locked}
            onValueChange={(value) =>
@@ -45,13 +46,23 @@ export const AppearanceSettings: React.FC = () => {
        <ListItem
          title={t("home.settings.appearance.merge_next_up_continue_watching")}
        >
-          <Switch
+          <SettingSwitch
            value={settings.mergeNextUpAndContinueWatching}
            onValueChange={(value) =>
              updateSettings({ mergeNextUpAndContinueWatching: value })
            }
          />
        </ListItem>
+        <ListItem
+          title={t("home.settings.appearance.hide_remote_session_button")}
+        >
+          <SettingSwitch
+            value={settings.hideRemoteSessionButton}
+            onValueChange={(value) =>
+              updateSettings({ hideRemoteSessionButton: value })
+            }
+          />
+        </ListItem>
        <ListItem
          onPress={() =>
            router.push("/settings/appearance/hide-libraries/page")
@@ -59,16 +70,6 @@ export const AppearanceSettings: React.FC = () => {
          title={t("home.settings.other.hide_libraries")}
          showArrow
        />
-        <ListItem
-          title={t("home.settings.appearance.hide_remote_session_button")}
-        >
-          <Switch
-            value={settings.hideRemoteSessionButton}
-            onValueChange={(value) =>
-              updateSettings({ hideRemoteSessionButton: value })
-            }
-          />
-        </ListItem>
      </ListGroup>
    </DisabledSetting>
  );
--- a/components/settings/AudioToggles.tsx
+++ b/components/settings/AudioToggles.tsx
@@ -2,7 +2,7 @@ import { Ionicons } from "@expo/vector-icons";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { Platform, View, type ViewProps } from "react-native";
-import { Switch } from "react-native-gesture-handler";
+import { SettingSwitch } from "@/components/common/SettingSwitch";
 import { AudioTranscodeMode, useSettings } from "@/utils/atoms/settings";
 import { Text } from "../common/Text";
 import { ListGroup } from "../list/ListGroup";
@@ -135,7 +135,7 @@ export const AudioToggles: React.FC<Props> = ({ ...props }) => {
          title={t("home.settings.audio.set_audio_track")}
          disabled={pluginSettings?.rememberAudioSelections?.locked}
        >
-          <Switch
+          <SettingSwitch
            value={settings.rememberAudioSelections}
            disabled={pluginSettings?.rememberAudioSelections?.locked}
            onValueChange={(value) =>
--- a/components/settings/ChromecastSettings.tsx
+++ b/components/settings/ChromecastSettings.tsx
@@ -1,4 +1,5 @@
-import { Switch, View } from "react-native";
+import { View } from "react-native";
+import { SettingSwitch } from "@/components/common/SettingSwitch";
 import { useSettings } from "@/utils/atoms/settings";
 import { ListGroup } from "../list/ListGroup";
 import { ListItem } from "../list/ListItem";
@@ -9,7 +10,7 @@ export const ChromecastSettings: React.FC = ({ ...props }) => {
    <View {...props}>
      <ListGroup title={"Chromecast"}>
        <ListItem title={"Enable H265 for Chromecast"}>
-          <Switch
+          <SettingSwitch
            value={settings.enableH265ForChromecast}
            onValueChange={(enableH265ForChromecast) =>
              updateSettings({ enableH265ForChromecast })
--- a/components/settings/GestureControls.tsx
+++ b/components/settings/GestureControls.tsx
@@ -2,7 +2,7 @@ import type React from "react";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import type { ViewProps } from "react-native";
-import { Switch } from "react-native";
+import { SettingSwitch } from "@/components/common/SettingSwitch";
 import DisabledSetting from "@/components/settings/DisabledSetting";
 import { useSettings } from "@/utils/atoms/settings";
 import { ListGroup } from "../list/ListGroup";
@@ -39,7 +39,7 @@ export const GestureControls: React.FC<Props> = ({ ...props }) => {
          )}
          disabled={pluginSettings?.enableHorizontalSwipeSkip?.locked}
        >
-          <Switch
+          <SettingSwitch
            value={settings.enableHorizontalSwipeSkip}
            disabled={pluginSettings?.enableHorizontalSwipeSkip?.locked}
            onValueChange={(enableHorizontalSwipeSkip) =>
@@ -55,7 +55,7 @@ export const GestureControls: React.FC<Props> = ({ ...props }) => {
          )}
          disabled={pluginSettings?.enableLeftSideBrightnessSwipe?.locked}
        >
-          <Switch
+          <SettingSwitch
            value={settings.enableLeftSideBrightnessSwipe}
            disabled={pluginSettings?.enableLeftSideBrightnessSwipe?.locked}
            onValueChange={(enableLeftSideBrightnessSwipe) =>
@@ -71,7 +71,7 @@ export const GestureControls: React.FC<Props> = ({ ...props }) => {
          )}
          disabled={pluginSettings?.enableRightSideVolumeSwipe?.locked}
        >
-          <Switch
+          <SettingSwitch
            value={settings.enableRightSideVolumeSwipe}
            disabled={pluginSettings?.enableRightSideVolumeSwipe?.locked}
            onValueChange={(enableRightSideVolumeSwipe) =>
@@ -87,7 +87,7 @@ export const GestureControls: React.FC<Props> = ({ ...props }) => {
          )}
          disabled={pluginSettings?.hideVolumeSlider?.locked}
        >
-          <Switch
+          <SettingSwitch
            value={settings.hideVolumeSlider}
            disabled={pluginSettings?.hideVolumeSlider?.locked}
            onValueChange={(hideVolumeSlider) =>
@@ -103,7 +103,7 @@ export const GestureControls: React.FC<Props> = ({ ...props }) => {
          )}
          disabled={pluginSettings?.hideBrightnessSlider?.locked}
        >
-          <Switch
+          <SettingSwitch
            value={settings.hideBrightnessSlider}
            disabled={pluginSettings?.hideBrightnessSlider?.locked}
            onValueChange={(hideBrightnessSlider) =>
--- a/components/settings/KefinTweaks.tsx
+++ b/components/settings/KefinTweaks.tsx
@@ -1,5 +1,5 @@
 import { useTranslation } from "react-i18next";
-import { Switch } from "react-native";
+import { SettingSwitch } from "@/components/common/SettingSwitch";
 import { useSettings } from "@/utils/atoms/settings";
 import { ListGroup } from "../list/ListGroup";
 import { ListItem } from "../list/ListItem";
@@ -17,7 +17,7 @@ export const KefinTweaksSettings = () => {
        title={t("home.settings.plugins.kefinTweaks.watchlist_enabler")}
        disabledByAdmin={locked}
      >
-        <Switch
+        <SettingSwitch
          value={isEnabled}
          disabled={locked}
          onValueChange={(value) => updateSettings({ useKefinTweaks: value })}
--- a/components/settings/LocalNetworkSettings.tsx
+++ b/components/settings/LocalNetworkSettings.tsx
@@ -2,8 +2,9 @@ import { Ionicons } from "@expo/vector-icons";
 import type React from "react";
 import { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Switch, TouchableOpacity, View } from "react-native";
+import { TouchableOpacity, View } from "react-native";
 import { toast } from "sonner-native";
+import { SettingSwitch } from "@/components/common/SettingSwitch";
 import { useWifiSSID } from "@/hooks/useWifiSSID";
 import { useServerUrl } from "@/providers/ServerUrlProvider";
 import { storage } from "@/utils/mmkv";
@@ -147,7 +148,10 @@ export function LocalNetworkSettings(): React.ReactElement | null {
          title={t("home.settings.network.auto_switch_enabled")}
          subtitle={t("home.settings.network.auto_switch_description")}
        >
-          <Switch value={config.enabled} onValueChange={handleToggleEnabled} />
+          <SettingSwitch
+            value={config.enabled}
+            onValueChange={handleToggleEnabled}
+          />
        </ListItem>
      </ListGroup>

--- a/components/settings/MpvSubtitleSettings.tsx
+++ b/components/settings/MpvSubtitleSettings.tsx
@@ -1,7 +1,8 @@
 import { Ionicons } from "@expo/vector-icons";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { Platform, Switch, View, type ViewProps } from "react-native";
+import { Platform, View, type ViewProps } from "react-native";
+import { SettingSwitch } from "@/components/common/SettingSwitch";
 import { Stepper } from "@/components/inputs/Stepper";
 import { Text } from "../common/Text";
 import { ListGroup } from "../list/ListGroup";
@@ -126,7 +127,7 @@ export const MpvSubtitleSettings: React.FC<Props> = ({ ...props }) => {
        )}

        <ListItem title={t("home.settings.subtitles.opaque_background")}>
-          <Switch
+          <SettingSwitch
            value={settings.mpvSubtitleBackgroundEnabled ?? false}
            onValueChange={(value) =>
              updateSettings({ mpvSubtitleBackgroundEnabled: value })
--- a/components/settings/OtherSettings.tsx
+++ b/components/settings/OtherSettings.tsx
@@ -3,8 +3,9 @@ import { TFunction } from "i18next";
 import type React from "react";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { Linking, Switch, View } from "react-native";
+import { Linking, View } from "react-native";
 import { BITRATES } from "@/components/BitrateSelector";
+import { SettingSwitch } from "@/components/common/SettingSwitch";
 import { PlatformDropdown } from "@/components/PlatformDropdown";
 import DisabledSetting from "@/components/settings/DisabledSetting";
 import useRouter from "@/hooks/useAppRouter";
@@ -132,7 +133,7 @@ export const OtherSettings: React.FC = () => {
          title={t("home.settings.other.safe_area_in_controls")}
          disabled={pluginSettings?.safeAreaInControlsEnabled?.locked}
        >
-          <Switch
+          <SettingSwitch
            value={settings.safeAreaInControlsEnabled}
            disabled={pluginSettings?.safeAreaInControlsEnabled?.locked}
            onValueChange={(value) =>
@@ -150,7 +151,7 @@ export const OtherSettings: React.FC = () => {
            )
          }
        >
-          <Switch
+          <SettingSwitch
            value={settings.showCustomMenuLinks}
            disabled={pluginSettings?.showCustomMenuLinks?.locked}
            onValueChange={(value) =>
@@ -188,7 +189,7 @@ export const OtherSettings: React.FC = () => {
          title={t("home.settings.other.disable_haptic_feedback")}
          disabled={pluginSettings?.disableHapticFeedback?.locked}
        >
-          <Switch
+          <SettingSwitch
            value={settings.disableHapticFeedback}
            disabled={pluginSettings?.disableHapticFeedback?.locked}
            onValueChange={(disableHapticFeedback) =>
--- a/components/settings/PlaybackControlsSettings.tsx
+++ b/components/settings/PlaybackControlsSettings.tsx
@@ -3,8 +3,9 @@ import { TFunction } from "i18next";
 import type React from "react";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { Switch, View } from "react-native";
+import { View } from "react-native";
 import { BITRATES } from "@/components/BitrateSelector";
+import { SettingSwitch } from "@/components/common/SettingSwitch";
 import { PlatformDropdown } from "@/components/PlatformDropdown";
 import { PLAYBACK_SPEEDS } from "@/components/PlaybackSpeedSelector";
 import DisabledSetting from "@/components/settings/DisabledSetting";
@@ -115,7 +116,7 @@ export const PlaybackControlsSettings: React.FC = () => {

  return (
    <DisabledSetting disabled={disabled}>
-      <ListGroup title={t("home.settings.other.other_title")} className=''>
+      <ListGroup title={t("home.settings.other.other_title")} className='mb-4'>
        <ListItem
          title={t("home.settings.other.video_orientation")}
          disabled={pluginSettings?.defaultVideoOrientation?.locked}
@@ -146,7 +147,7 @@ export const PlaybackControlsSettings: React.FC = () => {
          title={t("home.settings.other.safe_area_in_controls")}
          disabled={pluginSettings?.safeAreaInControlsEnabled?.locked}
        >
-          <Switch
+          <SettingSwitch
            value={settings.safeAreaInControlsEnabled}
            disabled={pluginSettings?.safeAreaInControlsEnabled?.locked}
            onValueChange={(value) =>
@@ -205,7 +206,7 @@ export const PlaybackControlsSettings: React.FC = () => {
          title={t("home.settings.other.disable_haptic_feedback")}
          disabled={pluginSettings?.disableHapticFeedback?.locked}
        >
-          <Switch
+          <SettingSwitch
            value={settings.disableHapticFeedback}
            disabled={pluginSettings?.disableHapticFeedback?.locked}
            onValueChange={(disableHapticFeedback) =>
@@ -218,7 +219,7 @@ export const PlaybackControlsSettings: React.FC = () => {
          title={t("home.settings.other.auto_play_next_episode")}
          disabled={pluginSettings?.autoPlayNextEpisode?.locked}
        >
-          <Switch
+          <SettingSwitch
            value={settings.autoPlayNextEpisode}
            disabled={pluginSettings?.autoPlayNextEpisode?.locked}
            onValueChange={(autoPlayNextEpisode) =>
--- a/components/settings/StorageSettings.tsx
+++ b/components/settings/StorageSettings.tsx
@@ -125,7 +125,7 @@ export const StorageSettings = () => {
        </View>
      </View>
      {!Platform.isTV && (
-        <ListGroup>
+        <ListGroup className={Platform.OS === "android" ? "mt-4" : undefined}>
          <ListItem
            textColor='red'
            onPress={onDeleteClicked}
--- a/components/settings/SubtitleToggles.tsx
+++ b/components/settings/SubtitleToggles.tsx
@@ -3,8 +3,8 @@ import { SubtitlePlaybackMode } from "@jellyfin/sdk/lib/generated-client";
 import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Platform, View, type ViewProps } from "react-native";
-import { Switch } from "react-native-gesture-handler";
 import { Input } from "@/components/common/Input";
+import { SettingSwitch } from "@/components/common/SettingSwitch";
 import { Stepper } from "@/components/inputs/Stepper";
 import { useSettings } from "@/utils/atoms/settings";
 import { Text } from "../common/Text";
@@ -98,6 +98,7 @@ export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
  return (
    <View {...props}>
      <ListGroup
+        className='mb-4'
        title={t("home.settings.subtitles.subtitle_title")}
        description={
          <Text className='text-[#8E8D91] text-xs'>
@@ -152,7 +153,7 @@ export const SubtitleToggles: React.FC<Props> = ({ ...props }) => {
          title={t("home.settings.subtitles.set_subtitle_track")}
          disabled={pluginSettings?.rememberSubtitleSelections?.locked}
        >
-          <Switch
+          <SettingSwitch
            value={settings.rememberSubtitleSelections}
            disabled={pluginSettings?.rememberSubtitleSelections?.locked}
            onValueChange={(value) =>