react-native-picker-view

Getting started

$ npm install react-native-picker-view --save

Mostly automatic installation

$ react-native link react-native-picker-view

Manual installation

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-view and add SRSPickerView.xcodeproj
3. In XCode, in the project navigator, select your project. Add libSRSPickerView.a to your project's Build Phases ➜ Link Binary With Libraries
4. Run your project (Cmd+R)<

Android

1. Open up android/app/src/main/java/[...]/MainActivity.java

• Add import com.surajit.rnpv.SRSPickerViewPackage; to the imports at the top of the file
• Add new SRSPickerViewPackage() to the list returned by the getPackages() method

1. Append the following lines to android/settings.gradle:

   include ':react-native-picker-view'
   project(':react-native-picker-view').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-picker-view/android')
   

2. Insert the following lines inside the dependencies block in android/app/build.gradle:

     compile project(':react-native-picker-view')
   

Usage

import Picker from 'react-native-picker-view';
 
// TODO: What to do with the module?
<Picker
      values={["Kolkata","Delhi","Hydrabad","Banglore","Pune"]}
      selected={this.state.index}
      style={{width:100,height:200}}
      enableInput={false}
      onSelect={(value,index) => {
          console.log('onSelect', value, index);
          this.setState({index})
      }}
  />

Sample Output

Android	IOS

props

values

Array of values. Array item must be of type string.

selected

It is the index of the item that needs to be selected in Picker view. It is a 0 based index. Index less than zero is not supported.

enableInput (Android Only)

It is a boolean flag that is determined whether to activate keyboard input in Picker view. This flag is used only for android.

onSelect

It is a callback function, which is called from the library when a selection is changed. Its signature is :--

(selectedValue, selectedIndex) => {
   //selectedValue is the value of the selected item.
   //selectedIndex is the index of the item. 
}