@react-native-picker/picker

 !Supports Android, iOS, MacOS, and Windows !MIT License 

| Android | iOS | PickerIOS | Windows | MacOS |
| --- | --- | --- | --- | --- |
| | | | |

Supported Versions

| @react-native-picker/picker | react-native |
| --- | --- |
| >= 1.2.0 | 0.60+ or 0.59+ with Jetifier |
| >= 1.0.0 | 0.57 |

For Managed Workflow users using Expo 37

This component is not supported in the managed workflow for expo sdk 37. Please import the Picker from react-native.
See more info here

Getting started

$ npm install @react-native-picker/picker --save

or

$ yarn add @react-native-picker/picker

$3

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
`




$3

$ react-native link @react-native-picker/picker

$3


#### iOS

1. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
2. Go to node_modules ➜ @react-native-picker/picker and add RNCPicker.xcodeproj
3. In XCode, in the project navigator, select your project. Add libRNCPicker.a to your project's Build Phases ➜ Link Binary With Libraries
4. Run your project (Cmd+R)<

#### Android

1. Open application file (android/app/src/main/java/[...]/MainApplication.java)
- Add import com.stellarity.picker.RNCPickerPackage; to the imports at the top of the file
- Add new RNCPickerPackage() to the list returned by the getPackages() method
2. Append the following lines to android/settings.gradle:
`
include ':@react-native-picker_picker'
project(':@react-native-picker_picker').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-picker/picker/android')
`
3. Insert the following lines inside the dependencies block in android/app/build.gradle:
`
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]
2. Go to node_modules ➜ @react-native-picker/picker and add RNCPicker.xcodeproj
3. In XCode, in the project navigator, select your project. Add libRNCPicker.a to your project's Build Phases ➜ Link Binary With Libraries
4. Run your project (Cmd+R)<

Usage

$3

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
selectedValue={this.state.language}
style={{height: 50, width: 100}}
onValueChange={(itemValue, itemIndex) =>
this.setState({language: itemValue})
}>



`

$3

* Inherited View props...

- onValueChange
- selectedValue
- style
- testID
- enabled
- mode
- prompt
- itemStyle

---

Reference

Props

$3

Callback for when an item is selected. This is called with the following parameters:

* itemValue: the value prop of the item that was selected
* itemPosition: the index of the selected item in this picker

| Type | Required |
| -------- | -------- |
| function | No |

---

$3

Value matching value of one of the items. Can be a string or an integer.

| Type | Required |
| ---- | -------- |
| any | No |

---

$3

| Type | Required |
| --------------- | -------- |
| pickerStyleType | No |

---

$3

Used to locate this view in end-to-end tests.

| Type | Required |
| ------ | -------- |
| string | No |

---

$3

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 |

---

$3

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 |

---

$3

On Android, specifies color of dropdown triangle. Input value should be hexadecimal string

| Type | Required | Platform |
| ------ | -------- | -------- |
| string | No | Android |

---

$3

Prompt string for this picker, used on Android in dialog mode as the title of the dialog.

| Type | Required | Platform |
| ------ | -------- | -------- |
| string | No | Android |

---

$3

Style to apply to each of the item labels.

| Type | Required | Platform |
| ---------------------------------- | -------- | -------- |
| text styles | No | iOS, Windows |

$3

$3

* Inherited View props...

- itemStyle
- onValueChange
- selectedValue`

---

Reference

Props

$3

| Type | Required |
| ---------------------------------- | -------- |
| text styles | No |

---

$3

| Type | Required |
| -------- | -------- |
| function | No |

---

$3

| Type | Required |
| ---- | -------- |
| any | No |