Start work on pickers that work on android+ios

MassiveFab.tsx

@@ -17,8 +17,8 @@ export default function MassiveFab(props: Partial<ComponentProps<typeof FAB>>) {
       color={fabColor}
       style={{
         position: 'absolute',
-        right: 10,
-        bottom: 10,
+        right: 20,
+        bottom: 20,
         backgroundColor: color,
       }}
       {...props}

Select.tsx

@@ -1,24 +1,29 @@
-import {Picker} from '@react-native-picker/picker'
 import {useTheme} from 'react-native-paper'
+import RNPickerSelect from 'react-native-picker-select'
+import {Item} from 'react-native-picker-select'
 
 export default function Select({
   value,
   onChange,
-  children,
+  items,
 }: {
   value: string
   onChange: (value: string) => void
-  children: JSX.Element | JSX.Element[]
+  items: Item[]
 }) {
   const {colors} = useTheme()
 
   return (
-    <Picker
-      style={{color: colors.primary, marginTop: -10}}
-      dropdownIconColor={colors.text}
-      selectedValue={value}
-      onValueChange={onChange}>
-      {children}
-    </Picker>
+    <RNPickerSelect
+      style={{
+        placeholder: {
+          color: 'white',
+        },
+      }}
+      placeholder="Hello, world!"
+      value={value}
+      onValueChange={onChange}
+      items={items}
+    />
   )
 }

SetForm.tsx

@@ -151,6 +151,7 @@ export default function SetForm({
       </View>
 
       <Button
+        style={{margin: MARGIN * 2}}
         disabled={!name}
         mode="contained"
         icon="save"

SettingsPage.tsx

@@ -1,4 +1,3 @@
-import {Picker} from '@react-native-picker/picker'
 import {useFocusEffect} from '@react-navigation/native'
 import {format} from 'date-fns'
 import {useCallback, useMemo, useState} from 'react'
@@ -229,34 +228,36 @@ export default function SettingsPage() {
           />
           <View style={{marginBottom: MARGIN}} />
           {'theme'.includes(term.toLowerCase()) && (
-            <Select value={theme} onChange={changeTheme}>
-              <Picker.Item value="system" label="Follow system theme" />
-              <Picker.Item value="dark" label="Dark theme" />
-              <Picker.Item value="light" label="Light theme" />
-            </Select>
+            <Select
+              value={theme}
+              onChange={changeTheme}
+              items={[
+                {label: 'Follow system theme', value: 'system'},
+                {label: 'Dark theme', value: 'dark'},
+                {label: 'Light theme', value: 'light'},
+              ]}
+            />
           )}
           {'color'.includes(term.toLowerCase()) && (
-            <Select value={color} onChange={changeColor}>
-              {lightColors.concat(darkColors).map(colorOption => (
-                <Picker.Item
-                  key={colorOption}
-                  value={colorOption}
-                  label="Primary color"
-                  color={colorOption}
-                />
-              ))}
-            </Select>
+            <Select
+              value={color}
+              onChange={changeColor}
+              items={lightColors.concat(darkColors).map(colorOption => ({
+                label: 'Primary color',
+                value: colorOption,
+                color: colorOption,
+              }))}
+            />
           )}
           {'date format'.includes(term.toLowerCase()) && (
-            <Select value={date} onChange={changeDate}>
-              {formatOptions.map(option => (
-                <Picker.Item
-                  key={option}
-                  value={option}
-                  label={format(today, option)}
-                />
-              ))}
-            </Select>
+            <Select
+              value={date}
+              onChange={changeDate}
+              items={formatOptions.map(option => ({
+                label: format(today, option),
+                value: option,
+              }))}
+            />
           )}
           {'alarm sound'.includes(term.toLowerCase()) && (
             <Button style={{alignSelf: 'flex-start'}} onPress={changeSound}>

package.json

@@ -39,6 +39,7 @@
     "react-native-linear-gradient": "^2.6.2",
     "react-native-pager-view": "^6.0.1",
     "react-native-paper": "^4.12.5",
+    "react-native-picker-select": "^8.0.4",
     "react-native-reanimated": "^2.12.0",
     "react-native-safe-area-context": "^4.4.1",
     "react-native-screens": "^3.18.2",

yarn.lock

@@ -2200,6 +2200,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@react-native-picker/picker@npm:^1.8.3":
+  version: 1.16.8
+  resolution: "@react-native-picker/picker@npm:1.16.8"
+  peerDependencies:
+    react: 16 || 17
+    react-native: ">=0.57"
+  checksum: c0176e41ba7486bf0a27ab5471315848cb166330313bd12e29ee65b7d2e1dfde22383de6a89be15770d132b33bca1764e64feee3acf22c67c3733fd877d3e91f
+  languageName: node
+  linkType: hard
+
 "@react-native-picker/picker@npm:^2.4.4":
   version: 2.4.8
   resolution: "@react-native-picker/picker@npm:2.4.8"
@@ -7314,6 +7324,7 @@ __metadata:
     react-native-linear-gradient: ^2.6.2
     react-native-pager-view: ^6.0.1
     react-native-paper: ^4.12.5
+    react-native-picker-select: ^8.0.4
     react-native-reanimated: ^2.12.0
     react-native-safe-area-context: ^4.4.1
     react-native-screens: ^3.18.2
@@ -8896,6 +8907,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-picker-select@npm:^8.0.4":
+  version: 8.0.4
+  resolution: "react-native-picker-select@npm:8.0.4"
+  dependencies:
+    "@react-native-picker/picker": ^1.8.3
+    lodash.isequal: ^4.5.0
+  checksum: 9656a2f7b330a9e5a8b6b90393140fc5370762d2a14de4c5d31ce43de8abc677870c7f2ee8a493f48535157ddcbc3311cf3f41dac262bd84e50e913f0d4a24ff
+  languageName: node
+  linkType: hard
+
 "react-native-reanimated@npm:^2.12.0":
   version: 2.12.0
   resolution: "react-native-reanimated@npm:2.12.0"