Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/gs-akhan/react-native-select

A simple dropdown for react native - IOS and Android
https://github.com/gs-akhan/react-native-select

android chooser ios react-native select-tag

Last synced: 18 days ago
JSON representation

A simple dropdown for react native - IOS and Android

Awesome Lists containing this project

README 

        

# React Native Selectme

Simple DropDown menu for React Native App! Your Select Tag for React Native. 



## Alternatives :



[react-native-chooser](https://github.com/gs-akhan/react-native-chooser) : This is an upgraded and simple-to-use API. You can customize it to fullest.



## Introduction



React Native Selectme is simple, customizable and easy to use dropdown in React Native. It has been tested on both Android and IOS and works like a charm. 



## Installation

```

npm i react-native-selectme --save

```



## Usage

Require it inside your Javascript files. Also supporting components using object-deconstructing. 

```Select``` ```Option``` ```OptionList```.



`````` Is to be used to append the options. This has to be placed as a last component so that it take the highest Z-Index.



## Example



```jsx

import React, {

  Component,

  AppRegistry,

  Text,

  View,

} from 'react-native';



import DropDown, {

  Select,

  Option,

  OptionList,

} from 'react-native-selectme';



class App extends Component {

  constructor(props) {

    super(props);



    this.state = {

      canada: ''

    };

  }



  _getOptionList() {

    return this.refs['OPTIONLIST'];

  }



  

  _canada(province) {



  this.setState({

      ...this.state,

      canada: province

    });

  }



  render() {

    return (

      

          

            Alberta

            British Columbia

            Manitoba

            New Brunswick

            Newfoundland and Labrador

            Northwest Territories

            Nova Scotia

            Nunavut

            Ontario

            Prince Edward Island

            Quebec

            Saskatchewan

            Yukon

          



          Selected Canada's province: {this.state.canada}

          

          

      

    );

  }

}



AppRegistry.registerComponent('App', () => App);



```



### Configuration



##### Select:

| Property | Type | Default | Description |

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

| width | number | 400 | Width of the selection |

| onSelect | function(text, value) | null | function to be invoked when option is selected |

| height | number | 50 | Height of the selection |

| optionListRef | function | required | Reference to `````` to display the selection menu |

| style | object | null | Custom styles to be applied if supplied |

| defaultValue | string | first option | The value to be displayed if none of the options are selected. |



```blur()``` : close the select by calling blur ```this.refs.SELECT1.blur();```



##### Option:



| Property | Type | Default | Description |

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

| value | any |  null | value will be passed on callback `onSelect` as second argument  |

| style | object | null | Styles to be applied on 'Option' component |

| styleText | object |  null | Styles to be applied on text inside of 'Option'  |



##### OptionList:



| Property | Type | Default | Description |

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

| overlayStyles | object | null | Styles to be applied on 'overlay' backdrop |

| itemsStyles | object | null | Styles to be applied on 'items' dropdown |



## Demo

#####  IOS and Android:



    




## Contributions

Your contributions and suggestions are heartily♡ welcome. (✿◠‿◠)