rn-dropdown-picker 🔥

A simple and customizable React Native Dropdown picker component.

Installation

Supported version: react-native >= 0.59.0

npm install @rahulje9/rn-dropdown-picker

or

yarn add @rahulje9/rn-dropdown-picker

Example

import DropDown from '@rahulje9/rn-dropdown-picker';

<DropDown
  dropdownHeight={120}
  data={[
    {
      label: 'one',
      value: 1,
    },
    {
      label: 'two',
      value: 2,
    },
    {
      label: 'three',
      value: 3,
    },
  ]}
/>

Props

| Prop | Description | Type | Default Value | Required | | :--------------------------:|:--------------------------------------------------------------------------------------|:-----------------------------:|:-------------------:|:--------:| | data | Dropdown values | Array | [] | true | | dropdownHeight | Dropdown list container height | Number | 140 | false | | isMultiple | multiple selection mode | Boolean | false | false | | listItemProps | default list item props | Object | {} | false | | listItemStyle | default list item style | Object | {} | false | | listLabelStyle | default list item label style | Object | {} | false | | showTick | show tick for selected items | Boolean | true | false | | RenderTick | Override default tick component | React Element | null | false | | onChange | callback to get user clicked item | Function |()=>null | false | | containerStyle | container style for the dropdown button | Object | {} | false | | showArrows | whether to show or hide arrow on the dropdown button | Boolean | true | false | | RenderUpArrow | override default up arrow component | React Element | null | false | | RenderDownArrow | override default down arrow component | React Element | null | false | | placeholder | placeholder text | String | 'Select' | false | | placeholderStyle | placeholder text style | Object | {} | false | | RenderPlaceholder | to render custom placeholder component | React Element | null | false | | RenderSelectedItem |to render custom selection inside dropdown | React Element | null | false | | selectedItemLabelStyle | selected item label styles | Object | {} | false | | flatListStyle | flatlist style which is used to show the dropdown values | Object | {} | false | | flatListProps | flatlist props which is used to show the dropdown values | Object | {} | false | | RenderEmptyList | override default empty list component | React Element | null | false | | onSelect | callback to get the selected datas | Function | ()=>null | false |