https://github.com/rescript-react-native/picker
ReScript bindings for @react-native-community/picker
https://github.com/rescript-react-native/picker
picker react react-native rescript rescript-react rescript-react-native
Last synced: 9 months ago
JSON representation
ReScript bindings for @react-native-community/picker
- Host: GitHub
- URL: https://github.com/rescript-react-native/picker
- Owner: rescript-react-native
- License: mit
- Created: 2020-04-02T02:46:07.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2023-08-02T08:39:35.000Z (over 2 years ago)
- Last Synced: 2025-03-27T03:12:15.139Z (9 months ago)
- Topics: picker, react, react-native, rescript, rescript-react, rescript-react-native
- Language: ReScript
- Homepage:
- Size: 260 KB
- Stars: 2
- Watchers: 2
- Forks: 2
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# `@rescript-react-native/picker`
[](https://github.com/rescript-react-native/picker/actions)
[](https://www.npmjs.com/@rescript-react-native/picker)
[](https://forum.rescript-lang.org/)
[ReScript](https://rescript-lang.org) bindings for
[`@react-native-picker/picker`](https://github.com/react-native-picker/picker).
Exposed as `ReactNativePicker` module.
`@rescript-react-native/picker` X.y.\* means it's compatible with
`@react-native-picker/picker` X.y.\*
## Installation
When
[`@react-native-picker/picker`](https://github.com/react-native-picker/picker)
is properly installed & configured by following their installation instructions,
you can install the bindings:
```console
npm install @rescript-react-native/picker
# or
yarn add @rescript-react-native/picker
```
`@rescript-react-native/picker` should be added to `bs-dependencies` in your
`bsconfig.json`:
```diff
{
//...
"bs-dependencies": [
"@rescript/react",
"rescript-react-native",
// ...
+ "@rescript-react-native/picker"
],
//...
}
```
## Components
### `ReactNativePicker` Component
Supported on _Android_ and _iOS_.
#### Props
| Prop Name and Type | Notes |
| ----------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `onValueChange:`
`('a, int) => unit` | Callback for when an item is selected. Takes as arguements item value of any type (`'a`) and index of the selected item as `int`. |
| `selectedValue: 'a` | Value should be that of one of the items. |
| `enabled: bool` | _Android only_
Making a selection will be disabled when set to `false`. |
| `mode`:
\[ | `` `dialog `` | `` `dropdown `` \] | _Android only_
Specifies how selection items will be displayed the picker is tapped.
- `` `dialog ``: modal dialog (**default**)
- `` `dropdown ``: dropdown anchored to the `Picker` view. |
| `prompt: string` | _Android only_
Title of the modal dialog when `mode` is set to `` `dialog ``. |
| `itemStyle: ReactNative.Style.t` | _iOS only_
Style to be applied to each item label.
**Note:** only `Text` style props are supported. |
Please also see
[ReScript React Native documentation of `View` props](https://rescript-react-native.github.io/en/docs/components/View/)
for additional supported props.
### `ReactNativePickerIOS` Component
Supported on _iOS_.
#### Props
| Prop Name and Type | Notes |
| ------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
| `onValueChange:`
`('a, int) => unit` | Callback for when an item is selected. Takes as arguements item value of any type (`'a`) and index of the selected item as `int`. |
| `selectedValue: 'a` | Value should be that of one of the items. |
| `itemStyle: ReactNative.Style.t` | Style to be applied to each item label.
**Note:** only `Text` style props are supported. |
Please also see
[ReScript React Native documentation of `View` props](https://rescript-react-native.github.io/en/docs/components/View/)
for additional supported props.
### `ReactNativePicker.Item` and `ReactNativePickerIOS.Item` Components
#### Props
| Prop Name and Type | Notes |
| ---------------------------- | -------------------------------------- |
| `value: 'a` | Value of the item. |
| `label: string` | Label for the item in the `Picker`. |
| `color: ReactNative.Color.t` | Color of the item label. |
| `testID: string` | ID string to locate the item in tests. |
---
## Changelog
Check the [changelog](./CHANGELOG.md) for more informations about recent
releases.
---
## Contribute
Read the
[contribution guidelines](https://github.com/rescript-react-native/.github/blob/master/CONTRIBUTING.md)
before contributing.
## Code of Conduct
We want this community to be friendly and respectful to each other. Please read
[our full code of conduct](https://github.com/rescript-react-native/.github/blob/master/CODE_OF_CONDUCT.md)
so that you can understand what actions will and will not be tolerated.