1.0.3 • Published 2 years ago
rn-simple-dropdown v1.0.3
rn-simple-dropdown
A simple dropdown component
Features
- Pure js
- Compatible with both iOS and Android.
- Easy to customize item and style.
Installation
npm i rn-simple-dropdownor
yarn add rn-simple-dropdownUsage
import Dropdown from 'rn-simple-dropdown';
...
const DATA = [
{key: '1', label: 1},
{key: '2', label: 2},
{key: '3', label: 3},
{key: '4', label: 5},
{key: '5', label: 6},
{key: '6', label: 7},
{key: '7', label: 8},
{key: '8', label: 9},
{key: '9', label: 10},
{key: '10', label: 11},
{key: '11', label: 12},
];
....
<Dropdown data={DATA} placeholder="placeholder" maxHeightList={200} />Props
| name | type | default | description |
|---|---|---|---|
| data | require Array<{key:string|numner, label:string|number}> | undefined | list data |
| initValue | {key:string|numner, label:string|number} | undefined | initial initialized value |
| placeholder | string | undefined | The string that will be rendered before dropdown has been selected |
| onChange | function | (val) => void | Callback that is called when the value be changed. |
| style | ViewStyle | null | Style is applied to dropdown |
| listContainerStyle | ViewStyle | null | Style is applied to container of list |
| activeColor | string | '#f5f5f5' | backgroundcolor of active item |
| renderViewItem | function | (item, activeItem) => JSX.Element | undefined | Custom item function |
| icon | View | any | right icon on dropdown |
| overlayColor | string | 'transparent' | color of backdrop |
| maxHeightList | number | undefined | max height to set list data can scroll |
| scrollStyle | ViewStyle | undefined | style apply to scrollview of list data |
| textStyle | TextStyle | undefined | style apply to text value in dropdown |
| placeholderStyle | TextStyle | undefined | style aplly to placerholder text |
| red | Ref | undefined | Reference of dropdown |
Method
| name | description |
|---|---|
| open() | Open dropdown |
| close() | Close dropdown |
| getValue() | get value of selected item |
| setValue(item) | set value for dropdown |
Next version
Looking forward to your constructive comments and suggestions