1import { Picker, PickerProps, PickerIOS } from '@react-native-picker/picker';
2import { Platform } from 'expo-modules-core';
3import * as React from 'react';
4import { Text, Button } from 'react-native';
5
6import { ScrollPage, Section } from '../components/Page';
7
8export default function PickerScreen() {
9  // TODO: PickerIOS
10  return (
11    <ScrollPage>
12      <Section title="Standard">
13        <GenericPicker />
14      </Section>
15
16      {Platform.OS === 'ios' && (
17        <Section title="Item style">
18          <GenericPicker itemStyle={{ fontWeight: 'bold', color: 'blue' }} />
19        </Section>
20      )}
21
22      {Platform.OS === 'ios' && (
23        <Section title="PickerIOS">
24          <GenericPickerIOS />
25        </Section>
26      )}
27
28      {
29        Platform.OS === 'ios' && (
30          <Section title="PickerIOS (override selected value color)">
31            <GenericPickerIOS selectionColor="rgba(200,100,100,.4)" />
32          </Section>
33        ) /* seems to only work with some color types (like rgba), see https://github.com/react-native-picker/picker/pull/474 */
34      }
35
36      {Platform.OS !== 'ios' && (
37        <Section title="Disabled">
38          <GenericPicker enabled={false} />
39        </Section>
40      )}
41
42      {Platform.OS === 'android' && (
43        <Section title="Multiline picker item">
44          <GenericPicker numberOfLines={2}>
45            <Picker.Item label="Really really really really really really really long label" />
46          </GenericPicker>
47        </Section>
48      )}
49
50      {Platform.OS === 'android' && (
51        <Section title="Single line picker item">
52          <GenericPicker numberOfLines={1}>
53            <Picker.Item label="Really really really really really really really long label" />
54          </GenericPicker>
55        </Section>
56      )}
57
58      {Platform.OS === 'android' && (
59        <Section title="Dropdown mode">
60          <GenericPicker mode="dropdown" />
61        </Section>
62      )}
63
64      {Platform.OS === 'android' && (
65        <Section title="Prompt">
66          <GenericPicker mode="dialog" prompt="This is the prompt" />
67        </Section>
68      )}
69
70      {Platform.OS === 'android' && (
71        <Section title="Focus Ref">
72          <FocusPicker />
73        </Section>
74      )}
75
76      {Platform.OS === 'web' && (
77        <Section title="Larger">
78          <GenericPicker style={{ height: 32, width: 128 }} />
79        </Section>
80      )}
81    </ScrollPage>
82  );
83}
84
85PickerScreen.navigationOptions = {
86  title: 'Picker',
87};
88
89function GenericPicker(props: React.PropsWithChildren<PickerProps>) {
90  const [value, setValue] = React.useState<any>('java');
91
92  return (
93    <>
94      <Picker {...props} selectedValue={value} onValueChange={(item) => setValue(item)}>
95        <Picker.Item label="Java" value="java" />
96        <Picker.Item label="JavaScript" value="js" />
97        <Picker.Item label="Objective C" value="objc" />
98        <Picker.Item label="Swift" value="swift" />
99        {props.children}
100      </Picker>
101      <Text>Selected: {value}</Text>
102    </>
103  );
104}
105
106function FocusPicker(props: Partial<React.ComponentProps<typeof Picker>>) {
107  const [value, setValue] = React.useState<any>('java');
108  const pickerRef = React.useRef<any>();
109
110  return (
111    <>
112      <Picker
113        ref={pickerRef}
114        {...props}
115        selectedValue={value}
116        onValueChange={(item) => setValue(item)}>
117        <Picker.Item label="Java" value="java" />
118        <Picker.Item label="JavaScript" value="js" />
119        <Picker.Item label="Objective C" value="objc" />
120        <Picker.Item label="Swift" value="swift" />
121      </Picker>
122      <Text>Selected: {value}</Text>
123
124      <Button title="Focus" onPress={() => pickerRef.current?.focus()} />
125    </>
126  );
127}
128function GenericPickerIOS(props: any) {
129  const [value, setValue] = React.useState<any>('java');
130
131  return (
132    <>
133      <PickerIOS {...props} selectedValue={value} onValueChange={(item) => setValue(item)}>
134        <Picker.Item label="Java" value="java" />
135        <Picker.Item label="JavaScript" value="js" />
136        <Picker.Item label="Objective C" value="objc" />
137        <Picker.Item label="Swift" value="swift" />
138        {props.children}
139      </PickerIOS>
140      <Text>Selected: {value}</Text>
141    </>
142  );
143}
144