react-native-simple-dropdown-select
TypeScript icon, indicating that this package has built-in type declarations

0.1.0 • Public • Published

react-native-simple-dropdown-select

A simple dropdown select picker with support for expo written in typescript. Supports search, one-level of nesting and customisations.

Installation

npm install react-native-simple-dropdown-select

Expo

Works with expo

npx expo install react-native-simple-dropdown-select

Demo Examples

Dropdown component Texas item disabled Florida item has no nested data & is selected.
Item with nested data open Nested data item is selected
Search Enabled

Usage

import { DropDownSelect } from 'react-native-simple-dropdown-select';

export default function App() {
  const [open, setOpen] = useState(false);
  const [value, setValue] = useState<any>(null);

  return (
    <View style={{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    }}>
      <DropDownSelect
        toggle={() => setOpen(!open)}
        selectedData={value}
        open={open}
        data={[
          {
            id: 1,
            name: 'California',
            extraData: ['Apple', 'Banana', 'Orange', 'Mango'],
          },
          {
            id: 2,
            name: 'Texas',
            extraData: ['Tomato', 'Potato', 'Onion', 'Garlic'],
            disabled: true,
          },
          {
            id: 3,
            name: 'Florida',
          },
          {
            id: 4,
            name: 'New York',
            extraData: ['Strawberry', 'Blueberry', 'Raspberry', 'Blackberry'],
          },
          {
            id: 5,
            name: 'Washington',
            extraData: [
              {
                id: 1,
                name: 'Apple',
              },
              {
                id: 2,
                name: 'Banana',
              },
              {
                id: 3,
                name: 'Orange',
              },
              {
                id: 4,
                name: 'Mango',
              },
            ],
          },
          {
            id: 6,
            name: 'Oregon',
            extraData: ['Grapes', 'Cherry', 'Apple', 'Banana', 'Orange'],
          },
          {
            id: 7,
            name: 'Nevada',
            extraData: ['Peach', 'Plum', 'Pear', 'Apricot'],
          },
        ]}
        onSelect={(data) => {
          setValue(data);
          setOpen(false);
        }}
        dropDownContainerStyle={{
          maxHeight: 400,
          minWidth: 200,
        }}
        search
        subViewStyle={{
          backgroundColor: 'pink',
          borderWidth: 1,
        }}
      />
    </View>
  );
}

Props

data

The data prop can change the behaviour of the dropdown select depending on what values it contains.

The basic requirement is for it to have be an array of {id, name}. This will render a list with name displayed as title of items. Some optional fields are:

  • disabled?: the item will be visible but disabled in the drop down list.
  • extraData?: with this field, the dropdown item will have a nested select picker. The parent title will serve as an accordion that toggles the nested picker. extraData can either be an array of strings or numbers or an array of {id, name}.
  • any other extra fields. This will not affect the picker but will be included when the onSelect function is called.

search

The search prop will enable items in dropdown list to be searchable. A search box will appear. Note that nested items in extraData cannot be searched, only top level items.

Prop Description Default
data Array of objects of type {id, name, extraData?, disabled? ..any} to display in the dropdown. Can have one layer of nested data with extraData. extraData can be an array of strings or object of type {id, name, ...any} []
selectedData Object to display as selected. Has same object as a data item but with a value field null
onSelect Function to call when an item is selected. Gets passed a data item with a value field null
label Label to display above the dropdown null
placeholder Placeholder text to display when no item is selected or as search input placeholder null
containerStyle Style object for the container null
dropDownContainerStyle Style object for the dropdown container null
search Boolean to enable search false
searchInputStyle Style object for the search input null
searchContainerStyle Style object for the search container null
EmptyListView React element to display when no items are found null
onChangeSearchText Function to call when search text changes null
SearchIconLeft React element to display on the left of the search input search icon
SearchIconRight React element to display on the right of the search input close icon
onEndReached Function to call when the end of the list is reached null
labelStyle Style object for the label null
showsVerticalScrollIndicator Boolean to show the vertical scroll indicator false
selectedBtnColor Color for the selected title button #E5E5E5
selectedSubBtnColor Color for the selected sub title button if nested with extraData transparent
btnColor Default color for all title buttons not selected #fff
subBtnColor Default color for all sub title button not selected if nested with extraData transparent
onSelectTitle Function to call when a title is selected null
titleStyle Style object for the title null
titleButtonStyle Style object for the title button null
disabledButtonStyle Style object for the disabled button null
disabledTitleStyle Style object for the disabled title null
subButtonStyle Style object for the sub button if nested with extraData null
subTitleStyle Style object for the sub title if nested with extraData null
SubCheckedIcon React element to display as the checked icon if nested with extraData check-mark icon
TitleIcon React element to display as the title icon chevron up
subViewStyle Style object for the sub view null
selectedSubTitleStyle Style object for the selected sub title if nested with extraData null
selectedSubBtnStyle Style object for the selected sub button if nested with extraData null
titleProps Text props for the title null
subTitleProps Text props for the sub title if nested with extraData null
checkedIconPosition Position for the checked icon. left or right of title 'left'
SubSeparator React element to display as the sub separator if nested with extraData null

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT


Made with create-react-native-library

Package Sidebar

Install

npm i react-native-simple-dropdown-select

Weekly Downloads

3

Version

0.1.0

License

MIT

Unpacked Size

155 kB

Total Files

77

Last publish

Collaborators

  • ifeoluwak