React Native Picker for iOS & Android
npm install @stellarity/picker@react-native-picker/picker
 !Supports Android, iOS, MacOS, and Windows !MIT License 
| Android | iOS | PickerIOS | Windows | MacOS |
| --- | --- | --- | --- | --- |
|
|
|
|
| 
| @react-native-picker/picker | react-native |
| --- | --- |
| >= 1.2.0 | 0.60+ or 0.59+ with Jetifier |
| >= 1.0.0 | 0.57 |
Picker from react-native.$ npm install @react-native-picker/picker --save
or
$ yarn add @react-native-picker/picker
As react-native@0.60.0 or above supports autolinking, so there is no need to run linking process.
Read more about autolinking here.
#### iOS
CocoaPods on iOS needs this extra step
```
npx pod-install
#### Android
No additional step is required.
#### Windows
##### Add the ReactNativePicker project to your solution.
1. Open the solution in Visual Studio 2019
2. Right-click Solution icon in Solution Explorer > Add > Existing Project
Select D:\dev\RNTest\node_modules\@react-native-picker\picker\windows\ReactNativePicker\ReactNativePicker.vcxproj
##### windows/myapp.sln
Add a reference to ReactNativePicker to your main application project. From Visual Studio 2019:
Right-click main application project > Add > Reference...
Check ReactNativePicker from Solution Projects.
##### pch.h
Add #include "winrt/ReactNativePicker.h".
##### app.cpp
Add PackageProviders().Append(winrt::ReactNativePicker::ReactPackageProvider()); before InitializeComponent();.
#### MacOS
CocoaPods on MacOS needs this extra step (called from the MacOS directory)
``
pod install
$ react-native link @react-native-picker/picker
#### iOS
1. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]node_modules
2. Go to ➜ @react-native-picker/picker and add RNCPicker.xcodeprojlibRNCPicker.a
3. In XCode, in the project navigator, select your project. Add to your project's Build Phases ➜ Link Binary With LibrariesCmd+R
4. Run your project ()<
#### Android
1. Open application file (android/app/src/main/java/[...]/MainApplication.java)import com.stellarity.picker.RNCPickerPackage;
- Add to the imports at the top of the filenew RNCPickerPackage()
- Add to the list returned by the getPackages() methodandroid/settings.gradle
2. Append the following lines to :`
`
include ':@react-native-picker_picker'
project(':@react-native-picker_picker').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-picker/picker/android')
android/app/build.gradle
3. Insert the following lines inside the dependencies block in :`
`
implementation project(path: ':@react-native-picker_picker')
#### MacOS
1. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]node_modules
2. Go to ➜ @react-native-picker/picker and add RNCPicker.xcodeprojlibRNCPicker.a
3. In XCode, in the project navigator, select your project. Add to your project's Build Phases ➜ Link Binary With LibrariesCmd+R
4. Run your project ()<
Renders the native picker component on iOS and Android. Example:
#### Usage
Import Picker from @react-native-picker/picker
`javascript`
import {Picker} from '@react-native-picker/picker';
Create state which will be used by the Picker
`javascript`
state = {
language: 'java',
};
Add Picker like this:`javascript`
style={{height: 50, width: 100}}
onValueChange={(itemValue, itemIndex) =>
this.setState({language: itemValue})
}>
- onValueChange
- selectedValue
- style
- testID
- enabled
- mode
- prompt
- itemStyle
---
Callback for when an item is selected. This is called with the following parameters:
* itemValue: the value prop of the item that was selecteditemPosition
* : the index of the selected item in this picker
| Type | Required |
| -------- | -------- |
| function | No |
---
Value matching value of one of the items. Can be a string or an integer.
| Type | Required |
| ---- | -------- |
| any | No |
---
| Type | Required |
| --------------- | -------- |
| pickerStyleType | No |
---
Used to locate this view in end-to-end tests.
| Type | Required |
| ------ | -------- |
| string | No |
---
If set to false, the picker will be disabled, i.e. the user will not be able to make a selection.
| Type | Required | Platform |
| ---- | -------- | -------- |
| bool | No | Android, Windows |
---
On Android, specifies how to display the selection items when the user taps on the picker:
* 'dialog': Show a modal dialog. This is the default.
* 'dropdown': Shows a dropdown anchored to the picker view
| Type | Required | Platform |
| -------------------------- | -------- | -------- |
| enum('dialog', 'dropdown') | No | Android |
---
On Android, specifies color of dropdown triangle. Input value should be hexadecimal string
| Type | Required | Platform |
| ------ | -------- | -------- |
| string | No | Android |
---
Prompt string for this picker, used on Android in dialog mode as the title of the dialog.
| Type | Required | Platform |
| ------ | -------- | -------- |
| string | No | Android |
---
Style to apply to each of the item labels.
| Type | Required | Platform |
| ---------------------------------- | -------- | -------- |
| text styles | No | iOS, Windows |
- itemStyle
- onValueChange
- selectedValue`
---
| Type | Required |
| ---------------------------------- | -------- |
| text styles | No |
---
| Type | Required |
| -------- | -------- |
| function | No |
---
| Type | Required |
| ---- | -------- |
| any | No |