npm

Bring the best of OSS JavaScript development to your projects with npm Orgs - private packages & team management tools.Learn more »

react-native-picker-view

1.0.6 • Public • Published

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 LibrariesAdd Files to [your project's name]
  2. Go to node_modulesreact-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 PhasesLink 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. 
}

install

npm i react-native-picker-view

Downloadsweekly downloads

13

version

1.0.6

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability