use switch instead of a checkbox

package.json

@@ -15,7 +15,6 @@
   "dependencies": {
     "@react-native-async-storage/async-storage": "^1.17.11",
     "@react-native-community/blur": "^4.3.0",
-    "@react-native-community/checkbox": "^0.5.13",
     "@react-native-community/netinfo": "^9.3.6",
     "@react-navigation/bottom-tabs": "^6.4.0",
     "@react-navigation/elements": "^1.3.17",
@@ -47,7 +46,6 @@
     "react-native-reanimated": "^3.6.2",
     "react-native-safe-area-context": "^4.4.1",
     "react-native-screens": "^3.18.2",
-    "react-native-select-dropdown": "^3.3.4",
     "react-native-shadow-2": "^7.0.6",
     "react-native-skia": "^0.0.1",
     "react-native-svg": "^13.5.0",

src/localisation/lang/en/locale.json

@@ -71,5 +71,6 @@
     "color-scheme-light": "Light Mode",
     "color-scheme-dark": "Dark Mode",
     "artists": "Artists",
-    "privacy-policy": "Privacy Policy"
+    "privacy-policy": "Privacy Policy",
+    "enable-sleeper": "Enable Sleeper"
 }

src/localisation/types.ts

@@ -70,3 +70,4 @@ export type LocaleKeys = 'play-next'
 | 'artists'
 | 'privacy-policy'
 | 'timer'
+| 'timer'

src/screens/Settings/index.tsx

@@ -50,10 +50,7 @@ export function SettingsList() {
     return (
         <SafeScrollView>
             <ListButton onPress={handleLibraryClick}>{t('jellyfin-library')}</ListButton>
-            <ListButton onPress={handleTimerClick}>
-                {t('timer')}
-                <Text> {`Set Time: ${getTime()}s`}</Text>
-            </ListButton>
+            <ListButton onPress={handleTimerClick}>{t('timer')}</ListButton>
             <ListButton onPress={handleCacheClick}>{t('setting-cache')}</ListButton>
             <ListButton onPress={handleSentryClick}>{t('error-reporting')}</ListButton>
             <ListButton onPress={handlePlaybackReportingClick}>{t('playback-reporting')}</ListButton>

src/screens/Settings/stacks/timer/Timer.tsx

@@ -18,6 +18,9 @@ import SelectDropdown from 'react-native-select-dropdown';
 import { time } from 'console';
 import CheckBox from '@react-native-community/checkbox';
 import TrackPlayer from 'react-native-track-player';
+import { Switch } from 'react-native-gesture-handler';
+import { SwitchContainer, SwitchLabel } from '../../components/Switch';
+import { t } from '@/localisation';
 
 function Timer() {
     const { sleepTime } = useTypedSelector(state => state.settings);
@@ -53,7 +56,7 @@ function Timer() {
         }
 
         return `${hours} hrs ${minutes} min`;
-    }
+    };
 
     const handleEnabledSleeper = useCallback((value: boolean) => {
         dispatch(setEnabledSleeper(value));
@@ -62,8 +65,8 @@ function Timer() {
         // If value is true sleeper has been enabled, pause then play tack
         // to trigger play state and start sleeper timer
         if (value) {
-            TrackPlayer.pause()
-            TrackPlayer.play()
+            TrackPlayer.pause();
+            TrackPlayer.play();
         }
     }, [dispatch]);
 
@@ -71,13 +74,13 @@ function Timer() {
         <Container>
             <InputContainer>
                 <Text>Set Sleep Timer. Time Set Previously: {getTime()}</Text>
-                <View style={timerStyles.checkbox}>
-                    <CheckBox
+                <SwitchContainer style={timerStyles.checkbox}>
+                    <Switch
                         value={enableSleeper}
                         onValueChange={(value) => handleEnabledSleeper(value)}
                     />
-                    <Text> Enable Sleeper</Text>
-                </View>
+                    <SwitchLabel>{t('enable-sleeper')}</SwitchLabel>
+                </SwitchContainer>
                 <View style={enabledSleeper ? timerStyles.timerSetting : timerStyles.timerSettingsDisabled}>
                     <View style={timerStyles.timer}>
                         <View style={timerStyles.timeInput}>