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}
|
color={fabColor}
|
||||||
style={{
|
style={{
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
right: 10,
|
right: 20,
|
||||||
bottom: 10,
|
bottom: 20,
|
||||||
backgroundColor: color,
|
backgroundColor: color,
|
||||||
}}
|
}}
|
||||||
{...props}
|
{...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 {useTheme} from 'react-native-paper'
|
||||||
|
import RNPickerSelect from 'react-native-picker-select'
|
||||||
|
import {Item} from 'react-native-picker-select'
|
||||||
|
|
||||||
export default function Select({
|
export default function Select({
|
||||||
value,
|
value,
|
||||||
onChange,
|
onChange,
|
||||||
children,
|
items,
|
||||||
}: {
|
}: {
|
||||||
value: string
|
value: string
|
||||||
onChange: (value: string) => void
|
onChange: (value: string) => void
|
||||||
children: JSX.Element | JSX.Element[]
|
items: Item[]
|
||||||
}) {
|
}) {
|
||||||
const {colors} = useTheme()
|
const {colors} = useTheme()
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Picker
|
<RNPickerSelect
|
||||||
style={{color: colors.primary, marginTop: -10}}
|
style={{
|
||||||
dropdownIconColor={colors.text}
|
placeholder: {
|
||||||
selectedValue={value}
|
color: 'white',
|
||||||
onValueChange={onChange}>
|
},
|
||||||
{children}
|
}}
|
||||||
</Picker>
|
placeholder="Hello, world!"
|
||||||
|
value={value}
|
||||||
|
onValueChange={onChange}
|
||||||
|
items={items}
|
||||||
|
/>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -151,6 +151,7 @@ export default function SetForm({
|
||||||
</View>
|
</View>
|
||||||
|
|
||||||
<Button
|
<Button
|
||||||
|
style={{margin: MARGIN * 2}}
|
||||||
disabled={!name}
|
disabled={!name}
|
||||||
mode="contained"
|
mode="contained"
|
||||||
icon="save"
|
icon="save"
|
||||||
|
|
|
@ -1,4 +1,3 @@
|
||||||
import {Picker} from '@react-native-picker/picker'
|
|
||||||
import {useFocusEffect} from '@react-navigation/native'
|
import {useFocusEffect} from '@react-navigation/native'
|
||||||
import {format} from 'date-fns'
|
import {format} from 'date-fns'
|
||||||
import {useCallback, useMemo, useState} from 'react'
|
import {useCallback, useMemo, useState} from 'react'
|
||||||
|
@ -229,34 +228,36 @@ export default function SettingsPage() {
|
||||||
/>
|
/>
|
||||||
<View style={{marginBottom: MARGIN}} />
|
<View style={{marginBottom: MARGIN}} />
|
||||||
{'theme'.includes(term.toLowerCase()) && (
|
{'theme'.includes(term.toLowerCase()) && (
|
||||||
<Select value={theme} onChange={changeTheme}>
|
<Select
|
||||||
<Picker.Item value="system" label="Follow system theme" />
|
value={theme}
|
||||||
<Picker.Item value="dark" label="Dark theme" />
|
onChange={changeTheme}
|
||||||
<Picker.Item value="light" label="Light theme" />
|
items={[
|
||||||
</Select>
|
{label: 'Follow system theme', value: 'system'},
|
||||||
|
{label: 'Dark theme', value: 'dark'},
|
||||||
|
{label: 'Light theme', value: 'light'},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
)}
|
)}
|
||||||
{'color'.includes(term.toLowerCase()) && (
|
{'color'.includes(term.toLowerCase()) && (
|
||||||
<Select value={color} onChange={changeColor}>
|
<Select
|
||||||
{lightColors.concat(darkColors).map(colorOption => (
|
value={color}
|
||||||
<Picker.Item
|
onChange={changeColor}
|
||||||
key={colorOption}
|
items={lightColors.concat(darkColors).map(colorOption => ({
|
||||||
value={colorOption}
|
label: 'Primary color',
|
||||||
label="Primary color"
|
value: colorOption,
|
||||||
color={colorOption}
|
color: colorOption,
|
||||||
/>
|
}))}
|
||||||
))}
|
/>
|
||||||
</Select>
|
|
||||||
)}
|
)}
|
||||||
{'date format'.includes(term.toLowerCase()) && (
|
{'date format'.includes(term.toLowerCase()) && (
|
||||||
<Select value={date} onChange={changeDate}>
|
<Select
|
||||||
{formatOptions.map(option => (
|
value={date}
|
||||||
<Picker.Item
|
onChange={changeDate}
|
||||||
key={option}
|
items={formatOptions.map(option => ({
|
||||||
value={option}
|
label: format(today, option),
|
||||||
label={format(today, option)}
|
value: option,
|
||||||
/>
|
}))}
|
||||||
))}
|
/>
|
||||||
</Select>
|
|
||||||
)}
|
)}
|
||||||
{'alarm sound'.includes(term.toLowerCase()) && (
|
{'alarm sound'.includes(term.toLowerCase()) && (
|
||||||
<Button style={{alignSelf: 'flex-start'}} onPress={changeSound}>
|
<Button style={{alignSelf: 'flex-start'}} onPress={changeSound}>
|
||||||
|
|
|
@ -39,6 +39,7 @@
|
||||||
"react-native-linear-gradient": "^2.6.2",
|
"react-native-linear-gradient": "^2.6.2",
|
||||||
"react-native-pager-view": "^6.0.1",
|
"react-native-pager-view": "^6.0.1",
|
||||||
"react-native-paper": "^4.12.5",
|
"react-native-paper": "^4.12.5",
|
||||||
|
"react-native-picker-select": "^8.0.4",
|
||||||
"react-native-reanimated": "^2.12.0",
|
"react-native-reanimated": "^2.12.0",
|
||||||
"react-native-safe-area-context": "^4.4.1",
|
"react-native-safe-area-context": "^4.4.1",
|
||||||
"react-native-screens": "^3.18.2",
|
"react-native-screens": "^3.18.2",
|
||||||
|
|
21
yarn.lock
21
yarn.lock
|
@ -2200,6 +2200,16 @@ __metadata:
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
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":
|
"@react-native-picker/picker@npm:^2.4.4":
|
||||||
version: 2.4.8
|
version: 2.4.8
|
||||||
resolution: "@react-native-picker/picker@npm: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-linear-gradient: ^2.6.2
|
||||||
react-native-pager-view: ^6.0.1
|
react-native-pager-view: ^6.0.1
|
||||||
react-native-paper: ^4.12.5
|
react-native-paper: ^4.12.5
|
||||||
|
react-native-picker-select: ^8.0.4
|
||||||
react-native-reanimated: ^2.12.0
|
react-native-reanimated: ^2.12.0
|
||||||
react-native-safe-area-context: ^4.4.1
|
react-native-safe-area-context: ^4.4.1
|
||||||
react-native-screens: ^3.18.2
|
react-native-screens: ^3.18.2
|
||||||
|
@ -8896,6 +8907,16 @@ __metadata:
|
||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
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":
|
"react-native-reanimated@npm:^2.12.0":
|
||||||
version: 2.12.0
|
version: 2.12.0
|
||||||
resolution: "react-native-reanimated@npm:2.12.0"
|
resolution: "react-native-reanimated@npm:2.12.0"
|
||||||
|
|
Loading…
Reference in New Issue
Block a user