Components
Picker
WEB APPROXIMATION — Picker wraps @react-native-picker/picker, which is a native wheel on iOS and a native dropdown on Android.
On web it degrades to a <select>, so the sizing and the open/close interaction here are not what ships. Verify on a simulator.
{
function Controlled() {
const [value, setValue] = React.useState('finance');
return (
<Picker {...args} selectedValue={value} onValueChange={v => setValue(v as string)}>
<PickerItem label="Engineering" value="engineering" />
<PickerItem label="Finance" value="finance" />
<PickerItem label="Operations" value="operations" />
<PickerItem label="People" value="people" />
</Picker>
);
}
return <Controlled />;
}Import
import { Picker } from '@simal/ui/nativewindui';Props
| Prop | Values | Default | Description |
|---|---|---|---|
selectedValue | — | — | Value of the active item. Controlled — pair with onValueChange. |
onValueChange | — | — | Fires with (value, index). The value is whatever you put on the matching Picker.Item. |
mode | dialog · dropdown | "dropdown" | Android only. dropdown anchors to the field, dialog opens a modal list. iOS always uses its wheel. |
enabled | boolean | true | False blocks opening the picker and dims it. |
Examples
Disabled
<Picker {...args} selectedValue="engineering">
<PickerItem label="Engineering" value="engineering" />
<PickerItem label="Finance" value="finance" />
</Picker>