1import { Picker, PickerProps } 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="Disabled">
24          <GenericPicker enabled={false} />
25        </Section>
26      )}
27
28      {Platform.OS === 'android' && (
29        <Section title="Multiline picker item">
30          <GenericPicker numberOfLines={2}>
31            <Picker.Item label="Really really really really really really really long label" />
32          </GenericPicker>
33        </Section>
34      )}
35
36      {Platform.OS === 'android' && (
37        <Section title="Single line picker item">
38          <GenericPicker numberOfLines={1}>
39            <Picker.Item label="Really really really really really really really long label" />
40          </GenericPicker>
41        </Section>
42      )}
43
44      {Platform.OS === 'android' && (
45        <Section title="Dropdown mode">
46          <GenericPicker mode="dropdown" />
47        </Section>
48      )}
49
50      {Platform.OS === 'android' && (
51        <Section title="Prompt">
52          <GenericPicker mode="dialog" prompt="This is the prompt" />
53        </Section>
54      )}
55
56      {Platform.OS === 'android' && (
57        <Section title="Focus Ref">
58          <FocusPicker />
59        </Section>
60      )}
61
62      {Platform.OS === 'web' && (
63        <Section title="Larger">
64          <GenericPicker style={{ height: 32, width: 128 }} />
65        </Section>
66      )}
67    </ScrollPage>
68  );
69}
70
71PickerScreen.navigationOptions = {
72  title: 'Picker',
73};
74
75function GenericPicker(props: React.PropsWithChildren<PickerProps>) {
76  const [value, setValue] = React.useState<any>('java');
77
78  return (
79    <>
80      <Picker {...props} selectedValue={value} onValueChange={(item) => setValue(item)}>
81        <Picker.Item label="Java" value="java" />
82        <Picker.Item label="JavaScript" value="js" />
83        <Picker.Item label="Objective C" value="objc" />
84        <Picker.Item label="Swift" value="swift" />
85        {props.children}
86      </Picker>
87      <Text>Selected: {value}</Text>
88    </>
89  );
90}
91
92function FocusPicker(props: Partial<React.ComponentProps<typeof Picker>>) {
93  const [value, setValue] = React.useState<any>('java');
94  const pickerRef = React.useRef<any>();
95
96  return (
97    <>
98      <Picker
99        ref={pickerRef}
100        {...props}
101        selectedValue={value}
102        onValueChange={(item) => setValue(item)}>
103        <Picker.Item label="Java" value="java" />
104        <Picker.Item label="JavaScript" value="js" />
105        <Picker.Item label="Objective C" value="objc" />
106        <Picker.Item label="Swift" value="swift" />
107      </Picker>
108      <Text>Selected: {value}</Text>
109
110      <Button title="Focus" onPress={() => pickerRef.current?.focus()} />
111    </>
112  );
113}
114