diff --git a/LabelledButton.tsx b/LabelledButton.tsx
new file mode 100644
index 00000000..5a219cb6
--- /dev/null
+++ b/LabelledButton.tsx
@@ -0,0 +1,25 @@
+import {View} from 'react-native'
+import {ITEM_PADDING} from './constants'
+import {Button, Subheading} from 'react-native-paper'
+
+export default function LabelledButton({
+ label,
+ onPress,
+ children,
+}: {
+ label?: string
+ onPress: () => void
+ children: string
+}) {
+ return (
+
+ {label}
+
+
+ )
+}
diff --git a/SettingsPage.tsx b/SettingsPage.tsx
index a0840565..8bf0edbc 100644
--- a/SettingsPage.tsx
+++ b/SettingsPage.tsx
@@ -6,7 +6,7 @@ import {
import {format} from 'date-fns'
import {useCallback, useEffect, useMemo, useState} from 'react'
import {Controller, useForm} from 'react-hook-form'
-import {DeviceEventEmitter, NativeModules, Platform, View} from 'react-native'
+import {NativeModules, Platform, View} from 'react-native'
import DocumentPicker from 'react-native-document-picker'
import {Dirs, FileSystem} from 'react-native-file-access'
import {Button, Subheading} from 'react-native-paper'
@@ -16,6 +16,7 @@ import {AppDataSource} from './data-source'
import {setRepo, settingsRepo} from './db'
import {DrawerParamList} from './drawer-param-list'
import DrawerHeader from './DrawerHeader'
+import LabelledButton from './LabelledButton'
import {darkOptions, lightOptions, themeOptions} from './options'
import Page from './Page'
import Select from './Select'
@@ -41,16 +42,12 @@ export default function SettingsPage() {
useEffect(() => {
if (Object.keys(settings).length === 0) return
- console.log(`${SettingsPage.name}.update`)
+ console.log(`${SettingsPage.name}.update`, {settings})
settingsRepo.update({}, settings)
setLightColor(settings.lightColor)
setDarkColor(settings.darkColor)
setTheme(settings.theme)
if (!settings.alarm || ignoring) return
- DeviceEventEmitter.emit('toast', {
- value: 'Timers will now run after each set',
- timeout: 4000,
- })
NativeModules.SettingsModule.ignoreBattery()
setIgnoring(true)
}, [settings, setDarkColor, setLightColor, setTheme, ignoring])
@@ -86,21 +83,9 @@ export default function SettingsPage() {
const renderSwitch = useCallback(
(key: keyof Settings) => (
- (
- {
- onChange(!value)
- }}
- onChange={onChange}>
- {toSentenceCase(key)}
-
- )}
- />
+
+ {toSentenceCase(key)}
+
),
[control],
)
@@ -185,48 +170,34 @@ export default function SettingsPage() {
toast('Database exported. Check downloads.')
}, [])
- const buttons = useMemo(
- () => [
- {
- name: 'Alarm sound',
- element: (
-
- Alarm sound
-
-
- ),
- },
- {
- name: 'Export database',
- element: (
-
- ),
- },
- {
- name: 'Import database',
- element: (
-
- ),
- },
- ],
- [changeSound, exportDatabase, soundString],
- )
+ const buttons = [
+ {
+ name: 'Alarm sound',
+ element: (
+
+ {soundString || 'Default'}
+
+ ),
+ },
+ {
+ name: 'Export database',
+ element: (
+
+ ),
+ },
+ {
+ name: 'Import database',
+ element: (
+
+ ),
+ },
+ ]
return (
<>
diff --git a/Switch.tsx b/Switch.tsx
index f0c1302a..d37cc6d5 100644
--- a/Switch.tsx
+++ b/Switch.tsx
@@ -1,36 +1,41 @@
+import {Control, Controller} from 'react-hook-form'
import {Platform, Pressable} from 'react-native'
import {Switch as PaperSwitch, Text, useTheme} from 'react-native-paper'
import {MARGIN} from './constants'
export default function Switch({
- value,
- onChange,
- onPress,
+ control,
+ name,
children,
}: {
- value?: boolean
- onChange: (value: boolean) => void
- onPress: () => void
+ name: string
+ control: Control
children: string
}) {
const {colors} = useTheme()
return (
-
-
- {children}
-
+ (
+ onChange(!value)}
+ style={{
+ flexDirection: 'row',
+ flexWrap: 'wrap',
+ alignItems: 'center',
+ marginBottom: Platform.OS === 'ios' ? MARGIN : null,
+ }}>
+
+ {children}
+
+ )}
+ />
)
}