Simplify process of enabling rest timers

Page.tsx

@@ -1,4 +1,4 @@
-import {StyleSheet, View} from 'react-native'
+import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native'
 import {Searchbar} from 'react-native-paper'
 import {PADDING} from './constants'
 import MassiveFab from './MassiveFab'
@@ -8,14 +8,16 @@ export default function Page({
   children,
   term,
   search,
+  style,
 }: {
   children: JSX.Element | JSX.Element[]
   onAdd?: () => void
   term: string
   search: (value: string) => void
+  style?: StyleProp<ViewStyle>
 }) {
   return (
-    <View style={styles.container}>
+    <View style={[styles.view, style]}>
       <Searchbar
         placeholder="Search"
         value={term}
@@ -30,8 +32,8 @@ export default function Page({
 }
 
 const styles = StyleSheet.create({
-  container: {
+  view: {
-    flexGrow: 1,
     padding: PADDING,
+    flexGrow: 1,
   },
 })

SettingsPage.tsx

@@ -6,12 +6,10 @@ import {
   FlatList,
   NativeModules,
   Platform,
-  View,
 } from 'react-native'
 import DocumentPicker from 'react-native-document-picker'
 import {Button} from 'react-native-paper'
 import {darkColors, lightColors} from './colors'
-import ConfirmDialog from './ConfirmDialog'
 import {MARGIN} from './constants'
 import {settingsRepo} from './db'
 import DrawerHeader from './DrawerHeader'
@@ -25,7 +23,6 @@ import {useTheme} from './use-theme'
 const defaultFormats = ['P', 'Pp', 'ccc p', 'p']
 
 export default function SettingsPage() {
-  const [battery, setBattery] = useState(false)
   const [ignoring, setIgnoring] = useState(false)
   const [term, setTerm] = useState('')
   const [vibrate, setVibrate] = useState(false)
@@ -76,11 +73,11 @@ export default function SettingsPage() {
           timeout: 4000,
         })
       else toast('Stopped timers running after each set.')
-      if (enabled && !ignoring) setBattery(true)
+      if (enabled && !ignoring) NativeModules.SettingsModule.ignoreBattery()
       setAlarm(enabled)
       settingsRepo.update({}, {alarm: enabled})
     },
-    [setBattery, ignoring],
+    [ignoring],
   )
 
   const changeVibrate = useCallback((enabled: boolean) => {
@@ -227,74 +224,62 @@ export default function SettingsPage() {
   return (
     <>
       <DrawerHeader name="Settings" />
-      <Page term={term} search={setTerm}>
+      <Page term={term} search={setTerm} style={{flexGrow: 0}}>
-        <View>
+        <FlatList
-          <FlatList
+          style={{marginTop: MARGIN}}
-            style={{marginTop: MARGIN}}
+          data={switches}
-            data={switches}
+          renderItem={renderItem}
-            renderItem={renderItem}
+        />
+        {'theme'.includes(term.toLowerCase()) && (
+          <Select
+            value={theme}
+            onChange={changeTheme}
+            items={[
+              {label: 'Follow system theme', value: 'system'},
+              {label: 'Dark theme', value: 'dark'},
+              {label: 'Light theme', value: 'light'},
+            ]}
           />
-          {'theme'.includes(term.toLowerCase()) && (
+        )}
-            <Select
+        {'date format'.includes(term.toLowerCase()) && (
-              value={theme}
+          <Select
-              onChange={changeTheme}
+            value={date}
-              items={[
+            onChange={changeDate}
-                {label: 'Follow system theme', value: 'system'},
+            items={formatOptions.map(option => ({
-                {label: 'Dark theme', value: 'dark'},
+              label: `Date format: ${format(today, option)}`,
-                {label: 'Light theme', value: 'light'},
+              value: option,
-              ]}
+            }))}
-            />
+          />
-          )}
+        )}
-          {'date format'.includes(term.toLowerCase()) && (
+        {'color'.includes(term.toLowerCase()) && (
-            <Select
+          <Select
-              value={date}
+            value={darkColor}
-              onChange={changeDate}
+            onChange={changeDarkColor}
-              items={formatOptions.map(option => ({
+            items={lightColors.map(colorOption => ({
-                label: `Date format: ${format(today, option)}`,
+              label: 'Dark color',
-                value: option,
+              value: colorOption,
-              }))}
+              color: colorOption,
-            />
+            }))}
-          )}
+          />
-          {'color'.includes(term.toLowerCase()) && (
+        )}
-            <Select
+        {'color'.includes(term.toLowerCase()) && (
-              value={darkColor}
+          <Select
-              onChange={changeDarkColor}
+            value={lightColor}
-              items={lightColors.map(colorOption => ({
+            onChange={changeLightColor}
-                label: 'Dark color',
+            items={darkColors.map(colorOption => ({
-                value: colorOption,
+              label: 'Light color',
-                color: colorOption,
+              value: colorOption,
-              }))}
+              color: colorOption,
-            />
+            }))}
-          )}
+          />
-          {'color'.includes(term.toLowerCase()) && (
+        )}
-            <Select
+        {'alarm sound'.includes(term.toLowerCase()) && (
-              value={lightColor}
+          <Button
-              onChange={changeLightColor}
+            style={{alignSelf: 'flex-start', marginTop: MARGIN}}
-              items={darkColors.map(colorOption => ({
+            onPress={changeSound}>
-                label: 'Light color',
+            Alarm sound{soundString}
-                value: colorOption,
+          </Button>
-                color: colorOption,
+        )}
-              }))}
-            />
-          )}
-          {'alarm sound'.includes(term.toLowerCase()) && (
-            <Button
-              style={{alignSelf: 'flex-start', marginTop: MARGIN}}
-              onPress={changeSound}>
-              Alarm sound{soundString}
-            </Button>
-          )}
-        </View>
-        <ConfirmDialog
-          title="Battery optimizations"
-          show={battery}
-          setShow={setBattery}
-          onOk={() => {
-            NativeModules.SettingsModule.ignoreBattery()
-            setBattery(false)
-          }}>
-          Disable battery optimizations for Massive to use rest timers.
-        </ConfirmDialog>
       </Page>
     </>
   )