React Native IOS Picker

Sat, Feb 10, 2018 2-minute read

React Native IOS Picker

ios picker for react native .

“Screen Shot 1” “Screen Shot 2”

Install package

$ npm i react-native-ios-picker

Usage

Import the component:

import IOSPicker from 'react-native-ios-picker';

data type is array

const data = ['a','b','c','d','e','f']
<IOSPicker 
  data={data}
  onValueChange={(d, i)=> this.change(d, i)}/>

data type is object

const data = [{name: 'SanPyaeLin', code: '22'},{name: 'Jhon', code: '1'},{name: 'Marry', code: '2'}]
<IOSPicker 
  selectedValue={this.state.selectedValue}
  onValueChange={(d, i)=> this.change(d, i)}>
  { 
    data.map((item, index)=>
      <Picker.Item key={index} label={item.name} value={item.code} />
    )
  }
</IOSPicker>

Example

Check full example in the example folder.

Props


Reference

data

An array of sections passed to the render methods

TypeRequired
arrayNo

mode

Specifies how to display the selection items when the user taps on the picker:

  • ‘modal’: Show a modal dialog
  • ‘collapse’: Shows a collapse view. This is the default.
TypeRequired
enum(‘modal’, ‘collapse’)No

onValueChange

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
TypeRequired
functionNo

selectedValue

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

TypeRequired
stringNo

style

TypeRequired
pickerStyleTypeNo

textStyle

TypeRequired
textStyleTypeNo

pickerItemStyle

TypeRequired
pickerItemStyleTypeNo

collapseViewStyle

TypeRequired
collapseViewStyleTypeNo

License

MIT License. © 2018 San Pyae Lin