1import { Picker } from '@react-native-picker/picker';
2import { Platform } from '@unimodules/core';
3import * as React from 'react';
4import { Text } from 'react-native';
5
6import { Page, Section } from '../components/Page';
7
8export default function PickerScreen() {
9  // TODO: PickerIOS, Android `mode`, Android `prompt`, iOS `itemStyle`
10  return (
11    <Page>
12      <Section title="Standard">
13        <GenericPicker />
14      </Section>
15      {Platform.OS !== 'ios' && (
16        <Section title="Disabled">
17          <GenericPicker enabled={false} />
18        </Section>
19      )}
20      {Platform.OS === 'web' && (
21        <Section title="Larger">
22          <GenericPicker style={{ height: 32, width: 128 }} />
23        </Section>
24      )}
25    </Page>
26  );
27}
28
29PickerScreen.navigationOptions = {
30  title: 'Picker',
31};
32
33function GenericPicker(props: Partial<React.ComponentProps<typeof Picker>>) {
34  const [value, setValue] = React.useState<any>('java');
35  return (
36    <>
37      <Picker {...props} selectedValue={value} onValueChange={item => setValue(item)}>
38        <Picker.Item label="Java" value="java" />
39        <Picker.Item label="JavaScript" value="js" />
40        <Picker.Item label="Objective C" value="objc" />
41        <Picker.Item label="Swift" value="swift" />
42      </Picker>
43      <Text>Selected: {value}</Text>
44    </>
45  );
46}
47