https://github.com/binbytes/react-native-simple-modal-picker

React Native modal picker for both Android and iOS
https://github.com/binbytes/react-native-simple-modal-picker

chooser drop-down modal modal-dropdown modal-picker modal-selector node-module node-package picker react-native selector

Last synced: 9 months ago
JSON representation

React Native modal picker for both Android and iOS

• Host: GitHub
• URL: https://github.com/binbytes/react-native-simple-modal-picker
• Owner: binbytes
• Created: 2018-08-21T05:42:32.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T12:15:03.000Z (almost 3 years ago)
• Last Synced: 2025-03-28T15:51:46.284Z (9 months ago)
• Topics: chooser, drop-down, modal, modal-dropdown, modal-picker, modal-selector, node-module, node-package, picker, react-native, selector
• Language: JavaScript
• Homepage:
• Size: 1.45 MB
• Stars: 7
• Watchers: 3
• Forks: 6
• Open Issues: 18
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# react-native-simple-modal-picker

Easy to use and fully customized modal picker for both iOS and Android. Have same look and feel in both plateform.

## Installation

`$ npm install react-native-simple-modal-picker --save`

### Properties

| Prop | DataType | Description | IsRequired |

|---|---|---|---|

|**`data`**|Array| Data in json format | true |

|**`value`**|String|Name of field which you want tobe return on selection from array | true |

|**`label`**|String|Name of field which you want tobe shown in list of selection | true |

|**`onValueChange`**|function(value)|Will be called on item selection and get value as a argument| true |

|**`renderRow`**|function(rowData)|Custom component for render row and get row data as a argument| false |

## Usage

Here full [example](https://github.com/binbytes/react-native-simple-modal-picker/tree/master/example) of package usage

#### Simple Modal Picker

```js

 this.simplePicker = instance} 

  data={this.data} 

  label={'name'} 

  value={'value'}

  onValueChange={(value) => alert(value + ' selected')} />

```

![Simple](https://i.imgur.com/xcriwIC.gif)

#### Modal Picker with Custom Row

```js

 this.customRowPicker = instance} 

  data={this.data} 

  label={'name'} 

  value={'value'}

  onValueChange={(value) => alert(value + ' selected')}

  renderRow={(rowData) => {rowData.name}} />

```

![Custom](https://i.imgur.com/NSZ0NfW.gif)

#### DropDown View

```js

   this.dropDownPicker = instance} 

    data={this.data} 

    label={'name'} 

    value={'value'}

    onValueChange={(value, selectedIndex) => this.setState({selectedIndex})} />

  

     this.dropDownPicker.setModalVisible(true)}>

      {this.data[this.state.selectedIndex].name}

    

  

```

![DropDown](https://i.imgur.com/rPTVTh6.gif)