forked from mrzachnugent/react-native-reusables
-
Notifications
You must be signed in to change notification settings - Fork 0
/
select.tsx
89 lines (85 loc) · 2.43 KB
/
select.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
import * as React from 'react';
import { Platform, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectLabel,
SelectTrigger,
SelectValue,
type Option,
} from '~/components/ui/select';
const VALUES = {
apple: 'Apple',
banana: 'Banana',
blueberry: 'Blueberry',
grapes: 'Grapes',
pineapple: 'Pineapple',
};
export default function SelectScreen() {
const [open, setOpen] = React.useState(false);
const [value, setValue] = React.useState<Option>();
const insets = useSafeAreaInsets();
const contentInsets = {
top: insets.top,
bottom: insets.bottom,
left: 12,
right: 12,
};
function onValueChange(val: Option) {
// prevent unselecting on native to replicate web behavior
if (val) {
// On web, the label and the value are the same.
// Ex: { label: 'apple', value: 'apple' }
// To replicate the native behavior, we need to set the proper label
if (Platform.OS === 'web') {
val.label =
val.label in VALUES
? VALUES[val.label as keyof typeof VALUES]
: val.label;
}
setValue(val);
}
}
return (
<>
<View className='flex-1 justify-center items-center p-6 gap-12'>
<Select
open={open}
onOpenChange={setOpen}
value={value}
onValueChange={onValueChange}
>
<SelectTrigger className='w-[250px]'>
<SelectValue
className='text-foreground text-sm native:text-lg'
placeholder='Select a fruit'
/>
</SelectTrigger>
<SelectContent insets={contentInsets} className='w-[250px]'>
<SelectGroup>
<SelectLabel>Fruits</SelectLabel>
<SelectItem label='Apple' value='apple'>
Apple
</SelectItem>
<SelectItem label='Banana' value='banana'>
Banana
</SelectItem>
<SelectItem label='Blueberry' value='blueberry'>
Blueberry
</SelectItem>
<SelectItem label='Grapes' value='grapes'>
Grapes
</SelectItem>
<SelectItem label='Pineapple' value='pineapple'>
Pineapple
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</View>
</>
);
}