Start work on pickers that work on android+ios
This commit is contained in:
parent
f04125efc5
commit
162d67c351
|
@ -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}
|
||||
|
|
25
Select.tsx
25
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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -151,6 +151,7 @@ export default function SetForm({
|
|||
</View>
|
||||
|
||||
<Button
|
||||
style={{margin: MARGIN * 2}}
|
||||
disabled={!name}
|
||||
mode="contained"
|
||||
icon="save"
|
||||
|
|
|
@ -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
|
||||
value={color}
|
||||
onChange={changeColor}
|
||||
items={lightColors.concat(darkColors).map(colorOption => ({
|
||||
label: 'Primary color',
|
||||
value: colorOption,
|
||||
color: colorOption,
|
||||
}))}
|
||||
/>
|
||||
))}
|
||||
</Select>
|
||||
)}
|
||||
{'date format'.includes(term.toLowerCase()) && (
|
||||
<Select value={date} onChange={changeDate}>
|
||||
{formatOptions.map(option => (
|
||||
<Picker.Item
|
||||
key={option}
|
||||
value={option}
|
||||
label={format(today, option)}
|
||||
<Select
|
||||
value={date}
|
||||
onChange={changeDate}
|
||||
items={formatOptions.map(option => ({
|
||||
label: format(today, option),
|
||||
value: option,
|
||||
}))}
|
||||
/>
|
||||
))}
|
||||
</Select>
|
||||
)}
|
||||
{'alarm sound'.includes(term.toLowerCase()) && (
|
||||
<Button style={{alignSelf: 'flex-start'}} onPress={changeSound}>
|
||||
|
|
|
@ -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",
|
||||
|
|
21
yarn.lock
21
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"
|
||||
|
|
Loading…
Reference in New Issue
Block a user